@charset "utf-8";

#MeshHeader{
	background:url(../images/bg_yellow.gif);
	padding:7px 30px 7px 7px;
	text-align:right;
	font-size:85%;
}
#footer{
	background:url(../images/bg_yellow.gif);
	border:none;
}
a:hover { color:#33ad00; }

h1 {
	display:block;
	text-align:center;
	font-size:225%;
	line-height:135%;
	font-weight:bold;
	letter-spacing:4px;
	padding:15px 0 10px;
	margin:0 0 50px;
	border-bottom:5px solid #333;
}
h1 span {
	display:inline-block;
	margin-bottom:10px;
	font-size:85%;
	letter-spacing:2px;
	background: #FFF;
	padding:5px 20px 0;
}
h2 {
	color:#06b29f;
	border-color:#06b29f;
}
h3 {
	text-align:center;
	font-size:205%;
	font-weight:bold;
	line-height:115%;
	letter-spacing:3px;
	padding:0 0 5px;
	margin:25px 0;
	border-bottom:5px solid #333;
}
h3.jibun {
	display:block;
	margin:40px 5px 15px;
	font-size:135%;
	letter-spacing:5px;
	border-bottom:1px dotted #333;
}
h4 {
	font-size:105%;
	letter-spacing:3px;
	padding:0 5px 3px;
	margin:20px 0;
	border-bottom:1px dotted #333;
}
h4.Recipe {
	font-size:135%;
	font-weight:bold;
	padding:0;
	margin:0 0 20px;
	border:none;
	letter-spacing:1px;
	color:#00a0e9;
}
h4.Recipe span {
	display:block;
	float:left;
	width: 35px;
	height: 35px;
	margin:0 10px 0 0;
	background: #00a0e9;
	color: #ffffff;
	border-radius: 50%;
	text-align: center;
	padding-top:7px;
	line-height: 100%;
}
h5 {
	font-size:105%;
	font-weight:bold;
	padding:0 5px;
	margin:0 0 10px;
	border-bottom:1px dotted #CCC;
	color:#00a0e9;
}


p.MESHNotice {
	background:url(../mesh/images/icon_notice.png)no-repeat 0 0;
	padding:11px 0 20px 63px;
	margin-bottom:0;
}
p.KanseiIcon {
	background:url(../mesh/images/raspi06_photo07.png)no-repeat 0 10px;
	padding:0 0 20px 165px;
	margin-bottom:0;
	font-size:115%;
}

.JibunNotice {
	display:block;
	background:url(../images/bg_yellow.gif);
	padding:20px 20px;
	margin:20px 0;
	line-height:145%;
	border-radius: 5px;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/* lecture/vol03.htmlのアプリリスト内h3 */
.InfoBox h3 {
	font-size:185%;
	letter-spacing:1px;
}

p.Buy {
	color:#e8342b;
	font-size:135%;
	text-align:center;
	font-weight:bold;
	padding:20px 0 25px;
}
img.ListPhoto {
	max-width:70%;
}
img.CopyPhoto {
	max-width:40%;
}
span.Notice {
	display:inline-block;
	padding:5px 15px 0;
	margin:10px 0;
	background:#e60012;
	color:#FFF;
	border-radius: 5px;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
span.Apri {
	padding:5px 15px 0;
	margin:0 10px 0 0;
	background:#000;
	color:#FFF;
	border-radius: 5px;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

/* Studuino */
img.StuduinoLogo {
	padding:0 15px 0 50px;
	margin:0 auto;
}
/* index 左側が画像（最新号紹介 */
.inner dl.CurrentNumber {
	width:90%;
	margin:0 auto;
}
.inner dl.CurrentNumber dt {
	width:35%;
	padding-right:10%;
	line-height:0;
}
.inner dl.CurrentNumber dd {
	width:65%;
}
.inner dl.CurrentNumber dt img {
	max-width:100%;
	border:1px solid #dcdcdc;
}
/* プログラミング基礎講座メニュー */
.inner .LectureMenu {
	display:block;
}
.inner .LectureMenu a {
	display:block;
	background:#06b29f;
	border:7px solid #EFEFEF;
	padding:25px 15px 5px;
	margin-bottom:15px;
	color:#FFF;
}
.inner .LectureMenu a:hover {
	background:url(../images/bg_yellow.gif);
	color:#06b29f;
}
.inner .LectureMenu dl {
	font-size:185%;
	font-weight:bold;
}
.inner .LectureMenu dt {
	width:50%;
	padding-left:15px;
	padding-top:5px;
	line-height:135%;
	text-align:left;
}
.inner .LectureMenu dd {
	width:50% ;
	padding-left:1%;
	line-height:0;
}
/*.inner .LectureMenu dt span {
	display:block;
	margin:5px 0 10px;
	font-size:125%;
}
*/.inner .LectureMenu dd img {
	width:47%;
	margin:1%;
	border:1px solid #dcdcdc;
	height:127px;
}
/* 詳細ページ タイトル */
.inner p.LecturePage {
	color:#06b29f;
	font-weight:bold;
	font-size:215%;
	line-height:125%;
}
.inner p.Update {
	font-size:115%;
	font-weight:normal;
	color:#292929;
	letter-spacing:2px;
}
.inner p.Update span { float:right; }

/* 詳細ページ 本文・画像 */
.inner dl.LectureList dt {
	width:45%;
	float:right;
	text-align:right;
	clear:none;
}
.inner dl.LectureList dd {
	width:55%;
	float:left;
}
.inner dl.LectureList dt img {
	max-width:80%;
	margin-bottom:10px;
	border:1px solid #dcdcdc;
}
/* 詳細ページ 左に画像バージョン */
.inner dl.LectureList dt.LeftImg {
	width:60%;
	text-align:left;
	padding-top:25px;
	padding-right:5%;
}
.inner dl.LectureList dd.LeftImg {
	width:40%;
	text-align:center;
	padding-top:20px;
}

.inner ul.DottedList {
	display:block;
	margin:10px 0 25px 20px;
	list-style-position:outside;
}
.inner ul.DottedList li {
	list-style-type: disc;
	font-size:95%;
	letter-spacing:0;
	line-height:125%;
	margin-bottom:10px;
}
.inner ul.DottedList li a {
	text-decoration:underline;
}

/* 応用レシピ 自分だけの暗証コードをつくろう！ */
.PhotoBox {
	display:block;
	margin:25px auto;
	position: relative;
	overflow: hidden;
}
.PhotoBox ul {
	float:left;
	left:50%;
	position:relative;
}
.PhotoBox li {
	display:block;
	width:33.3%;
	text-align:center;
	float:left;
	left:-50%;
	position:relative;
	margin-bottom:30px;
}
.PhotoBox li img {
	display:block;
	margin:0 auto;
	max-width:98%;
	border:1px solid #E8E8E8;
}
.PhotoBox li.MBox {
	width:30%;
	margin-bottom:10px;
}
.PhotoBox li.ArrowBox {
	width:5%;
	bottom:-100px;
}
.PhotoBox li.ArrowBox img,
.PhotoBox img.NoBorder { border:none; }
.PhotoBox li.InfoBox {
	width:70%;
	padding:30px 0 0;
	text-align:left !important;
}
/* 1705senser の画像 */
.ImgCenter img{
	max-width:40%;
	margin:0 5px;
	vertical-align:middle;
}

/* 番号付きリスト */
ol.list_parentheses{
	overflow: hidden;
	width:100%;
	padding:0 7px;
}
ol.list_parentheses li{
	display:block;
	list-style-type:none;
	counter-increment: cnt;
	padding:0 0 10px 26px;
}
ol.list_parentheses li:before{
	display: marker;
	content: counter(cnt) ") ";
	margin-left:-26px;
}

/* 三角リスト */
.defaultlist
,.defaultlist li{
	padding:0px;
	margin:0px;
}
 
.defaultlist li{
	list-style-type:none !important;
	list-style-image:none !important;
	margin: 5px 0px 5px 0px !important;
}
 
.list1 li{
	position:relative;
	padding-left:20px;
}
 
.list1 li:before{
	content:''; 
	display:block; 
	position:absolute; 
	box-shadow: 0 0 2px 2px rgba(255,255,255,0.2) inset;
	top:5px; 
	left:5px; 
	height:0; 
	width:0; 
	border-top: 6px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 9px solid #aaa;
}

/* レシピ11～　キャプション */
.inner dt p.Caption { max-width:88%; line-height:125%; letter-spacing:0; margin-bottom:30px; }
.inner dt p.Caption span { display:block; font-size:95%; }

/* レシピ13～　水色囲み */
.Kakomi {
	padding:20px 20px 0;
	margin:0;
	border: 4px solid #00a0e9;
	border-radius: 5px;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.Kakomi h4 {
	font-size:125%;
	font-weight:bold;
	padding:0;
	margin:0 0 10px;
	border:none;
	letter-spacing:1px;
	color:#00a0e9;
}
/* レシピ13～　黄色囲み */
.KakomiYellow {
	padding:15px 20px;
	margin:0 0 20px;
	background:#FF3;
	border-radius: 5px;
	webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}
.KakomiYellow p {
	margin: 0;
	font-size: 100%;
	line-height: 135%;
}
.KakomiYellow p.Title {
	color:#e60012;
	font-weight:bold;
	margin-bottom:5px;
}

/* PC用 */
@media only screen and (min-width: 900px){
}
@media only screen and (max-width:899px){
	p.Buy a {
		display:block;
		width:70%;
		margin:10px auto 0;
	}
	.inner dl.CurrentNumber {
		width:100% !important;
	}
	.inner dl.CurrentNumber dt {
		width:35%;
		float:left !important;
		padding-right:5%;
	}
	.inner dl.CurrentNumber dd {
		width:65%;
		float:right !important;
	}
	.inner .LectureMenu dl { font-size:145%; }
	.inner .LectureMenu dt { float:left; }
	.inner .LectureMenu dd { float:right; }
	h1 { font-size:185%; letter-spacing:2px; }
	.inner dt p.Caption { text-align:left; margin:0 auto 30px; }
}
/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
	img.StuduinoLogo {
		padding:0;
		display:block;
	}
	.inner dl.LectureList dt,
	.inner dl.LectureList dd,
	.inner .LectureMenu dt,
	.inner .LectureMenu dd,
	.inner dl.LectureList dt.LeftImg ,
	.inner dl.LectureList dd.LeftImg {
		width:100%;
		float:none;
	}
	.inner .LectureMenu dt,
	.inner dl.LectureList dt.LeftImg,
	.inner dl.LectureList dd.LeftImg { padding:0 0 0 5px; }
	.inner dl.LectureList dt { text-align:center; }
	.inner dl.LectureList dt img { max-width:70%; }
	.PD-B50 { padding-bottom:0; }
	h1 { font-size:175%; letter-spacing:0; }
	h2 { font-size:175%; margin:0 1% 50px; }
	h3 { font-size:165%; letter-spacing:0; }
	a.AnimeBtnGr { font-size:95%; letter-spacing:0; }
	.inner p.LecturePage {
		font-size:205%;
		margin-bottom:10px;
	}
	.inner p.Update span { display:block; float:none; }
	.PhotoBox li.ArrowBox { bottom:-80px; }
	img.CopyPhoto {
		max-width:70%;
	}
}
/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
	.inner dl.CurrentNumber dt,
	.inner dl.CurrentNumber dd {
		width:100%;
		float:none;
		padding:0;
		margin:0;
	}
	.inner dl.CurrentNumber dt img { max-width:35%; }
	h1 { font-size:145%; }
	h2 { font-size:145%;}
	.PhotoBox li.ArrowBox { bottom:-50px; }
	.PhotoBox li.InfoBox { padding:10px 0 0; }
}