@charset "utf-8";
/* ===================================================================
CSS information

 file name  :sub.css
 style info :js class
=================================================================== */

/*----------------------------------------------------
	js class
----------------------------------------------------*/

.jsList {
	padding-left: 40px;
	width: 630px;
	margin-bottom: 20px;
}
.jsList li {
	margin-bottom: 5px;
}

.codeText {
	margin-left: 20px;
}


/*----------------------------------------------------
	dom1
----------------------------------------------------*/


.section {
	margin-bottom: 20px;
}

#news1Title,
#news2Title {
	background-color: #333333;
	width: 400px;
	vertical-align: middle;
	text-align: center;
	padding: 5px;
	font-size: 1.2em;
	border-top: 1px solid #B3D1E3;
	border-right: 1px solid #B0c0c0;
	border-bottom: 1px solid #B0c0c0;
	border-left: 1px solid #B3D1E3;
	margin: 0px auto;
	cursor:pointer;
}
#news1Paragraph,
#news2Paragraph {
	margin: 0px auto;
	width: 400px;
	list-style: none;
}
#news1Paragraph li,
#news2Paragraph li {
	border-bottom: 1px solid #B3D1E3;
	background-color: #666666;
	padding: 5px;
}
/*----------------------------------------------------
	dom2
----------------------------------------------------*/

#mokujiBox {
	width: 648px;
	float: left;
	margin-left: 20px;
	border: 1px solid #B3D1E3;
	margin-bottom: 20px;
}
.mokujiImg img {
	width: 150px;
	float: left;
	margin: 10px;
	border: 1px solid #B3D1E3;
}



#img0,#img1,#img2,#img3,#img4,#img5,#img6,#img7 {
	display:none;
}

#mokuji {
	width: 456px;
	float: left;
	padding: 10px;
}


#mokuji li {
	width: 50px;
	display: inline;
	list-style: none;
	float: left;
	padding: 10px;
}
#mokuji img {
	border: 1px solid #B3D1E3;
}


#mokuji a:hover {
	height: 41px;
	width: 50px;
}

#mokujiText {
	padding: 10px;
	width: 628px;
	float: left;
	border-top: 1px solid #B3D1E3;
	border-right-color: #B3D1E3;
	border-bottom-color: #B3D1E3;
	border-left-color: #B3D1E3;
}

#mokujiText li {
	list-style: none;
}
.mokujiImg {
	list-style: none;
}


#text0,#text1,#text2,#text3,#text4,#text5,#text6,#text7 {
	display:none;
}
#font_list {
	text-align: center;
	list-style: none;
	width: 650px;
	padding-left: 20px;
	margin-bottom: 20px;
	float: left;
}
#font_list li {
	width: 40px;
	margin: 10px;
	float: left;
}

/*----------------------------------------------------
	dom3 文字の拡大、縮小　
----------------------------------------------------*/

.rollover {
	list-style: none;
	padding-left: 20px;
	margin-bottom: 20px;
}
.rollover li {
	margin-bottom: 10px;
}
.jq1List {
	float: left;
	width: 650px;
	padding-left: 20px;
	margin-bottom: 20px;
	list-style: none;
}
.jq1List li {
	display: inline;
	margin-bottom: 20px;
}
.speadBox {
	width: 650px;
	padding-left: 20px;
	height: 270px;
	float: left;
}

#spead {
	float: left;
	width: 650px;
	list-style: none;
}
#spead  li {
	float: left;
	width: 150px;
	padding-right: 12px;
	margin-bottom: 12px;
}
.pazzle {
	width: 610px;
	float: left;
	padding-left: 40px;
}
.jq4 {
	margin-bottom: 20px;
	background-color: #666666;
	width: 200px;
	margin-left: 50px;
	text-align: center;
	padding: 5px;
	border: 1px solid #ccc;
}
.listJq4 {
	padding-left: 80px;
	padding-bottom: 20px;
}

/*----------------------------------------------------
	s3Slider　
----------------------------------------------------*/

#slider {
	width: 400px; /* important to be same as image width */
	height: 300px; /* important to be same as image height */
	position: relative; /* important */
	overflow: hidden; /* important */
	margin-left: 150px;
	margin-bottom: 20px;
}


#sliderContent, #slider1Content {
	width: 400px; /* important to be same as image width or wider */
	position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage, .slider1Image {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
    position: absolute;
    padding: 10px 13px;
    width: 384px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
		-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}

.clear {
	clear: both;
}
.sliderImage span strong, .slider1Image span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
.left {
	top: 0;
    left: 0;
	width: 110px !important;
	height: 280px;
}
.right {
	right: 0;
	bottom: 0;
	width: 90px !important;
	height: 290px;
}
ul { list-style-type: none;}

/*----------------------------------------------------
	styleswitcher
----------------------------------------------------*/


.styleswitcher {
	width: 350px;
	margin-bottom: 20px;
	float: left;
	padding-left: 300px;
	margin-top: 30px;
}

.styleswitcher a {
	width: 20px;
	padding: 5px;
	border: thin solid #999;
	margin-right: 5px;
	height: 20px;
	float: left;
}

.colorBox1 a {
}
.colorBox2 a {
	background-color: #636;
}
.colorBox3 a {
	background-color: #300;
}

/*----------------------------------------------------
	簡単に色々な種類の角丸ボックスが作れるJS - DD_roundies
----------------------------------------------------*/

.ddBox {
	width: 450px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 20px;
}
.ddBox2 {
	padding:5px;
	border:3px solid #f60;
	background-color: #330000;
}

			
.little {
	padding:5px;
	border:1px solid #999;
	background-color: #333;
}

.little li {
	list-style: inside;
	margin-left: 10px;
}

/*----------------------------------------------------
	グラデーションのように色が変化するナビゲーション
----------------------------------------------------*/

.navigation{
	width:150px;
	height: 2.5em;
	background-color: #000;
	padding-top: 5px;
	padding-left: 15px;
	border-bottom: 1px solid #CCCCCC;
	display: block;
}
.navigation2{
	width:150px;
	height: 2.5em;
	background-color:#300;
	padding-top: 5px;
	padding-left: 15px;
	border-bottom: 1px solid #CCCCCC;
	display: block;
}
.navigation3{
	width:150px;
	height: 2.5em;
	background-color:#030;
	padding-top: 5px;
	padding-left: 15px;
	border-bottom: 1px solid #CCCCCC;
	display: block;
}
/*.mootoolsContent {
	float: left;
	width: 420px;
	padding-left: 10px;
}*/

.mootoolsBox {
	float: left;
	width: 165px;
	margin-bottom: 20px;
	padding-left: 50px;
}
.mootoolsBoxR {
	float: right;
	width: 165px;
	margin-bottom: 20px;
	padding-right: 40px;
}

#main .mootoolsList {
	/*padding-left: 20px;*/
	list-style: none;
}
.heightLineBox {
	float: left;
	width: 600px;
	padding-left: 45px;
	margin-bottom: 20px;
}

.heightLineBox .L {
	float: left;
	width: 188px;
	background-color: #003300;
	padding: 5px;
	border-top: 1px solid #666666;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #666666;
}
.heightLineBox .C {
	float: left;
	width: 188px;
	background-color: #330000;
	padding: 5px;
	border-top: 1px solid #666666;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #666666;
}
.heightLineBox .R {
	float: left;
	width: 188px;
	background-color: #990000;
	padding: 5px;
	border-top: 1px solid #666666;
	border-right: 1px solid #333333;
	border-bottom: 1px solid #333333;
	border-left: 1px solid #666666;
}