@import url("reset.css");

html{
}

body{
	background-color: #CDF;
	padding: 1em;
	line-height: 1.2em;
}

h1{
	font-size: 1.5em;
	text-align: center;
	margin: 1em 0;
}
h2{
	margin: 0 0 0.5em;
}
h3{
	margin: 0 0 0.5em;
	text-decoration: underline;
}
h4{
	margin: 0 0 0.5em;
}

.clearfix{
	clear: both;
}
.wrap{
	max-width: 980px;
	margin: 0 auto;
}
.red{
	color: #F00;
}
.orange{
	color: #f60;
}
.green{
	color: rgb(0, 136, 7);
}
.purple{
	color: rgb(124, 0, 196);
}

#form_page textarea{
	width: 60%;
	min-height: 5em;
}

textarea{
	width: 100%;
	display: block;
	margin: 0 auto 2em;
}

input[type="button"],
input[type="submit"]{
	margin: 1em auto;
	display: block;
}

li{
	margin-left: 2em;
	list-style: disc;
}

td,th{
	border: 2px solid #999;
	padding: 6px;
	vertical-align: top;
}
th{
	background: #666;
	color: #FFF;
}
td{
	background: #FFF;
}
td.image_area img{
	width: 40vw;
	max-width: 400px;
}

.nowrap{
	white-space: nowrap;
}

.image_center{
	text-align: center;
}

img{
	max-width: 100%;
}

ol.code-writer{ /* クラス名は任意（以下同）*/
	position:relative;
	margin-left: 0px;
	padding:30px 20px 10px 45px;
	border:none;
	background:#2F3437;
}
ol.code-writer div{ /* 左上のラベル部分 */
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 5px 10px;
	background: #969998;
	line-height: 1;
	font-size: 0.9em;
	color: #fff;
}
ol.code-writer li{ /* 行番号とコードの間のライン */
	padding-left:15px;
	border-left:1.5px solid #000000;
	color: #fff;
	list-style-type: decimal;
}
ol.code-writer li.gray{ /* 行番号とコードの間のライン */
	color: #999;
}
ol.code-writer li .green{
	color: #6A9955;
}
ol.code-writer li .purple{
	color: #C586C0;
}
ol.code-writer li .red{
	color: #F16679;
}
ol.code-writer li .yellow{
	color: #DCCD79;
}
ol.code-writer li .string{
	color: #F9C8B4;
}
ol.code-writer li a{
	color: rgb(122, 239, 255);
}


hr.no-margin{
	margin: 0;
}

.ToggleButton{
	vertical-align: top;
	padding-left: 1em;
	margin: 0;
	padding: 1em 0.5em;
}
.ToggleButton:hover{
	cursor: pointer;
	background-color: #BCE;
}
.ToggleButton:before{
	content: url(toggle_arrow2.png);
	padding-right: 1em;
	display:inline-block;
}
.ToggleButton.open:before{
	content: url(toggle_arrow_open.png);
	padding-right: 1em;
	display:inline-block;
}


@media screen and (min-width:961px){
	.text_left{
		float: left;
		width: 60%;
	}
	.image_right{
		float: right;
		width: 40%;
	}
	.image_right img{
		width: 100%;
	}
	hr{
		clear: both;
	}
}		
@media screen and (max-width:960px){
	.image_right{
		text-align: center;
	}
	.image_right img{
		max-width: 100%;
	}
}