@charset "utf-8";

/*------------------------------------------------------------------

	めざせ！タイピングマスター（/kids/typing/）用 CSS

------------------------------------------------------------------*/

/* 冒頭文 */
.commonreading_body section.typing_top	{
	display: block;
	background: #D8F5FF;
	padding: 40px;
	margin-bottom: 80px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.1);
	max-height: 100%;
}
.kids_page .maincontents section.typing_top p	{ font-size: 180%; font-size: 1.8rem; }
section.typing_top img	{ width:190px; height:auto; float:left; margin-bottom:0; margin-right: 1em; }


/* @group おすすめタイピング */
#sp_typing {
	display: block;
	overflow: hidden;
	background: #fff;
	padding: 70px 40px 80px;
	margin-bottom: 80px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 0px 4px 5px 0px rgba(0,0,0,0.1);
	max-height: 100%;
}

#sp_contents { width: 80%; text-align:center; }
#sp_typing .right_wrap { text-align:left; }
#sp_typing #rec_update	{ text-align: right; width: 100%; }
#sp_typing #sp_pic { margin-bottom: 1em; }


.kids_page .maincontents section div#sp_typing h3 {
	background-color: #e7ddc3;
	font-size:120%;
	font-size: 2.0rem;
	font-weight: bold;
	padding: 1em 40px;
	margin-bottom: 1em;
    text-align:center;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}

#sp_typing .practice { margin: 0 auto; display: inline-block; }
#sp_typing .practice a {
	width: 156px;
    height:100% !important;
	display: inline-block;
	color: #fff;
	font-size: 16px;
	line-height: 36px;
    min-height:36px;
	font-weight: bold;
	text-decoration: none;
	background: url(/kids/typing/images/home/sp_btn.png) no-repeat;
	padding-left: 26px;
    box-shadow: 2px 2px 2px #969696;
    -webkit-box-shadow: 2px 2px 2px #dddddd;
}
#sp_typing .practice a.roma	{ float: left; margin-right: 15px; }
#sp_typing .practice a.roma:hover { background-position: 0px -35px; color:#DD6E01; }
#sp_typing .practice a.kana { float: left; background-position: -182px 0; }
#sp_typing .practice a.kana:hover { background-position: -182px -35px; color:#417801; }



/* =Clearfix --------------------------------*/
#sp_contents {
	/zoom: 1;
    margin:0 auto;
}
#sp_contents:after,
#basic:after,
#capable:after{
	display: block;
	clear : both;
	content: '';
}
#sp_typing .right_wrap:after {
	content: '';
	display: block;
	clear : both;
}

#sp_contents:after{
	content: '';
	display: block;
	clear : both;
}
#sp_typing:after{
	content: '';
	display: block;
	clear : both;
}
#basic:after{
	content: '';
	display: block;
	clear : both;
}
#capable:after{
	content: '';
	display: block;
	clear : both;
}
#sp_typing .practice:after{
	content: '';
	display: block;
	clear : both;
}
#theme_exp:after,
#rec_update:after{
	content: '';
	display: block;
	clear : both;
}
/* End of Clearfix --------------------------------*/


/* @group 基本コース */

#basic,
#capable {
	display: block;
	background: #fff url(/kids/typing/images/home/bg_kb.png) no-repeat right top;
}

#basic h3 {
    font-size: 200%;
    font-size: 2.0rem;
}

#basic .roma {
	display: block;
	padding: 45px 0 0;
	margin: 0 0 40px;
	background:#fff1d9;
	z-index:0;
     position:relative; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
	border:solid 1px #fff1d9;
}
#basic .roma h3 {
	padding: 40px 0 0 1em;
	color: #FF7500;
	display: block;
	width: 95%;
    /*min-height:48px;*/
	z-index:1;
    position:absolute; top:-11px; 
	background: url(/kids/typing/images/home/rogo_roma.png) no-repeat right top;
}

#basic .roma h4 {
	display: block;
    height:100% !important;
	margin-top: 3em;
	min-height:38px;
	background:url(/kids/typing/images/home/h4_roma1.png)  no-repeat 15px top;
}

#basic .roma strong{
 	display: block;
	margin: 0 20px 10px 72px;
	padding: 7px 10px 6px;
	background: #FFA200 -7px -35px !important;
	color:#ffffff;
	font-size:190%;
	font-size:1.9rem;
	height:100% !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
}
#basic .roma p,
#basic .kana p{
      margin:0 1.5em 0.5em 4.5em;
} 

#basic .kana {
	display: block;
	padding: 45px 0 0;
	margin: 0 0 40px;
	background:#e9f8d1;
	z-index:0;
    position:relative; 
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
	border:solid 1px #e9f8d1;
}
#basic .kana h3 {
	padding: 40px 0 0 1em;
	color: #49C100;
	display: block;
	width: 95%;
    /*min-height:48px;*/
	z-index:1;
    position:absolute; top:-11px; 
	background:url(/kids/typing/images/home/rogo_kana.png) no-repeat right top;
}
#basic .kana h4 {
	display: block;
    height:100% !important;
	margin-top: 3em;
	min-height: 38px;
	background:url(/kids/typing/images/home/h4_kana1.png)  no-repeat 15px top;
}
#basic .kana strong{
 	display: block;
	margin: 0 20px 10px 72px;
	padding: 7px 10px 6px;
    background:#73CB00 -7px -35px !important;
     color:#ffffff;
	font-size:190%;
	font-size:1.9rem;
	height:100% !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
}

#basic .practice ul,
#basic .practice ul.col2{
	display: block;
	margin:0 auto 1em 6.5em;
	padding: 0 0 6px;
	list-style-type: none;

}
#basic li {
	width: 120px;
	height: 36px;
      float:left;
	margin:5px;
	padding: 0;
}
#basic .col2 li{
	width: 190px;
      float:left;
	margin:5px 0;
}

#basic li a {
	width: 95px;
	display: block;
	padding-left: 25px !important;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 36px;
	text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
	background:-ms-linear-gradient(top, #201969, #124C96); 
	background: -moz-linear-gradient(top, #201969, #124C96);
	background: -o-linear-gradient(top, #201969, #124C96);
	box-shadow: 2px 2px 2px #969696;
	-webkit-box-shadow: 2px 2px 2px #dddddd;

}
#basic .col2 li a{
	width: 155px;
	color: #fff;
	background: url(/kids/typing/images/home/basic_btn1.png) no-repeat;
}
#basic .roma li a {
	
}
#basic .roma li a:hover {
	background-position: 0 -36px;
      color:#DD6E01;
}

#basic .kana li a {
	background-position: -140px 0;
}
#basic .kana .col2 li a {
	background-position: -200px 0;
}
#basic .kana li a:hover {
	background-position: -140px -36px;
      color:#417801;
}
#basic .kana .col2 li a:hover {
	background-position: -200px -36px;
      color:#417801;
}

#basic .roma:after,
#basic .kana:after,
#basic .roma ul:after,
#basic .kana ul:after{
	content: '';
	display: block;
	clear :left;
}
/* @end */



/* @group 実力アップコース */

#capable .practice	{}

#capable .practice p.LevelBlock	{
	display: inline-block;
	padding: 0 0.5em;
	margin: 0;
	font-weight:bold;
	border-top: solid 2px #d0f2ff;
	border-right: solid 2px #d0f2ff;
	border-left: solid 2px #d0f2ff;
    -moz-border-radius: 4px 4px 0px 0px;
    -webkit-border-radius: 4px 4px 0px 0px;
	border-radius:4px 4px 0px 0px;
	background: none;
}
#capable .practice p.LevelBlock span	{ display: block; width: 10em; margin: 0; padding: 0; }

#capable .practice div.level_inner	{
	clear:both;
	overflow: hidden;
	padding: 10px;
	margin: 0 0 40px;
	background-color: #d0f2ff;
    -moz-border-radius: 0px 4px 4px 4px;
    -webkit-border-radius: 0px 4px 4px 4px;
	border-radius: 0px 4px 4px 4px;
}

#capable .practice #level1 p.LevelBlock span	{
      background: url(/kids/typing/images/common/level1.png) no-repeat right 0.1em;
}
#capable .practice #level2 p.LevelBlock span{
      background: url(/kids/typing/images/common/level2.png) no-repeat right 0.1em;
}
#capable .practice #level3 p.LevelBlock span{
      background: url(/kids/typing/images/common/level3.png) no-repeat right 0.1em;
}

#capable .practice .level2,
#capable .practice .level3{
      min-height:220px;
      padding-bottom:1.2em;
}
#capable .practice div.level_inner h3 {
	display:inline-block;
	margin: 0 1em 0 0;
	padding: 0;
	font-size: 200%;
	font-size: 2.0rem;
	color: #00a3df;
    float:left;
}

#capable .practice div.level_inner p	{ line-height: 1.5!important; } 
#capable .practice div.level_inner p:after	{
	content: '';
	display: block;
	clear :left;
}

#capable .practice h4{
	display: block;
    height:100% !important;
    float:left;
	min-height: 38px;
    width:160px;
    margin:0;
    padding:0;
	z-index:1;
    position:relative;
}

#capable .practice h4.roma {
	background:url(/kids/typing/images/home/h4_roma1.png)  no-repeat 5px top;
}

#capable .practice .note,
#capable .practice .ten{
      width:200px;
}


#capable .practice h4.roma strong{
 	display: block;
	height:auto;
	margin:0px 0px 10px 65px;
	padding:7px 0 0 10px;
	background:#FF9800;
	position:absolute; top:0px;
	position:absolute;left:0px; 
	border:solid 1px #FF9800;
	color:#ffffff;
	font-size:1.2em;
	width:80px;
	min-height: 27px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius: 5px;
}

#capable .practice h4.kana {
	background:url(/kids/typing/images/home/h4_kana1.png)  no-repeat 5px top;
}
#capable .practice h4.kana strong{
 	display: block;
	height:auto;
    margin:0px 0px 10px 65px;
    padding:7px 0 0 10px;
    background:#67C500;
    position:absolute; top:0px;
    position:absolute;left:0px; 
	border:solid 1px #67C500;
    color:#ffffff;
    font-size:1.2em;
    width:50px;
	min-height: 27px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
}
#capable .practice .note strong,
#capable .practice .ten strong{
      width:100px !important;
}


#capable .practice .roma_b,
#capable .practice .kana_b	{
	/*float:left;*/
	/*width:320px;*/
	margin:auto 0 1em ;
	padding:0;
	height:auto;
	list-style:none;
}

#capable .practice .roma_b:after,
#capable .practice .kana_b:after	{
	content: '';
	display: block;
	clear: left;
}

#capable .practice .roma_b li{
 	display:block;
	z-index:1;
	position:relative;
	width:auto;
	background:#FFAA00 url(/kids/typing/images/common/or.png) no-repeat 5px center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}
#capable .practice .roma_b li a:hover{
	display:block;
	width:auto;
	color:#DD6E01;
	background:#FFDD00 url(/kids/typing/images/common/or.png) no-repeat 5px center !important;
	position:relative; left:-20px;
	padding-left: 20px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}
#capable .practice .kana_b li{
	display:block;
	z-index:1;
	width:auto;
	background:#65D700 url(/kids/typing/images/common/gr.png) no-repeat 5px center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}
#capable .practice .kana_b li a:hover{
	display:block;
	background:#77FF00 url(/kids/typing/images/common/gr.png) no-repeat 5px center !important;
	color:#417801;
	position:relative; left:-20px;
	padding-left: 20px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}
#capable .practice #level1 li{
	display:block;
	z-index:1;
	position:relative;
	width:50px;
	float:left;
	height:auto;
	margin:0 0.5em auto;
	font-size:16px;
	font-weight: bold;
	line-height: 33px;
	padding-left: 20px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
	box-shadow: 1px 1px 1px #969696;
	-webkit-box-shadow: 1px 1px 1px #dddddd;
	-pie-box-shadow: 1px 1px 1px #dddddd;  
}

#capable .practice #level1 li a{
 	display:block;
	width: 50px;
	height: 33px;
	text-decoration: none;
	color:#ffffff;
	position:relative;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
}

#capable .practice #level1 li a:hover{
 	display:block;
	width: 50px;
	height: 33px;
	text-decoration: none !important;
	background:#77FF00;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
	border-radius:5px;
}
#capable .practice #level2 li,
#capable .practice #level3 li	{
	display:block;
	z-index:1;
	position:relative;
	width:125px;
	float:left;
	height:auto;
	margin:0 0.5em 0.5em;
	font-size:16px;
	font-weight: bold;
	line-height: 33px;
	padding-left: 16px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
	box-shadow: 2px 2px 2px #969696;
	-webkit-box-shadow: 2px 2px 2px #dddddd;
}


#capable .practice #level2 li a,
#capable .practice #level3 li a	{
	display:block;
	width:125px;
	height: 33px;
	text-decoration: none;
	color:#ffffff;
	position:relative; left:-16px;
	padding-left: 16px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}

#capable .practice #level2 li a:hover,
#capable .practice #level3 li a:hover	{
	display:block;
	width:125px;
	height: 33px;
	text-decoration: none;
	position:relative; left:-16px;
	padding-left: 16px !important;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius:5px;
}
*{zoom:1;}