html,body{
	margin:0;
}

a,a:hover,a:visited{
/*	text-decoration:none;	*/
	color:#000000;
}

#taitoru{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:2.8rem;
	text-align:center;
	background-color:#000;
	opacity:1;
	padding-top:1.4rem;
	z-index:1000;
}

@media screen and (min-width:480px){
	#taitoru{
		height:3rem;
		padding-top:1.2rem;
	}
}

#taitoru img{
	height:1.4rem;
}
@media screen and (min-width:480px){
	#taitoru img{
		height:1.8rem;
	}
}

#hamburgerMenu{
	position:fixed;
	width:1.9rem;
	top:1.2rem;
	left:90%;
	z-index:1001;
}

#menu{
	position:fixed;
	left:0px;
	top:-100vh;
	width:100%;
	height:100vh;
	opacity:0.9;
}
#menuWrapper{
	position:absolute;
	overflow:scroll;
	width:100%;
	height:100vh;
	left:0%;
}

#menuHontai{
	position:absolute;
	width:100%;
	left:0px;
	text-align:center;
	padding-left:0%;
	padding-right:5%;
	top:3.8rem;
	font-size:1rem;
	line-height:2.5rem;
	background-color:#000;
	color:#FFF;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

#menuBase{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100vh;
	background-color:#FFF;
	opacity:0;
	display: none;
}

pre {
	position: relative;
	padding: 20px 0rem 20px 2.5rem;
	font-family: 'Roboto Mono', monospace;
	font-weight:400;
	font-size:0.8rem;
	line-height:1.2rem;
	overflow-x:scroll;
	overflow-y:auto;
}
@media screen and (min-width:480px){
	pre{
		font-size:1rem;
		padding: 20px 0rem 20px 3rem;
		line-height:2rem;
	}
}

.line-numbers {
	position: absolute;
	top: 0;
	left: 0;
	padding: 20px 5px 20px 5px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border-right: 1px solid #999;
	width: 1.5rem;
}
@media screen and (min-width:480px){
	.line-numbers {
		width: 2rem;
	}
}

.line-numbers > span {
    float: left;
    display: block;
    counter-increment: linenumber;
    text-align: right;
    width: 100%;
}

.line-numbers > span::after {
    content: counter(linenumber);
}

#theWrapper{
	position:relative;
	width:90%;
	margin:4.2rem 0 0 0;
	padding:0% 5% 0% 5%;
	height:auto;
	background:#FFF;
}

#title{
	position:relative;
	text-align:center;
	margin:0 auto;
	width:100%;
	max-width:580px;
	padding:2rem 0 1rem 0;
	font-size:1.3rem;
	line-height:2rem;
	font-weight: bold;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	background:#FFF;
}

#sampleMovie{
	position:relative;
	text-align:center;
	padding:5% 0%;
	width:100%;
	height:200px;
}

#sampleMovieContent{
	width:100%;
	max-width:580px;
	height:100%;
}

#kaisetsu{
	position:relative;
	width:96%;
	margin:0 0 1.5rem 0;
	padding:0 2% 1.5rem 2%;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size:1rem;
	line-height:1.6rem;
	background:#FFF;
}

#contentsWrapper{
	position:relative;
	width:100%;
	padding:0% 0% 0% 0%;
}

#contents{
	position:relative;
	width:100%;
	height:auto;
}

#contents .content{
	position:relative;
	display:inline-block;
	width:100%;
	padding:0% 0% 5% 0%;
	vertical-align:top;
}
@media screen and (min-width:1000px){
	#contents .content {
		width:48%;
	}
}

.contentTitle{
	width:96%;
	height:1.8rem;
	margin:0% 0% 0% 0%;
	padding:0.3rem 2% 0% 2%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size:1rem;
	font-weight:bold;
}

#youiContentTitle{
	background:#EEE;
	color:#333;
}

#kairoContentTitle{
	background:#CCC;
	color:#333;
}

#arduinoContentTitle{
	background:#17a1a5;
	color:#000019;
}

#processingContentTitle{
	background:#132638;
	color:#eeffff;
}

#sankouContentTitle{
	background:#DDD;
	color:#333;
}

.contentContent{
	width:100%;
	height:90%;
	margin:1% 0%;
	font-size:0.8rem;
	line-height:1.2rem;
	background:#FFF;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size:1rem;
	line-height:1.6rem;
	background:#FFF;
}

.sorezoreKaisetsu{
	width:96%;
	margin:1rem 0 1rem 0;
	padding:0 2% 0 2%;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size:1rem;
	line-height:1.6rem;
	background:#FFF;
}

.youiContentContent{
	width:100%;
	margin:0% 0%;
	padding:1.8% 0%;
}

#youiContents{
	width:96%;
	padding:0% 2%;
}

.kairoContentContent{
	width:100%;
	height:auto;
	margin:0% 0%;
	padding:2% 0%;
	background:#FFF;
}

.kairozu{
	width:96%;
	padding:0% 2%;
}
@media screen and (min-width:480px){
	.kairozu{
		width:50%;
		padding:0% 25%;
	}
}

.arduinoContentContent{
	width:100%;
	background:#FFF;
}

.processingContentContent{
	width:100%;
	background:#FFF;
}

.sankouContentContent{
	width:100%;
	background:#FFF;
}

.contentImg{
	width:96%;
	padding:5% 2% 0% 2%;
}

@media screen and (min-width:480px){
	.contentImg{
		width:50%;
		padding:5% 25% 0% 25%;
	}
}


.arduinoComment{
	color:#434f54;
}

.arduinoFunctionName{
	color:#5e6d03;
}

.arduinoVoid{
	color:#00979c;
}

.processingComment{
	color:#666666;
}

.processingFunctionName{
	color:#006699;
	font-weight:700;
}

.processingVoid{
	color:#33997e;
}

.akai{
	color:red;
}