@charset "utf-8";


/* プログラミング配下スタイル指定
------------------------------------------------------------------*/
body{ color:#5e4d3f;}
img{ vertical-align:bottom;}

/*190219　追記*/
img[height="1"][width="1"]{
 display:none;
}

/* header - */
.programming_body .kids_logo p{ width:980px; margin:2px auto 12px; padding:0 12px; text-align:left;}
.programming_body .kids_logo p a{ margin-left: 12px;}
.programming_body .kids_logo img{ width: 130px; height: auto;}

.programming_body .maincontents section{ padding-bottom: 60px;}
.programming_body .maincontents section.scratch_menu{ padding-bottom: 50px;}

.breadcrumbs ol{ margin: 0; padding: 24px 0 0 13px; list-style: none;}
.breadcrumbs li{ font-size: 100%; font-size: 1.2rem; line-height: 1;  display: inline; margin: 0 12px 0 0; padding-right: 22px; background: url(/kids/images/programming/Arrow_Dark.png) no-repeat right center; white-space:nowrap;}
.breadcrumbs li:last-child{ background: none;}
.breadcrumbs li a{ text-decoration: none; white-space:nowrap;}
.breadcrumbs li a:hover{ text-decoration: underline;}

.scratch_header { margin:0; padding:0; display:block;min-height:100px;  height:auto; background:#EDBB21; overflow:hidden;}
.scratch_header .conts_iner{ width:980px; margin:0 auto; text-align:left;}
.scratch_header .header_nav{ display: block; float: left;width: 650px;}
.scratch_header .breadcrumbs li{ color: #fff; background: url(/kids/images/programming/Arrow_Light.png) no-repeat right center;}
.scratch_header .breadcrumbs li:last-child{ background: none;}
.scratch_header .breadcrumbs li a{ color: #fff;}

.open_scratch{ width:312px; float:right;}
.open_scratch a{ font-size:180%; font-size:1.8rem; font-weight: bold; width:270px; display: block; margin:20px 0 20px 20px; padding: 10px 0 12px 20px; color:#5e4d3f; background-color: rgba(255, 255, 255, 0.7); -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #5e4d3f;}
.open_scratch a:hover{ opacity:0.7;}
.open_scratch a dl{ display:table;}
.open_scratch a dt{ display:table-cell; padding-right:10px;}
.open_scratch a dd{ display:table-cell; vertical-align:middle;}

.prozemi_header { margin:0; padding:0; display:block;min-height:100px;  height:auto; background:#44b1d2; overflow:hidden;}
.prozemi_header .conts_iner{ width:980px; margin:0 auto; text-align:left;}
.prozemi_header .header_nav{ display: block; float: left;width: 650px;}
.prozemi_header .breadcrumbs li{ color: #fff; background: url(/kids/images/programming/Arrow_Light.png) no-repeat right center;}
.prozemi_header .breadcrumbs li:last-child{ background: none;}
.prozemi_header .breadcrumbs li a{ color: #fff;}




/* H1見出し - */
.mainImg{ width:auto; height:260px;}
.programming_body .mainImg.fmvProgramming_2nd{ background:#eab206 url(/kids/images/programming/Programming_Main.png) no-repeat center center;}
.scratch_header h1{ color:#fff; font-size:280%; font-size:2.8rem; line-height:1; margin-top:20px;}
.prozemi_header h1{ color:#fff; font-size:280%; font-size:2.8rem; line-height:1; margin-top:20px;}

/* H2見出し - */
.kids_page .introductionArea h2,
.kids_page h2{ color:#ea7006; font-size:320%; font-size:3.2rem; line-height:1; text-align:center; margin-top:63px; margin-bottom:50px;}


/* プログラミングトップ・記事ページ共通
------------------------------------------------------------------*/
.programming_body .maincontents section.introductionArea{ overflow:hidden; padding-bottom:17px;}
.introductionArea .scratch_link{ display:block; float:left; width:650px; min-height:268px; margin-right:25px; padding-bottom:10px; background:#b08604; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.introductionArea .scratch_link a{ display:block; width:622px; min-height:240px; padding:14px; background:#eab206; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.introductionArea .scratch_link a dl{ overflow:hidden;}
.introductionArea .scratch_link a dl dt{ float:left;}
.introductionArea .scratch_link a dl dt img{ vertical-align:bottom;}
.introductionArea .scratch_link a dl dd{ margin-left:334px; color:#fff; font-size:180%; font-size:1.8rem; font-weight:bold;}
.introductionArea .scratch_link a dl dd + dd.btn{ margin-top:10px; text-align:center;}
.introductionArea .scratch_link a dl dd + dd.btn img{ margin-right:10px;}

/* 20180417_プログラミングゼミ追加用
------------------------------------------------------------------*/
.introductionArea .prozemi_link{ display:block; float:left; width:650px; min-height:268px; margin-right:25px; padding-bottom:10px; background:#276779; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.introductionArea .prozemi_link a{ display:block; width:622px; min-height:240px; padding:14px; background:#44b2d3; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.introductionArea .prozemi_link a dl{ overflow:hidden;}
.introductionArea .prozemi_link a dl dt{ float:left;}
.introductionArea .prozemi_link a dl dt img{ vertical-align:bottom;}
.introductionArea .prozemi_link a dl dd{ margin-left:334px; color:#fff; font-size:180%; font-size:1.8rem; font-weight:bold;}
.introductionArea .prozemi_link a dl dd + dd.btn{ margin-top:10px; text-align:center;}
.introductionArea .prozemi_link a dl dd + dd.btn img{ margin-right:10px;}
/* 20180417_プログラミングゼミ追加用　ここまで*/

.introductionArea .friends_voice{ float:right; width:305px;}
.introductionArea .friends_voice h3{ width:305px; display:table-cell; vertical-align:middle; color:#ea7006; font-size:200%; font-size:2rem; text-align:center; background:url(/kids/images/programming/img_Voice_M.png) no-repeat right bottom; height:46px; min-height:46px;}
.introductionArea .friends_voice .voice_memo{ background:#fff; padding:14px 14px 6px; border:solid 2px #eab206; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.kids_page .maincontents .introductionArea .friends_voice .voice_memo p{ font-size:160%; font-size:1.6rem; color:#5e4d3f; line-height:1.5; margin-bottom:14px;}
.kids_page .maincontents .introductionArea .friends_voice .voice_memo p.friends_name{ color:rgba(0, 0, 0, 0.5); font-size:160%; font-size:1.6rem;line-height:1;}

.programming_body .maincontents section.articleArea{ margin:73px 0 0; padding:80px 40px; background:#fff;  -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.articleArea h2{ margin:0 0 50px; text-align:left;}
.articleArea img{ margin-bottom:60px;}
.article_txt{ margin-bottom:60px;}
.articleArea .article_txt:last-child { margin-bottom:0;}
.kids_page .maincontents .article_txt p{ margin-bottom:0;}
.kids_page .maincontents .article_txt p + p{ margin-top:40px;}
.recommendArea h2{ margin:80px 0 50px;}

.programming_panel{ width:730px; height:280px; margin:0 auto; overflow:hidden;}
.programming_panel ul li{ float:left; margin:0; padding:0; margin-right:25px;}
.programming_panel ul li:last-child{ margin-right:0;}
.programming_panel a{ display:block; width:200px; height:236px; font-size:180%; font-size:1.8rem; font-weight:bold; line-height:1.2; color:#5e4d3f; padding:14px 13px 20px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.programming_panel a img{ display:block; margin-bottom:20px;}
.programming_panel ul li.scratch_panel a{ background:#eab206; color:#fff;}



/* スクラッチ 一覧
------------------------------------------------------------------*/
.maincontents section.intro_box{ padding-top:50px; padding-bottom:50px;}
.maincontents section.intro_box dl{ overflow:hidden; padding-left:40px; padding-right:40px;}
.maincontents section.intro_box dl dt{ float:left;}
.maincontents section.intro_box dl dt img{ vertical-align:bottom;}
.maincontents section.intro_box dl dd{ margin-left:260px;}
.maincontents section.intro_box dl dd p{ font-size:180%; font-size:1.8rem; font-weight:bold; line-height:1.4;}
.maincontents section.intro_box dl dd p.sub_txt{ color:rgba(0, 0, 0, 0.4); font-size:1.5rem; font-weight:normal; line-height: 1.3; margin-bottom:0;}
.maincontents section.intro_box dl dd p.sub_txt span.mark{ float:left; display:block;}
.maincontents section.intro_box dl dd p.sub_txt span.text{display:block; margin-left:1.75em;}

.scratch_menu{ width:900px; padding:30px 40px 50px; margin-bottom:60px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.kids_page .scratch_menu h2{ margin:0 0 30px; text-align:left;}
.scratch_menu ul.scratch_start{ margin-bottom:50px;}
.scratch_menu ul li{ overflow:hidden; margin-bottom:20px;}
.scratch_menu ul li a,
.scratch_menu ul li div,
.scratch_menu ul li p{ font-size:180% !important; font-size:1.8rem !important; font-weight:bold;}

.scratch_menu ul li a{ color:#5e4d3f; font-weight:bold; width: auto; float: left;}
.scratch_menu ul.scratch_start li,
.scratch_menu ul.scratch_conts li ul li,
.scratch_menu ul.scratch_conts.todays_point li ul li { margin:0 40px 20px 0; padding-left:40px;}
.scratch_menu ul.scratch_conts.todays_point li ul li{ margin-bottom:20px;}
.scratch_menu ul.scratch_conts.todays_point li ul li a{ width:auto;}
.scratch_menu ul.scratch_conts.todays_point li ul li a p{ }
.scratch_menu ul.scratch_conts.todays_point li{ margin-bottom:0;}

.scratch_menu ul li.sub_menu div.sub_link{ width: auto; float: left;}
.scratch_menu ul li a img,
.scratch_menu ul li.sub_menu div.sub_link img{ float:left; margin-right:20px; border:solid 1px #bbb;}
.scratch_menu ul li a p,
.scratch_menu ul li.sub_menu div.sub_link p{ white-space:nowrap; margin-bottom:0 !important; display:block; float:left; line-height:60px !important;}
.scratch_menu ul li.sub_menu ul{ clear:both;}
.scratch_menu ul li.sub_menu ul li{ min-height:60px; margin:0 0 20px 142px !important; padding-left: 28px !important; background:url(/kids/images/programming/AccordionIcon_16_OrangeDot.png) no-repeat left 43%;}
.scratch_menu ul li.sub_menu ul li:last-child { margin-bottom:0 !important;}

.scratch_menu ul li .right_block,
.scratch_menu ul li.sub_menu div.sub_link .right_block{ float:right; width:310px;}
.scratch_menu ul.scratch_start li .right_block,
.scratch_menu ul li ul li ul li a + .right_block{ width:138px;}
.scratch_menu ul li p.level,
.scratch_menu ul li p.star,
.scratch_menu ul li p.pageNo{ height:60px; display:table-cell; padding-left:20px; vertical-align:middle; line-height:2; font-weight:normal; color:#a2a2a2;}
.scratch_menu ul li p.level{ width:90px; text-align:left;}
.scratch_menu ul li p.star{ width:50px; padding-left:10px;}
.scratch_menu ul li p.pageNo{ width:118px; text-align:right;}


ul.scratch_conts li .link,
ul.scratch_conts.todays_point li .link{ cursor:pointer; display:table-cell; width:860px; height:60px; vertical-align:middle; padding-left:20px; padding-right:20px; background:#dea906; color:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px}
ul.scratch_conts.todays_point li .link{ background:#e68144;}
ul.scratch_conts li .link span.categoly_open,
ul.scratch_conts.todays_point li .link span.categoly_open{ display:block; float:right; width:28px; height:28px; background:url(/kids/images/programming/AccordionIcon_28_Plus.png) no-repeat center center;}

ul.scratch_conts li .link:hover,
ul.scratch_conts.todays_point li .link:hover{ opacity:0.7;}

/*ul.scratch_conts li .link:hover span.categoly_open,
ul.scratch_conts.todays_point li .link:hover span.categoly_open,*/
ul.scratch_conts li.dtlOpen .link span.categoly_open,
ul.scratch_conts.todays_point li.dtlOpen .link span.categoly_open{ background:url(/kids/images/programming/AccordionIcon_28_Minus.png) no-repeat center center;}

ul.scratch_conts li .link + ul{ margin-top:20px; padding-top:0;}

.scratch_menu ul.scratch_conts li ul li.sub_menu{ padding-left:0;}
ul.scratch_conts li.sub_menu .sub_link{ cursor:pointer; padding-left:40px; background:url(/kids/images/programming/AccordionIcon_16_Plus.png) no-repeat 12px 22px;}
ul.scratch_conts li.sub_menu.dtlOpen .sub_link{ background:url(/kids/images/programming/AccordionIcon_16_Minus.png) no-repeat 12px 22px;}

ul.scratch_conts li.sub_menu > ul{ display:none;}
ul.scratch_conts li.sub_menu.dtlOpen > ul{ padding-top:20px;}


.scratch_slider h2{ margin-top:0; margin-bottom: 20px; line-height:1;}
.scratch_slider .slider_sub_txt{ text-align:center; font-size:180%; font-size:1.8rem; margin-bottom:50px;line-height: 1;}

.scratch_slider .slider_area{ width:980px; height:270px; margin-bottom:60px; position:relative;}
.scratch_slider .slider_area ul.slider_nav li.prev{ cursor:pointer; position:absolute; top:95px; left:10px; display:block; width:80px; height:80px; background:url(/kids/images/programming/Arrow_L.png) no-repeat center center; text-indent:-9999px;}
.scratch_slider .slider_area ul.slider_nav li.next{ cursor:pointer; position:absolute; top:95px; right:10px; display:block; width:80px; height:80px; background:url(/kids/images/programming/Arrow_R.png) no-repeat center center; text-indent:-9999px;}
.scratch_slider .slider_area ul.slider_nav li.prev:hover,
.scratch_slider .slider_area ul.slider_nav li.next:hover{ opacity:0.7;}

.scratch_slider .panel_area{ width:750px; height:280px; margin:0 auto; overflow:hidden;}
.scratch_slider .panel_area ul.slider li{ float:left; margin:0; padding:0; margin-right:25px;}
.scratch_slider .panel_area ul.slider li:nth-child(1),
.scratch_slider .panel_area ul.slider li:nth-child(4){ margin-left:12px;}
.scratch_slider .panel_area ul.slider li:nth-child(3),
.scratch_slider .panel_area ul.slider li:nth-child(6){ margin-right:12px;}
.scratch_slider .panel_area ul.slider li a{ display:block; width:200px; height:236px; font-size:180%; font-size:1.8rem; font-weight:bold; line-height:1.2; color:#5e4d3f; padding:14px 13px 20px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.scratch_slider .panel_area ul.slider li a img{ display:block; margin-bottom:20px;}



/* スクラッチ セッション スタイル指定
------------------------------------------------------------------*/
.maincontents section.scratch_contents{ padding-bottom:60px;}

.scratch_img{ display:block; margin:0 auto; padding:20px 0; width:720px; height:540px;}
.scratch_img img{ width:100%; height:auto;}

.scratch_page_nav{ display:block; width:620px; min-height:60px; margin:0 auto; overflow:hidden;}
.scratch_page_nav ul li{ display:inline-block;}
.scratch_page_nav.start .prev{ display:none;}
.scratch_page_nav.start ul li.prev + li{ width:228px; min-height:30px;}
.scratch_page_nav ul li a{ display:block; width:226px; font-size:180%; font-size:1.8rem; font-weight: bold; text-align:center; background:#fff; color:#5e4d3f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #5e4d3f;}
.scratch_page_nav ul li span{ display:block; padding: 15px 0;}
.maincontents .scratch_page_nav.start ul li.note_list { width: 151px; font-weight:bold; min-height: 30px; margin-left: 232px;}
.scratch_page_nav ul li.note_list{width:151px; font-weight:bold; font-size:180%; font-size:1.8rem; text-align:center;}
.scratch_page_nav ul li.next_page span{ padding:10px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border:solid 5px #db7631;}

.scratch_page_end{display:none;}
.scratch_page_end .back_btn a{ font-size:180%; font-size:1.8rem; font-weight: bold; text-align:center; width:226px; display: block; padding: 10px 0; margin:30px auto 50px; color: #fff; background:#db7631; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #5e4d3f;}
.scratch_page_nav ul li a:hover,
.scratch_page_end .back_btn a:hover{ opacity:0.7;}


/* 提供サイトリンク */
.scratch_page_end .provider	{ text-align: center; margin-bottom:0; }
.scratch_page_end .provider a { color: #eb8e4f; font-size:180%; font-size: 1.8rem; }
.scratch_page_end .provider a:hover { text-decoration:underline;}


.scrolltop { right: 15px; bottom: 70px;}
.linksite .innerBlock { width: 600px; height: 367px;}

/* プログラミングゼミ一覧
------------------------------------------------------------------*/

.mov	{
		margin-bottom:0.5em;
		}
	
	.mov .mov-imghover{
		-webkit-transition: 0.2s ease-in-out;  
		-moz-transition: 0.2s ease-in-out;  
		-o-transition: 0.2s ease-in-out;  
		transition: 0.2s ease-in-out;  
		}
		
	.mov .mov-imghover:hover{
		filter: alpha(opacity=70);
		-moz-opacity: 0.7;
		opacity: 0.7;
		} 

.mov_exp	{
padding:15px;

}

.kids_page .maincontents ol {
    font-size: 161.5%;
    font-size: 2.1rem;
    line-height: 2;
    margin-bottom: 1em;
}
.pcdllink	{
border:solid;
border-radius:4px;
border-color:#23aa82 ;
line-height:1.2;
padding-top:6px;
width:300px;
height:50px;
color:#fff;
background:#FFFFFF;
display:block;
font-size: 1.2 rem;
text-align:center;
}

.innerblock h3 {
color: #44b3D2;/*文字色*/
padding: 0.5em 0;/*上下の余白*/
font-size:2.0rem
}

.prozemi_index{
	list-style-type: decimal;
	padding:20px;
	margin-top:-20px;
	}
	
	
.maincontents section.intro_box{ padding-top:50px; padding-bottom:50px;}
.maincontents section.intro_box dl{ overflow:hidden; padding-left:40px; padding-right:40px;}
.maincontents section.intro_box dl dt{ float:left;}
.maincontents section.intro_box dl dt img{ vertical-align:bottom;}
.maincontents section.intro_box dl dd{ margin-left:260px;}
.maincontents section.intro_box dl dd p{ font-size:180%; font-size:1.8rem; font-weight:bold; line-height:1.4;}
.maincontents section.intro_box dl dd p.sub_txt{ color:rgba(0, 0, 0, 0.4); font-size:1.5rem; font-weight:normal; line-height: 1.3; margin-bottom:0;}
.maincontents section.intro_box dl dd p.sub_txt span.mark{ float:left; display:block;}
.maincontents section.intro_box dl dd p.sub_txt span.text{display:block; margin-left:1.75em;}

.prozemi_menu{ width:900px; padding:30px 40px 50px; margin-bottom:60px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}
.kids_page .prozemi_menu h2{ margin:0 0 30px; text-align:left;}
.prozemi_menu ul.prozemi_start{ margin-bottom:50px;}
.prozemi_menu ul li{ overflow:hidden; margin-bottom:20px;}
.prozemi_menu ul li a,
.prozemi_menu ul li div,
.prozemi_menu ul li p{ font-size:180% !important; font-size:1.8rem !important; font-weight:bold;}

.prozemi_menu ul li a{ color:#5e4d3f; font-weight:bold; width: auto; float: left;}
.prozemi_menu ul.prozemi_start li,
.prozemi_menu ul.prozemi_conts li ul li,
.prozemi_menu ul.prozemi_conts.todays_point li ul li { margin:0 40px 20px 0; padding-left:40px;}
.prozemi_menu ul.prozemi_conts.todays_point li ul li{ margin-bottom:20px;}
.prozemi_menu ul.prozemi_conts.todays_point li ul li a{ width:auto;}
.prozemi_menu ul.prozemi_conts.todays_point li ul li a p{ }
.prozemi_menu ul.prozemi_conts.todays_point li{ margin-bottom:0;}

.prozemi_menu ul li.sub_menu div.sub_link{ width: auto; float: left;}
.prozemi_menu ul li a img,
.prozemi_menu ul li.sub_menu div.sub_link img{ float:left; margin-right:20px; border:solid 1px #bbb;}
.prozemi_menu ul li a p,
.prozemi_menu ul li.sub_menu div.sub_link p{ white-space:nowrap; margin-bottom:0 !important; display:block; float:left; line-height:60px !important;}
.prozemi_menu ul li.sub_menu ul{ clear:both;}
.prozemi_menu ul li.sub_menu ul li{ min-height:60px; margin:0 0 20px 142px !important; padding-left: 28px !important; background:url(/kids/images/programming/AccordionIcon_16_OrangeDot.png) no-repeat left 43%;}
.prozemi_menu ul li.sub_menu ul li:last-child { margin-bottom:0 !important;}

.prozemi_menu ul li .right_block,
.prozemi_menu ul li.sub_menu div.sub_link .right_block{ float:right; width:310px;}
.prozemi_menu ul.prozemi_start li .right_block,
.prozemi_menu ul li ul li ul li a + .right_block{ width:138px;}
.prozemi_menu ul li p.level,
.prozemi_menu ul li p.star,
.prozemi_menu ul li p.pageNo{ height:60px; display:table-cell; padding-left:20px; vertical-align:middle; line-height:2; font-weight:normal; color:#a2a2a2;}
.prozemi_menu ul li p.level{ width:90px; text-align:left;}
.prozemi_menu ul li p.star{ width:50px; padding-left:10px;}
.prozemi_menu ul li p.pageNo{ width:118px; text-align:right;}


ul.prozemi_conts li .link,
ul.prozemi_conts.todays_point li .link{ cursor:pointer; display:table-cell; width:860px; height:60px; vertical-align:middle; padding-left:20px; padding-right:20px; background:#dea906; color:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px}
ul.prozemi_conts.todays_point li .link{ background:#e68144;}
ul.prozemi_conts li .link span.categoly_open,
ul.prozemi_conts.todays_point li .link span.categoly_open{ display:block; float:right; width:28px; height:28px; background:url(/kids/images/programming/AccordionIcon_28_Plus.png) no-repeat center center;}

ul.prozemi_conts li .link:hover,
ul.prozemi_conts.todays_point li .link:hover{ opacity:0.7;}

/*ul.prozemi_conts li .link:hover span.categoly_open,
ul.prozemi_conts.todays_point li .link:hover span.categoly_open,*/
ul.prozemi_conts li.dtlOpen .link span.categoly_open,
ul.prozemi_conts.todays_point li.dtlOpen .link span.categoly_open{ background:url(/kids/images/programming/AccordionIcon_28_Minus.png) no-repeat center center;}

ul.prozemi_conts li .link + ul{ margin-top:20px; padding-top:0;}

.prozemi_menu ul.prozemi_conts li ul li.sub_menu{ padding-left:0;}
ul.prozemi_conts li.sub_menu .sub_link{ cursor:pointer; padding-left:40px; background:url(/kids/images/programming/AccordionIcon_16_Plus.png) no-repeat 12px 22px;}
ul.prozemi_conts li.sub_menu.dtlOpen .sub_link{ background:url(/kids/images/programming/AccordionIcon_16_Minus.png) no-repeat 12px 22px;}

ul.prozemi_conts li.sub_menu > ul{ display:none;}
ul.prozemi_conts li.sub_menu.dtlOpen > ul{ padding-top:20px;}


.prozemi_slider h2{ margin-top:0; margin-bottom: 20px; line-height:1;}
.prozemi_slider .slider_sub_txt{ text-align:center; font-size:180%; font-size:1.8rem; margin-bottom:50px;line-height: 1;}

.prozemi_slider .slider_area{ width:980px; height:270px; margin-bottom:60px; position:relative;}
.prozemi_slider .slider_area ul.slider_nav li.prev{ cursor:pointer; position:absolute; top:95px; left:10px; display:block; width:80px; height:80px; background:url(/kids/images/programming/Arrow_L.png) no-repeat center center; text-indent:-9999px;}
.prozemi_slider .slider_area ul.slider_nav li.next{ cursor:pointer; position:absolute; top:95px; right:10px; display:block; width:80px; height:80px; background:url(/kids/images/programming/Arrow_R.png) no-repeat center center; text-indent:-9999px;}
.prozemi_slider .slider_area ul.slider_nav li.prev:hover,
.prozemi_slider .slider_area ul.slider_nav li.next:hover{ opacity:0.7;}

.prozemi_slider .panel_area{ width:750px; height:280px; margin:0 auto; overflow:hidden;}
.prozemi_slider .panel_area ul.slider li{ float:left; margin:0; padding:0; margin-right:25px;}
.prozemi_slider .panel_area ul.slider li:nth-child(1),
.prozemi_slider .panel_area ul.slider li:nth-child(4){ margin-left:12px;}
.prozemi_slider .panel_area ul.slider li:nth-child(3),
.prozemi_slider .panel_area ul.slider li:nth-child(6){ margin-right:12px;}
.prozemi_slider .panel_area ul.slider li a{ display:block; width:200px; height:236px; font-size:180%; font-size:1.8rem; font-weight:bold; line-height:1.2; color:#5e4d3f; padding:14px 13px 20px; background:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; -webkit-box-shadow:0px 4px 5px 0px #d1ccb9; box-shadow:0px 4px 5px 0px #d1ccb9;}
.prozemi_slider .panel_area ul.slider li a img{ display:block; margin-bottom:20px;}


/*プログラミングゼミ セッション スタイル指定
------------------------------------------------------------------*/
.maincontents section.prozemi_contents{ padding-bottom:60px;}

.prozemi_img{ display:block; margin:0 auto; padding:20px 0; width:720px; height:540px;}
.prozemi_img img{ width:100%; height:auto;}

.prozemi_page_nav{ display:block; width:620px; min-height:60px; margin:0 auto; overflow:hidden;}
.prozemi_page_nav ul li{ display:inline-block;}
.prozemi_page_nav.start .prev{ display:none;}
.prozemi_page_nav.start ul li.prev + li{ width:228px; min-height:30px;}
.prozemi_page_nav ul li a{ display:block; width:226px; font-size:180%; font-size:1.8rem; font-weight: bold; text-align:center; background:#fff; color:#5e4d3f; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #5e4d3f;}
.prozemi_page_nav ul li span{ display:block; padding: 15px 0;}
.maincontents .prozemi_page_nav.start ul li.note_list { width: 151px; font-weight:bold; min-height: 30px; margin-left: 232px;}
.prozemi_page_nav ul li.note_list{width:151px; font-weight:bold; font-size:180%; font-size:1.8rem; text-align:center;}
.prozemi_page_nav ul li.next_page span{ padding:10px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border:solid 5px #db7631;}

.prozemi_page_end{display:none;}
.prozemi_page_end .back_btn a{ font-size:180%; font-size:1.8rem; font-weight: bold; text-align:center; width:226px; display: block; padding: 10px 0; margin:30px auto 50px; color: #fff; background:#db7631; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; border: 1px solid #5e4d3f;}
.prozemi_page_nav ul li a:hover,
.prozemi_page_end .back_btn a:hover{ opacity:0.7;}


/* 20190508_micro:bit追加用
------------------------------------------------------------------*/
.cont_microbit .intro_box dt {
    margin-right: 40px;
}
.microbit_menu {
    width: 900px;
    padding: 30px 40px 50px;
    margin-bottom: 60px;
    background: #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.microbit_menu h2 {
    margin: 0 0 30px;
    text-align: center;
}
.microbit_menu h2 .ttl_fukidashi {
    display: inline-block;
    position: relative;
    padding: 40px 0 0 60px;
}
.microbit_menu h2 .ttl_fukidashi img {
    position: absolute;
    top: -38px;
    left: -70px;
}
.microbit_menu ol.microbit_mv_index {
	width: 840px;
	margin: 60px auto 80px;
	font-size: 21px;
}
/*.microbit_menu ol li a {
    color: #5e4d3f;
}*/
.microbit_mv_index li * {
    display: inline-block;
    vertical-align: top;
}
.microbit_mv_index li span.number {
    min-width: 140px;
}
.microbit_mv_index li span.ttl {
    width: 460px;
}
.microbit_mv_index li span.date {
    padding-left: 1em;
	float: right;
}
.date {
    color: #b0b0b0;
    font-size: 18px;
}
.microbit_mv_index .pre{
	display: none !important;
}

.cont_microbit #microbit_movie .cont:last-child {
    margin-bottom: 0;
}

#microbit_movie .cont{
	display: table;
	margin-bottom: 80px;
	border-spacing: 35px 0;
}
#microbit_movie .cont > div{
	display: table-cell;
	vertical-align: top;
}
#microbit_movie .cont .txt,
#microbit_movie .cont .txt p{
	width: 425px;
	word-wrap: break-word;
}

#microbit_movie .cont h3{
	margin-bottom: 30px;
}
#microbit_movie .cont h3 span.number {
    background: #db7631;
    border-radius: 20px;
    color: #fff;
    font-size: 20px;
    font-weight: normal;
    padding: 0.2em 1.2em 0.1em;
}
#microbit_movie .cont h3 span.ttl {
	display: block;
	margin-top: 30px;
    font-size: 30px;
	line-height: 1.2;
}
#microbit_movie .cont h3 span.date {
    font-weight: normal;
	float: right;
}
#microbit_movie .cont .txt p {
    font-size: 20px;
	line-height: 1.5;
}

.link_webmart,
.link_manabi{
	margin: 80px auto;
}
.link_webmart .ofr{
	background: #fff;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 0 30px 0 20px;
	width: 910px;
	margin: 25px auto 15px;
	color: #333;
	position: relative;
	z-index: 1;
}
.ofr .img,
.ofr div,
.ofr .btn{
	display: table-cell;
	vertical-align: middle;
}
.ofr_kit .img{
	padding: 10px 10px 14px 0;
}
.ofr_single .img{
	padding: 6px 10px 10px 0;
}
.ofr div{
	width: 460px;
}
.ofr h4{
	padding: 2px 20px 8px 0;
	display: inline-block;
}
.ofr .lead{
	font-size: 16px;
	display: inline-block;
	padding: 0 0 10px 18px;
	line-height: 1.4;
	letter-spacing: 0.05em;
}

.ofr_kit dl{
	display: inline-block;
	padding: 0 0 0 20px;
}
.ofr_kit dt{
	background: #fff;
	display: inline-block;
	padding: 0 0.3em;
	margin: 0 0.3em;
	position: relative;
	z-index: 2;
	line-height: 1;
	font-size: 14px;
	font-weight: bold;
}
.ofr_kit dd{
	background: none;
	border-radius: 10px;
	border: 3px dotted #333;
	padding: 10px 6px 10px 16px;
	margin: -12px 0 0 -10px;
	line-height: 1.5;
	position: relative;
	font-size: 13px;
}
.ofr_kit dd::after{
	position: absolute;
	top: 4px;
	left: 5px;
	content: "";
	width: 101%;
	height: 108%;
	z-index: -999;
	background: #fcfaf1;
	border-radius: 10px;
}

.link_manabi .bnr_area div {
    display: table;
    border-spacing: 30px 0;
    margin: 20px auto 40px;
}
.link_manabi .bnr_area div p {
    display: table-cell;
}

.bnr_area a {
    -webkit-transition: 0.2s ease-in-out;
    -moz-transition: 0.2s ease-in-out;
    -o-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
}
.bnr_area a:hover {
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    opacity: 0.7;
}
.bnr_area .txt {
    font-size: 180%;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 1.4;
    text-align: center;
    margin-top: -10px;
}
.mb-manabi p {
    font-size: 180%;
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1.5;
    text-align: center;
}
.mb-manabi p.mb-manabi_text {
    margin-bottom: 30px;
}
.mb-manabi p span {
    font-weight: bold;
    font-size: 180%;
    font-size: 1.8rem;
}

/*見出し下　サブテキスト*/
.link_webmart .txt::before {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  left: 238px;
  width: 35px;
  height: 4px;
  background: #5e4d3f;
  transform: rotate(45deg);
}
.link_webmart .txt {
  position: relative;
  color: #5e4d3f;
}
.link_webmart .txt::after {
  display: block;
  content: "";
  position: absolute;
  top: 14px;
  right: 238px;
  width: 35px;
  height: 4px;
  background: #5e4d3f;
  transform: rotate(-45deg);
}

.bnr_area .anno{
	text-indent: -1em;
	padding-left: 1em;
	text-align: right;
	width: 910px;
	margin: 10px 35px;
	line-height: 1.5;
	font-size: 12px;
}
/* 20190508_micro:bit追加用　ここまで*/

/* 20190610_micro:bit改修
------------------------------------------------------------------*/
.cont_microbit section.intro_box {
    padding-bottom: 40px !important;
}
.cont_microbit .intro_movie_box {
    width: 900px;
    margin: 0 auto 70px;
    padding: 40px;
    background: #dfd8bf;
    border-radius: 10px;
    display: table;
    border-spacing: 29px 0;
}
.cont_microbit .intro_movie_box figure {
    display: table-cell;
    vertical-align: top;
    text-align: center;
    line-height: 0;
    width: 386px;
    margin: 0 auto;
}
.cont_microbit .intro_movie_box figure figcaption {
    background: #333;
    padding: 13px 0 13px;
    width: 386px;
    margin: 0 auto;
}
.cont_microbit .intro_movie_box .txt {
    display: table-cell;
    width: 426px;
}
.cont_microbit .intro_movie_box .txt h3 {
    margin: 0 0 0 15px;
    font-size: 30px;
    line-height: 1.2;
}
.cont_microbit .intro_movie_box .txt ul {
    display: inline-table;
    border-spacing: 15px;
}
.cont_microbit .intro_movie_box .txt ul li {
    display: table-cell;
}
.cont_microbit .intro_movie_box .txt p {
    margin: 0 0 0 15px;
    font-size: 16px;
    line-height: 1.4;
}
/* 20190610_micro:bit改修　ここまで*/

/* 20201007_logica追加用
------------------------------------------------------------------*/
.programming_body .maincontents.cont_logica section{padding-bottom: 40px;}
.cont_logica .lesson_menu,
.cont_logica .download_menu {
    width: 900px;
    padding: 30px 40px 50px;
    margin-bottom: 60px;
    background: #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.cont_logica h2{
	margin: 10px 0 30px;
	text-align: center;
}
.cont_logica h2 span{
	font-size: 75%;
	display: block;
	margin-bottom: 0.5em;
}
.cont_logica h2 span.anno{
	font-size: 45%;
	margin: 1.5em auto 0;
}
.kids_page .maincontents.cont_logica p{ font-size:161.5%; font-size:1.8rem; line-height:1.7; margin:0 20px 20px;}
.cont_logica ul li a,
.cont_logica ul li div,
.cont_logica ul li p{ font-size:180% !important; font-size:1.8rem !important; font-weight:bold;}

/* intro_box */
.cont_logica .intro_box dt { margin-right: 40px;}
.cont_logica .intro_box ul li{ font-size:180% !important; font-size:1.8rem !important; font-weight:bold; margin-top: 10px;}
.cont_logica .intro_box ul li img{float: left; margin-right: 10px;}
.cont_logica .intro_box ul li .link{ cursor:pointer; display:table-cell; width:420px; height:60px; vertical-align:middle; padding-left:20px; padding-right:20px; background:#e68144; color:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center;}
.cont_logica .intro_box ul li .link span.categoly_down{ display:block; float:right; width:28px; height:28px; background:url(/kids/images/programming/LinkIcon_28_Down.png) no-repeat center center;}
.cont_logica .intro_box ul li .link:hover{ opacity:0.7;}

/* pro_news */
.cont_logica .pro_news{
	background: #fff;
	border-radius: 10px;
	margin: 20px auto 60px;
	padding-bottom: 0 !important;
}
.cont_logica .pro_news .wtBox{
	padding: 20px 30px;
}
.cont_logica .pro_news .wtBox section{
	padding: 0;
}
.cont_logica .pro_news h3{
	margin-bottom: 10px;
	color: #ea7006;
	font-size: 2.2rem;
}
.cont_logica .ntxt{
	line-height: 1.8;
	margin-bottom: 0;
	font-size: 1.6rem;
}
.cont_logica .ntxt li .date, .cont_logica .ntxt li a{
	font-size: 100% !important;
	font-weight: normal;
}
.cont_logica .ntxt li .date{
	display: inline-block;
	min-width: 150px;
	font-size: inherit;
	color: inherit;
}

/* intro_movie_box */
.cont_logica .intro_movie_box{
	border-top: 4px dotted #5e4d3f;
	padding-top: 30px;
	margin-bottom: 0 !important;
	margin-top: 50px;
}
.cont_logica .intro_movie_box:first-child{
	border-top: none;
	padding-top: 0;
	margin-top: 30px;
}
.cont_logica .intro_movie_box > div {
	width: 100%;
    margin: 0 auto 30px !important;
    padding: 20px 20px 20px 60px;
    background: #dfd8bf url(/kids/images/programming/logica/intro_film.png) no-repeat right top;
    border-radius: 10px;
    display: block;
	box-sizing: border-box;
}
.cont_logica .intro_movie_box > div .mov{
	display: inline-block;
	width: 320px;
	margin: 0;
}
.cont_logica .intro_movie_box > div .mov img{
	width: 320px !important;
	height: auto;
}
.cont_logica .intro_movie_box > div .txt{
	display: inline-block;
	width: 430px;
	margin-left: 35px;
	vertical-align: top;
}
.cont_logica .intro_movie_box > div .txt h3{
	margin: 5px 0 10px;
	font-size: 30px;
	line-height: 1.3;
}
.cont_logica .intro_movie_box > div .txt img{
	display: block;
	text-align: center;
	margin: -15px auto -15px;
	width: 290px;
	height: auto;
}

/* download_menu */
.cont_logica .download_menu ul li{ /*overflow:hidden;*/ margin-bottom:20px;}
.cont_logica .download_menu .lay2col{width: 860px; margin: 20px 20px 40px;}
.cont_logica .download_menu .lay2col li{display: table-cell; width: 430px !important; box-sizing: border-box;}
.cont_logica .download_menu li.prozemidllink .innerblock h3{display: inline-block; vertical-align: top; width: 620px;}
.cont_logica .download_menu li.prozemidllink .innerblock > div{float: right; margin: 10px 20px;}
.cont_logica .download_menu .pcdllink{padding-top: 0; width: 320px; height: 54px;}
.cont_logica .download_menu .pcdllink a{display: table-cell; vertical-align: middle;width: 320px; height: 56px;}
.cont_logica .download_menu .pcdllink a:link,
.cont_logica .download_menu .pcdllink a:visited{color: #003399;}
.cont_logica .download_menu .pcdllink a:hover,
.cont_logica .download_menu .pcdllink a:active{color: #0080ec;}

.cont_logica .download_menu .logica_conts ul li{
	font-size: 16px !important;
	line-height: 1.4;
	font-weight: normal;
	box-sizing: border-box;
	margin: 0 20px 10px;
	width: 860px;
}
.cont_logica .download_menu .zipdllink p{float: right;}
.cont_logica .download_menu .zipdllink .link{ cursor:pointer; display:table-cell; width:310px; height:60px; vertical-align:middle; padding-left:50px; padding-right:50px; background:#e68144; color:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; line-height: 2;}
.cont_logica .download_menu .zipdllink .link span.categoly_dl{ display:block; float:left; width:40px; height:40px; background:url(/kids/images/programming/LinkIcon_40_Download.png) no-repeat center center;}
.cont_logica .download_menu .zipdllink .link:hover{ opacity:0.7;}

/* tooltip */
.tooltip{
    position: relative;
    cursor: pointer;
    display: inline-block;
}
.tooltip > img{
    width: 20px;
	padding: 0 0 4px 8px;
}
.popup01,
.popup02{
    display: none;
    position: absolute;
    padding: 20px 10px 0;
    font-size: 12px;
    line-height: 1.6em;
    color: #fff;
    border-radius: 5px;
    background: rgba(0,0,0,0.8);
	text-align: center;
	z-index: 99999999;
}
.popup01:before{
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    border: 15px solid transparent;
    border-top: 15px solid rgba(0,0,0,0.8);
    margin-left: -15px;
}
.popup02:before{
    content: "";
    position: absolute;
    top: 100%;
    left: 85%;
    border: 15px solid transparent;
    border-top: 15px solid rgba(0,0,0,0.8);
    margin-left: -15px;
}
.tooltip:hover .popup01{
    display: inline-block;
    width: 460px;
	top: -310px !important;
	left: -222px !important;
}
.tooltip:hover .popup02{
    display: inline-block;
    width: 520px;
	top: -350px !important;
	left: -442px !important;
}
.popup01 img,
.popup02 img{
	width: auto;
	height: auto;
}
.kids_page .maincontents.cont_logica .popup01 p,
.kids_page .maincontents.cont_logica .popup02 p{
	font-size: 14px !important;
	font-weight: normal !important;
	padding-top: 10px !important;
}

/* lesson_menu */
.cont_logica .lesson_menu ul li{ overflow:hidden; margin-bottom:20px;}
.cont_logica ul.logica_conts li .link{ cursor:pointer; display:table-cell; width:860px; height:60px; vertical-align:middle; padding-left:20px; padding-right:20px; background:#dea906; color:#fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px}
.cont_logica ul.logica_conts li .link span.categoly_open{ display:block; float:right; width:28px; height:28px; background:url(/kids/images/programming/AccordionIcon_28_Plus.png) no-repeat center center;}
.cont_logica ul.logica_conts li .link:hover{ opacity:0.7;}
.cont_logica ul.logica_conts li.dtlOpen .link span.categoly_open{ background:url(/kids/images/programming/AccordionIcon_28_Minus.png) no-repeat center center;}
.cont_logica ul.logica_conts li .link + ul{ margin-top:20px; padding-top:0;}

.cont_logica .lesson_menu .logica_conts ul{
	border-spacing: 20px 0;
}
.cont_logica .lesson_menu .logica_conts ul li{
	display: table-cell;
}
.cont_logica .lesson_menu .logica_conts ul li p{
	font-size: 16px !important;
	line-height: 1.4;
	font-weight: normal;
	box-sizing: border-box;
	margin: 0 10px 10px;
}

/* shadowbox閉じるボタン修正 */
.programming_body #sb-info{position: relative; top: -642px; right: -40px; height: 40px;}
.programming_body #sb-info-inner{position: absolute; top: 0; right: 0; width: 40px; height: 40px;}
.programming_body #sb-nav{width: 40px; height: 40px; position: absolute; top: 0; right: 0;}
.programming_body #sb-nav a{width: 40px; height: 40px; float: none;}
.programming_body #sb-nav-close{background-image:url(/kids/images/parts/close_40.png); background-size: contain;}
/* 20201007_logica追加用　ここまで*/


/* ------------------------------------------------------------------
 プログラミングページ レイアウト改修 (190218追記)
------------------------------------------------------------------ */

#program {
  padding-top: 60px;
}

/*shortning.css
-------------------------------------------------*/
#program .pb30 {padding-bottom: 30px;}
#program .pr {position: relative;}
#program .txtl {text-align: left;}
#program .txtc {text-align: center;}
#program .txtr {text-align: right;}
#program .br10 {-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

/*共通
-------------------------------------------------*/
#program section {
  padding-bottom: 80px;
}
#program h2 {
  line-height: 1.5;
  margin: 0 0 30px;
}
#program .subSection {
  padding-bottom: 0;
}
#program .subSection h3 {
  margin-bottom: 10px;
  color: #ea7006;
  font-size: 2.2rem;
}
#program .m0a{
	margin: 0 auto;
}
#program .mt40{
	margin-top: 40px;
}

/*白背景*/
#program .wtBox {
  padding: 20px 30px;
  background: #fff;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 0px 4px 5px 0px #d1ccb9;
  box-shadow: 0px 4px 5px 0px #d1ccb9;
}

#program .ntxt {
  line-height: 1.8;
  margin-bottom: 0;
  font-size: 1.6rem;
}
#program .pro_news .ntxt span.date {
	display: inline-block;
	min-width: 150px;
	font-size: inherit;
	color: inherit;
}

/*くわしく見るボタン　共通*/
#program .btn01 a,
#program .btn02 {
  padding: 8px 52px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

/*くわしく見るボタン　オレンジ*/
#program .btn01 {
  margin-bottom: 0;
  font-size: 1.8rem;
  font-weight: bold;
  text-align: right;
}
#program .btn01 a {
  background: #ea560d;
  color: #fff;
}
#program .btn01 a:hover,
#pro01 .colOne .colBox a:hover,
#pro01 .colTwo .colBox a:hover,
#pro01 .colThree .colBox a:hover{
  opacity: 0.7;
}

/*くわしく見るボタン　白*/
#program .btn02 {
  display: inline-block;
  background: #fff;
  color: #b08604;
}
#program .btn02:hover {
  background: #ea560d;
  color: #fff;
}

/*1カラムエリア*/
#program .colOne {
  display: flex;
  justify-content: space-between;
}
#program .colOne .colBox {
  position: relative;
  width: 980px;
}
#program .colBox::after {
  content: "";
  display: block;
  height: 12px;
  background: #b08604;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}
#program .colOne .colBox dt {
	float: left;
	width: 43%;
	padding-bottom: 10px;
}
#program .colOne .colBox dd {
	padding: 10px 50px 0 400px;
	box-sizing: border-box;
	min-height: auto !important;
}
#program .colOne .colBox dd.txtBox > .btn02 {
	display: table;
	margin: 30px auto 10px;
}

/*2カラムエリア*/
#program .colTwo {
  display: flex;
  justify-content: space-between;
  padding-top: 38px;
}
#program #pro02 .colTwo {padding-top: 0;}
#program .manabiArea .colTwo {
  padding-top: 0;
}
#program .colBox {
  position: relative;
  width: 470px;
}
#program .colBox::after {
  content: "";
  display: block;
  height: 12px;
  background: #b08604;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

/*3カラムエリア*/
#program .colThree {
  display: flex;
  justify-content: space-between;
	padding-top: 38px;
}
#program .colThree .colBox{
	position: relative;
width:312px;
}

#program .colThree .colBox::after {
  content: "";
  display: block;
  height: 12px;
  background: #b08604;
  -moz-border-radius: 0 0 10px 10px;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}

#pro01 .colThree .colBox dt img{
width:268px;
height:auto;
}

#pro01 .colThree .tagType .txtBox{
margin-bottom:20px;
}

#pro01 .colThree .tagType .comBox{
min-height:120px;
}

#pro01 .colThree .colBox p.imgl{
font-size:1rem;
text-align:center;
line-height:1.3;
padding:70px 6px 8px;
}

#pro01 .colThree .colBox .imgl{
width:48px;
}

#pro01 .colThree .colBox .ballon{
width:160px;
padding:16px 10px;
}

#pro01 .colThree .colBox .ballon p{
font-size:1.3rem;
text-align:left;
line-height:1.6;
word-wrap: break-word;
}

#pro01 .colThree .colBox .ballon p span{
display:block;
padding:0.5rem 0 0;
text-align:right;
}


/*プログラミングってなんだろう？
-------------------------------------------------*/
#pro01 .contWrap {
  padding-left: 430px;
  background: url(../images/programming/pro_bg01.png) no-repeat;
}

/*プログラミングTOP 紹介　共通*/

/*見出し下　サブテキスト*/
#pro01 .subTxt::before {
  display: block;
  content: "";
  position: absolute;
  top: 20px;
  left: 188px;
  width: 35px;
  height: 4px;
  background: #5e4d3f;
  transform: rotate(45deg);
}
#pro01 .subTxt {
  position: relative;
  margin-bottom: 38px;
  color: #5e4d3f;
  font-size: 2.2rem;
  font-weight: bold;
  text-align: center;
}
#pro01 .subTxt::after {
  display: block;
  content: "";
  position: absolute;
  top: 20px;
  right: 188px;
  width: 35px;
  height: 4px;
  background: #5e4d3f;
  transform: rotate(-45deg);
}

/*プログラミングTOP 2カラム・3カラムエリア*/
#pro01 .colBox a {
  display: block;
  padding: 22px;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  background: #eab206;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.02em;
}
#pro01 .colBox dt {
  padding-bottom: 20px;
  text-align: center;
}
#pro01 .colBox .txtBox {
  line-height: 1.7;
  min-height: 140px;
}

/*おすすめ！リボン*/
#pro01 .colBox figure {
  position: absolute;
  top: -35px;
  left: 5px;
}

/*NEWアイコン*/
#pro01 .colBox.new dl{
	position: relative;
}
#pro01 .colBox.new dl::before{
	display: block;
	content: "";
	background: url(/kids/images/programming/pro_ico_new.png) no-repeat;
	width: 108px;
	height: 50px;
	position: absolute;
	top: -10px;
	/*left: -12px; ///3カラム時*/
	left: 43px; /*2カラム時*/
}


/*学んでみよう！プログラミング
-------------------------------------------------*/
#pro01 .manabiArea h2 {
  margin-bottom: 18px;
  padding: 20px 0;
  background-image: url(../images/programming/pro_bg02.png) , url(../images/programming/pro_bg03.png);
  background-repeat: no-repeat;
  background-position: left 50px top , right 50px top;
}

/*やってみよう！プログラミング
-------------------------------------------------*/
#pro01 .txPos::before {
  left: 146px;
}
#pro01 .txPos::after {
  right: 146px;
}

/*対象年齢 エリア*/
#pro01 .colBox .tag {
  position: absolute;
  top: -33px;
  padding: 11px 12px 9px;
  -moz-border-radius: 10px 10px 0 0;
  -webkit-border-radius: 10px 10px 0 0;
  border-radius: 10px 10px 0 0;
  background: #b08604;
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
}

#pro01 .colOne .tagType a,
#pro01 .colTwo .tagType a,
#pro01 .colThree .tagType a{
  -moz-border-radius: 0 10px 0 0;
  -webkit-border-radius: 0 10px 0 0;
  border-radius: 0 10px 0 0;
}
#pro01 .tagType .txtBox {
  min-height: 130px;
}

/*お友だちの声　共通*/
#pro01 .colBox .imgl, 
#pro01 .colBox .ballon p {
  line-height: 1.8;
  margin-bottom: 0;
  color: #333;
  font-size: 1.3rem;
  font-weight: normal;
}

/*お友だちの声　左側*/
#pro01 .colBox .imgl {
  float: left;
  width: 87px;
  padding: 65px 7px 3px;
  background: url(../images/programming/pro_bg04.png) no-repeat center top 10px #fff;
}
/*お友だちの声　右側ふきだしエリア*/
#pro01 .colBox .ballon:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -10px;
  border: 10px solid transparent;
  border-right: 15px solid #fff;
}
#pro01 .colBox .ballon {
  position: relative;
  float: right;
  width: 281px;
  min-height: 64px;
  padding: 22px 9px 7px 12px;
  background: #fff;
}
#pro01 .colBox .ballon span {
  padding-left: 26px;
}

/*調べてみよう！プログラミング
-------------------------------------------------*/
.programming_panel a:hover {
  background: #ea8a06;
  color: #fff;
}
.programming_panel ul li.scratch_panel a:hover {
  background: #ea8a06;
}



/* ------------------------------------------------------------------
 学んでみよう！プログラミング　中ページ　(190227追記)
------------------------------------------------------------------ */


/*QUREO,マイクラッチページ共通レイアウト
-------------------------------------------------*/
#pro02 .colBox dt {
  padding: 24px 0 18px;
  border-radius: 10px 10px 0 0;
  background-image: -webkit-linear-gradient(-45deg, #D6A206 25%, #DCA706 25%, #DCA706 50%, #D6A206 50%, #D6A206 75%, #DCA706 75%, #DCA706);
  background-image: -ms-linear-gradient(-45deg, #D6A206 25%, #DCA706 25%, #DCA706 50%, #D6A206 50%, #D6A206 75%, #DCA706 75%, #DCA706);
  background-size: 70px 70px;
  text-align: center;
  color: #fff;
  font-size: 2.2rem;
  font-weight: bold;
}
#pro02 .colBox dd {
  padding: 25px;
  background: #fff;
  box-sizing: border-box;
}
#pro02 .colBox dd .imgArea{
  min-height: 231px;
  margin-bottom: 10px;
  text-align: center;
}
#pro02 .colBox dd .imgArea a {
  display: inline-block;
  width: 360px;
  height: 205px;
  margin: 0 auto;
  border-radius: 10px;
  text-align: center;
  overflow: hidden;
}
#pro02 .colBox dd .imgArea a:hover {
  opacity: 0.8;
}
#pro02 .colBox dd .imgArea video {
  width: 100%;
}
#pro02 .colBox dd .imgArea figure {
  text-align: center;
}
#pro02 .colBox dd p {
  margin: 0;
  color: #5e4d3f;
  font-size: 1.6rem; 
  line-height: 1.8;
}
#pro02 .colBox dd p.mt15 {
  margin-top: 15px;
}

#pro02 figcaption {
  font-size: 1.4rem;
}


/* ------------------------------------------------------------------
 QUREOページ制作　(190220追記)
------------------------------------------------------------------ */
.programming_body .mainImg.manabiPro01 {
  background: #2f6bb0 url(/kids/images/programming/qureo/qureo_mv01.png) no-repeat center center;
}
.programming_body .mainImg.manabiPro01.micratch {
  background: #14824D url(/kids/images/programming/micratch/micratch_mv01.png) no-repeat center center;
}




/*FMVまなびナビのQUREOコースで学んでみよう！
-------------------------------------------------*/

/*FMVまなびナビとは*/
#pro02 .manabiWrap {
  padding: 0 0 4px 430px;
  background: url(../images/programming/qureo/qureo_im03.png) no-repeat;
}
#pro02 .manabiWrap02 {
  padding: 0 0 4px 430px;
  background: url(../images/programming/micratch/micratch_im05.png) no-repeat;
}
#pro02 .btn01 {
  padding-top: 33px;
}





/* QUREOのおすすめポイント！
-------------------------------------------------*/
#pro02 ol.point{
  padding: 0 30px;
}
#pro02 ol.point li{
  display: flex;
  justify-content: space-between;
}
#pro02 ol.point li.mb40{
  margin-bottom: 40px;
}
#pro02 ol.point li.capType {
  padding-bottom: 42px;
}
#pro02 ol.point li.capType figcaption {
  padding-top: 7px;
  text-align: center;
}
#pro02 ol.point li .leftImg {
  position: relative;
  width: 313px;
  height: 185px;
  border: 1px solid #d6d6d6;
  border-radius: 10px;
  /*overflow: hidden;*/
}
#pro02 ol.point li .ofh {
  overflow: hidden;
}
#pro02 ol.point li .leftImg figure a{
  display: block;
}
#pro02 ol.point li .leftImg figure a:hover{
  opacity: 0.8;
}
#pro02 ol.point li .leftImg video{
  width: 100%;
}
#pro02 ol.point li .leftImg > p{
  position: absolute;
  right: 5px;
  bottom: 5px;
  margin: 0;
}
#pro02 ol.point li .leftImg > p a{
  display: block;
}
#pro02 ol.point li .leftImg > p a .btn01{
  padding: 0;
}
#pro02 ol.point li > dl{
  width: 59%;
}
#pro02 ol.point li > dl dt{
  margin-bottom: 15px;
  color: #ea7006;
  font-size: 2.2rem;
  font-weight: bold;
}
#pro02 ol.point li > dl dt span{
  margin-right: 15px;
}
#pro02 ol.point li > dl dd{
  line-height: 1.8;
  color: #5e4d3f;
  font-size: 1.6rem;
}


/* FMVまなびナビ　プログラミング・QUREOコースでできること
-------------------------------------------------*/
#pro02 .wtBox.mt40{
  margin-top: 40px;
  padding-bottom: 75px;
}
#pro02 .subSection .subTxt{
  margin: 20px 0 5px;
  text-align: center;
  font-size: 1.6rem;
  color: #5e4d3f;
}
#pro02 .subSection .inner{
  padding: 0 40px;
}
#pro02 .subSection .canFourBox{
  position: relative;
  padding: 18px 35px;
  border: 2px solid #f0d565;
  border-radius: 10px;
  background: #fffdf5;
}
#pro02 .subSection .canFourBox::after{
  position: absolute;
  left: 48%;
  bottom: -25px;
  content: "";
  display: inline-block;
  width: 34px;
  height: 25px;
  background: url(/kids/images/programming/qureo/qureo_ic03.png) no-repeat;
}
#pro02 .subSection .canFourBox li{
  min-height: 140px;
  padding: 15px 0 0 175px;
}
#pro02 .subSection .canFourBox li.no01{
  border-bottom: 1px dashed #dcdcdc;
  background: url(/kids/images/programming/qureo/qureo_ic04.png) no-repeat;
}
#pro02 .subSection .canFourBox li.no01.micratch{
  background: url(/kids/images/programming/micratch/micratch_ic01.png) no-repeat;
}
#pro02 .subSection .canFourBox li.no02{
  margin-top: 15px;
  border-bottom: 1px dashed #dcdcdc;
  background: url(/kids/images/programming/qureo/qureo_ic05.png) no-repeat;
}
#pro02 .subSection .canFourBox li.no03{
  margin-top: 15px;
  border-bottom: 1px dashed #dcdcdc;
  background: url(/kids/images/programming/qureo/qureo_ic06.png) no-repeat;
}
#pro02 .subSection .canFourBox li.no04{
  min-height: 125px;
  margin-top: 15px;
  background: url(/kids/images/programming/qureo/qureo_ic07.png) no-repeat;
}
#pro02 .subSection .canFourBox li dt{
  margin-bottom: 7px;
  font-weight: bold;
  font-size: 2rem;
  color: #733b0a;
}
#pro02 .subSection .canFourBox li dd{
  line-height: 1.8;
  font-size: 1.6rem;
  color: #5e4d3f;
}
#pro02 .subSection .yellowBox{
  position: relative;
  margin-top: 50px;
  padding: 20px 60px;
  border: 2px solid #f0d565;
  border-radius: 10px;
  background: #fffdf5;
}
#pro02 .subSection .yellowBox p{
  margin: 0;
}
#pro02 .subSection .yellowBox .rightIcon{
  position: absolute;
  top: -34%;
  right: 65px;
}
#pro02 .subSection .orangeBtn{
  margin-top: 40px;
  text-align: center;
}
#pro02 .subSection .orangeBtn p a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 345px;
  height: 73px;
  margin: 0;
  background: url(/kids/images/programming/qureo/qureo_bt02.png) no-repeat top left;
  color: #fff;
  font-weight: bold;
  font-size: 2rem;
}
#pro02 .subSection .orangeBtn p a span{
  margin-top: -1px;
}
#pro02 .subSection .orangeBtn a:hover{
  opacity: 0.8;
}
#pro02 .subSection .yellowBnr{
  position: relative;
  margin-top: 70px;
}
#pro02 .subSection .yellowBnr figure img{
  width: 100%;
  height: auto;
}
#pro02 .subSection .yellowBnr > p{
  position: absolute;
  left: 220px;
  bottom: 20px;
}
#pro02 .subSection .yellowBnr > p a{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 411px;
  height: 89px;
  margin: 0;
  background: url(/kids/images/programming/qureo/qureo_bt03.png) no-repeat top left;
  color: #fff;
  font-weight: bold;
  font-size: 3rem;
}
#pro02 .subSection .yellowBnr > p a:hover{
  opacity: 0.8;
}
#pro02 .subSection .yellowBnr > p a span{
  margin-top: -3px;
}


/* マイクラッチコース
-------------------------------------------------*/
#pro02 .subSection .minSection{
  margin-top: 50px;
  padding: 0;
}
#pro02 .subSection .minSection h4{
  display: inline-block;
  margin: 0 0 25px;
  padding: 10px 15px 8px;
  background: #fff5cd;
  color: #733b0a;
  font-size: 1.8rem;
}
#pro02 .subSection .minSection > ol{
  margin: 0;
}
/*#pro02 .subSection .minSection > ol li{
  display: flex;
}*/
#pro02 .subSection .minSection > ol li.mb30{
  margin-bottom: 30px;
}
#pro02 .subSection .minSection > ol li::before {
  position: absolute;
  top: 4px;
  left: 0;
  font-size: 1.6rem;
}
#pro02 .subSection .minSection > ol li {
  position: relative;
  padding-left: 38px;
}
#pro02 .subSection .minSection > ol li.no01::before {
  content: "[1]";
}
#pro02 .subSection .minSection > ol li.no02::before {
  content: "[2]";
}
#pro02 .subSection .minSection > ol li p{
  margin: 0;
  font-size: 1.6rem;
  color: #5e4d3f;
}
#pro02 .subSection .minSection > ol li p.smlTxt {
  font-size: 1.2rem;
}


/* プログラミングトップ戻るボタン
-------------------------------------------------*/
.kids_page .maincontents .backBtn{
  margin: 0;
  text-align: center;
}
.kids_page .maincontents .backBtn a{
  display: inline-block;
  padding: 20px 50px 17px;
  border: 3px solid #ea9f06;
  color: #ea9f06;
  font-weight: bold;
}
.kids_page .maincontents .backBtn a:hover{
  background: #ea9f06;
  color: #fff;
}