@charset "UTF-8";
/* CSS Document */
.wrapper{margin-top:30px;}
#blockarea ul{float:left;}
#blockarea li{list-style:none;}
#blockarea li img{
line-height:0;}
.box2 p{
text-align:left;
background-color:#edede6;
margin:6px 7px;
padding:14px 23px;
line-height:1.5;}
.box2 p img{margin-bottom:5px;}
#blockarea li.box1 h5{
text-align:left;
font-size:13px;
font-weight:bold;
line-height:1.4;
margin:0px 0px 0px 15px;}
#blockarea li.box3 h5{
text-align:left;
font-size:12px;
font-weight:bold;
line-height:1.5;
margin:12px 0px 0px 15px;}
#blockarea li.box1 p,#blockarea li.box3 p{
text-align:left;
font-size:10px;
padding:0px 0px 0px 15px;}
@media screen and (min-width: 812px){
.wrapper{
position:relative;}
#side{
position:absolute;
right:0;}
#blockarea{
float:left;
padding-right:200px;}
.box2 iframe{
margin-top:5px;}
#blockarea li.topimage{
	float:left;
	width:595px;
	height:394px;
margin:0px 7px 6px 0px;}
#blockarea li.box1,#blockarea li.box3{
width:194px;
height:194px;
float:left;
display:block;
background-image:url(box_back.png);
background-position:left top;
background-repeat:no-repeat;
margin:0px 7px 6px 0px;}
#blockarea li.box1 img{
margin:6px 7px;}
#blockarea li.box3 img{
margin:3px 7px;}
#blockarea li.box2{
width:394px;
height:194px;
float:left;
background-image:url(../img/box_back2.png);
background-position:left top;
background-repeat:no-repeat;
margin:0px 7px 6px 0px;}
}
@media screen and (max-width: 811px){
.wrapper{
text-align:center;}
#blockarea{
width:610px;
margin:0 auto;
padding:0;}
#blockarea ul{
float:none;}
.box2 iframe{
margin-top:5px;
width:95%;
height:95%;}
#blockarea li.topimage{
	float:left;
	width:595px;
margin:0px 7px 6px 0px;}
#blockarea li.box1,#blockarea li.box3{
width:194px;
height:194px;
float:left;
display:block;
background-image:url(box_back.png);
background-position:left top;
background-repeat:no-repeat;
margin:0px 7px 6px 0px;}
#blockarea li.box1 img{
margin:6px 7px;}
#blockarea li.box3 img{
margin:3px 7px;}
#blockarea li.box2{
width:394px;
height:194px;
float:left;
background-image:url(../img/box_back2.png);
background-position:left top;
background-repeat:no-repeat;
margin:0px 7px 6px 0px;}
}
@media screen and (max-width: 640px){
.wrapper{
text-align:center;}
#blockarea{
width:95%;
margin:0 auto;
padding:0;}
.box2 iframe{
margin:0px 0px 0px 0px;
width:95%;
height:95%;}
#blockarea li.topimage{
width:100%;}
.topimage img{
width:100%;}
#blockarea li.box1{
float:left;
width:47%;
height:auto;
margin:6px 7px 6px 0px;
background-image:none;
background-color:#ffffff;
border:1px solid #e2e2e2;}
#blockarea li.box1 img{
width:100%;
margin:0px 0px 0px 0px;}
#blockarea li.box2{
background:#ffffff;
border:1px solid #e2e2e2;
width:100%;
height:auto;
float:left;
margin:0;
padding:0;}
.box2 p{
margin:0;
padding:10px;}

#blockarea li.box3{
float:left;
width:47%;
height:auto;
margin:6px 3px 6px 0px;
background-image:none;
background-color:#ffffff;
border:1px solid #e2e2e2;}
#blockarea li.box3 img{
width:100%;
margin:0px 0px 0px 0px;}
#side{
position:relative;
width:100%;
clear:both;}
}