@charset :"utf-8";
/* CSS Document */

/* 全体(デスクトップPCとスマホ)に適用するCSS */
#wrapper {
width:80%;
margin:0 auto;	/* 左右に[auto]を指定することで、真ん中に寄る */
padding: 0 ;	/* 上下左右の余白を0にしておく */
top:0;
}


/* スマホだけに適用するCSS */
@media screen and ( max-width:420px )
{
body{
	width:100%;
	margin:0 auto;
	line-height:1.4;
	font-family:"メイリオ","Meiryo";
	counter-reset: titleNum;
	font-size:100%;
}

#wrapper {
margin:0 auto;
width:90%;
padding:0 5px;		/* 左右の余白 */
}

/* 画像の最大幅を指定する */
img {
max-width: 100% ;		/* 横幅の90% */
height: auto ;			/* 縦幅を自動調整 */
}
h1 img{
display:none;
}

h1{
background-image:url(../gra/sp_penhikari.gif) ;
background-repeat:no-repeat;
width:380px;
height:120px;
margin:0;
}

#header img{
display:none;
}

#header {
background-image:url(../gra/sp_penshu.gif) ;
background-repeat:no-repeat;
width:380px;
height:120px;
margin:0;
}

}


body{
	width:100%;
	top:0;
	margin:0 auto;
	line-height:1.4;
	font-weight:100px;
	font-family:"メイリオ","Meiryo";
	counter-reset: titleNum;
	font-size:100%;
}


h1{
margin:0 auto;
top:0;
padding:0;
}

h1 img{
width:100%;
min-width:640px;
max-width:1024px;
margin-bottom:45px;
}


h2{
margin:35px auto;
background-image:url(../gra/haikei.jpg);
background-repeat:repeat-x;
width:100%;
padding-left:15px;
line-height:2;
box-sizing: border-box;
-moz-box-sizing: border-box;// Firefox向け
-webkit-box-sizing: border-box;// Google Chrome、Safari向け
-ms-box-sizing: border-box;//Internet Explorer向け
}

h3{
line-height:1.5;
border-bottom: 3px solid #5F8AB6;
width:90%;
margin:40px auto 26px 0;
counter-increment: titleNum;
position: relative;
padding: 0 0 .3em 2em;
}
h3:before{
position: absolute;
	content: counter(titleNum)".";
	color:#2F5E91;
	font-size:120%;
	text-align:left;
	top: 0;
	left: 0;
}


.pic{
	text-align:center;
	margin:40px auto 20px 0;
	display: inline-block;
	left: 0px;
	width:100%;
	max-width:750px;
	min-width:320px;
}

.midashi02 {
line-height:1.2;
border-bottom: 3px solid #3366FF; 
}

.midashi03 {
background-color: #FFCC00;
border-radius:10px;
border-bottom: 2px solid #FFCC00;
}

.midashi04 {
background-color: #33CCCC;
border-radius:10px;
border-bottom: 2px solid #33CCCC;
}


.kisomanabi dt{
font-weight:bold;
color:#2759AB;
}


.kiso {
border-bottom:#f9d96a;
border-bottom-width:medium;
border-radius:10px;
}

.action {
margin:0 auto;
padding:30px;
}

h4{
width:80%;
font-size:+1;
margin:40px auto 26px 0;
border-bottom:solid 3px #66CCCC;
}

#footer {
background-color: #336699;
width:100%;
padding: 20px 50px;
overflow:hidden;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
}

.footbox{
color:#FFFFFF;
width:100%;
margin:0 auto;
padding:20px;
float:left;
background-color:#336699;
}