@charset "utf-8";

/* ========================================================================
    kill browser default
    base style
------------------------------------------------------------------------ */

/* ========================================================================
    kill browser default
------------------------------------------------------------------------ */
html, body,
div, p, h1, h2, h3, h4, h5, h6, address, blockquote, pre,
ul, ol, li, dl, dt, dd,
table, caption, col, colgroup, thead, tbody, tfoot, tr, th, td,
form, fieldset, legend, label,
img, iframe, object,
span, a, em, strong, sub, sup, del, ins{
margin:0;
padding:0;
}

ul, ol{
list-style:none;
}

h1, h2, h3, h4, h5, h6{
font-size:1em;
}

table{
border-spacing:0;
border:0 none;
}

caption, th, td{
border:0 none;
vertical-align:top;
font-size:1em;
text-align:left;
}

h1, h2, h3, h4, h5, h6,
dt, th, strong{
font-weight:normal;
}

address, em{
font-style:normal;
}

img{
border:0 none;
vertical-align:top;
}

hr{
display:none;
}


/* ========================================================================
    base style
------------------------------------------------------------------------ */
body{
line-height:1.5;
color:#000;
text-align:center;
font-family:"ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", sans-serif;
}


div#str_container{
margin:0 auto;
text-align:left;
background:#f4f8d4;
}

div#str_header{
background:url("../images/bg_header.gif") no-repeat center top;
width:900px;
height:47px;
margin:0 auto;
position:relative;
}

div#str_header h1{
position:absolute;
top:20px;
left:50px;
}

div#str_header p{
position:absolute;
top:0;
right:145px;
}

div#str_header p.btn{
top:0;
right:6px;
background:url("../images/img_boogieboard_01.gif") 20px top no-repeat;
padding-top:21px;
}

div#str_header p.weibo{
top:0;
left:-250px;
padding-top:21px;
}
div#str_contents{
background:url("../images/bg_container.gif") repeat-y center top;
width:900px;
margin:0 auto;
}

div.mc-flash-loader{
_padding-left:15px;
}

div#main{
width:780px;
margin:0 60px 45px;
padding-top:20px;
}

div.menu{
background:url("../images/bg_menu.gif") no-repeat center top;
width:704px;
40px;
margin:0 auto;
padding:10px 38px 12px 18px;
}

div.menu ul{
width:715px;
margin-bottom:30px;
}

div.menu ul li{
float:left;
margin-right:11px;
list-style:none;
}

p.image{
width:780px;
margin:0 auto;
padding-bottom:30px;
}

p.image a.bnr-color{
margin-right:12px;
}

h2.hdg02-01{
background:#aece00;
width:744px;
margin:0 0 15px 70px;
padding:6px 0 7px 16px
}

h2.hdg02-02,
h2.hdg02-04{
background:#e4f299;
width:744px;
margin:0 0 15px 70px;
padding:6px 0 7px 16px
}
h2.hdg02-04{
background:#00bce4;
}
div#main h2.hdg02-02,
div#main h2.hdg02-04{
margin-left:0;
}

div#main h2.hdg02-03{
margin-bottom:15px;
}

div.imageLayout{
width:350px;
margin-bottom:10px;
}

div.imageLayout p{
float:left;
width:150px;
text-align:center;
}

div.imageLayout ul{
float:right;
width:185px;
}

div.imageLayout ul li{
padding-bottom:9px;
font-size:0;
line-height:1;
}

.imageL{
float:left;
width:350px;
}

.imageR{
float:right;
width:350px;
}

.accessary{
width:730px;
/* margin:0 15px 30px; */
margin:0 15px;
padding-bottom:30px;
}

table.tbl_summary{
margin:0 auto;
}
#main table.tbl_summary{
margin:0;
}

table.tbl_summary tbody td{
padding:9px 15px;
color:#666666;
font-size:13px;
background:#f9f9f9;
border-top:1px solid #cccccc;
}

table.tbl_summary tbody td{
border-left:solid 1px #cccccc;
text-align:center;
}

table.tbl_summary tbody td span{
font-size:90%;
}

table.tbl_summary tbody td:first-child{
border-left:none;
text-align:left;
}

table.tbl_accessary-01 tbody td,
table.tbl_accessary-02 tbody td{
padding:9px 15px;
color:#666666;
font-size:75%;
background:#f9f9f9;
border-top:1px solid #cccccc;
}

table.tbl_summary tbody tr.even td,
table.tbl_accessary-01 tbody tr.even td,
table.tbl_accessary-02 tbody tr.even td{
background:#ffffff;
border-top:1px solid #cccccc;
}

table.tbl_summary tbody tr.last-child td,
table.tbl_accessary-01 tbody tr.last-child td,
table.tbl_accessary-02 tbody tr.last-child td{
border-bottom:1px solid #cccccc;
}

p.notice{
color:#666666;
font-size:65%;
width:730px;
margin:0 auto;
padding-top:15px;
}
#main p.notice{
margin:0 0 30px;
}

p.link{
font-size:72.5%;
padding:10px 0 0 0;
text-align:right;
width:730px;
margin:0 auto;
}

div#str_footer p#copy{
width:800px;
border-top:1px solid #666666;
margin-top:20px;
text-align:center;
font-size:62.5%;
color:#666666;
padding:11px 0 55px 0;
}

div#str_footer{
margin:0 auto;
width:800px;
}


/* ========================================================================
    module style
------------------------------------------------------------------------ */
/*    ul.index_btnList
---------------------------------------- */
ul.index_btnList{
margin-right:-27px;
width:807px;
}
ul.index_btnList li{
float:left;
margin-right:27px;
}


/*    .bb3_btnList
---------------------------------------- */
.bb3_box{
width:780px;
margin:0 auto 20px;
position:relative;
background:url("../images/bb3_img03_bg02.gif") no-repeat bottom;
}
.bb3_box .inner{
padding:10px;
background:url("../images/bb3_img03_bg01.gif") no-repeat top;
}
.bb3_box .inner .linkbtn{
margin-top:-65px;
padding-bottom:10px;
}
.bb3_box .inner p{
font-size: 75%;
}


/*    div.heading
---------------------------------------- */
div.heading{
position:relative;
background:url("../images/bg_heading.gif") left top no-repeat;
padding:0 60px;
height:130px;
}
div.heading h1{
position:absolute;
top:19px;
left:60px;
}
div.heading ul{
position:absolute;
top:42px;
right:60px;
background:url("../images/tab_bg.gif") left bottom repeat-x;
padding-left:16px;
}
div.heading li{
float:left;
margin-right:7px;
}
div.heading ul.social{
top:122px;
background:none;
padding-left:0;
}
div.heading ul.social li{
margin-right:3px;
}

/*    div.column2_01
---------------------------------------- */
div.column2_01{
margin:0 15px 20px;
width:730px;
}
div.column2_01 .col01{
float:left;
width:350px;
}
div.column2_01 .col02{
float:right;
width:350px;
}

/*    ul.pageNav
---------------------------------------- */
ul.pageNav{
padding-top:30px;
font-size:75%;
line-height:1.1;
text-align:center;
color:#666;
}
ul.pageNav li{
display:inline-block;
*display:inline;
border-right:1px solid #666;
margin-right:10px;
padding-right:10px;
}
ul.pageNav li.last{
border-right:0 none;
margin-right:0;
padding-right:0;
}


/*    adjust
---------------------------------------- */
.align-r{text-align:right !important;}
.mb10{margin-bottom:10px !important;}
.mb30{margin-bottom:30px !important;}
.mr35{margin-right:35px !important;}


/* ========================================================================
    font and link
-----------------------------------------------------------------------
#bb4 a:link{color:#167dcb;text-decoration:underline;}
#bb4 a:visited{color:#6c8293;text-decoration:underline;}
#bb4 a:hover,
#bb4 a:active,
#bb4 a:focus{color:#00b69a;text-decoration:underline;}
 */

/* ========================================================================
    clear
------------------------------------------------------------------------ */
div.accessary:after,
div.menu ul:after,
div.imageLayout:after,
ul.index_btnList:after,
div.heading ul:after,
div.column2_01:after{
content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}



#bb4 .about {
	padding: 0;
	border: none;
	overflow: hidden;
	margin: 20px 0 30px;
}

#bb4 .about h1 {
	width: 55%;
	float: left;
	padding: 0;
}

#bb4 .about h1 img {
	height: auto;
	margin: 0;
}

#bb4 .about .case {
	float: right;
	width: 45%;
}

#bb4 .about .case li {
	padding: 15px 30px;
	overflow: hidden;
	border-bottom: 1px solid #EEE;
}

#bb4 .about .case li figure {
	width: 230px;
	float: left;
}

#bb4 .about .case li figure figcaption {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.5em;
}

#bb4 .about .case li.case1 figure figcaption {color: #7F1083;}
#bb4 .about .case li.case2 figure figcaption {color: #009C84;}
#bb4 .about .case li.case3 figure figcaption {color: #E3007F;}
#bb4 .about .case li.case4 figure figcaption {color: #009844;}

#bb4 .about .case li.case4 {
	border-bottom: none;
}

#bb4 .about .case li figure figcaption span {
	font-size: 13px;
	margin-right: 10px;
	font-weight: normal;
	color: #000;
}

#bb4 .about .case li .device {
	display: block;
	width: 110px;
	float: right;
}



/* ////////////////////////////////////////////////////////////////////////////////
///
/// under 1023
///
//////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 1023px) {


#bb4 .about h1 {
	width: 460px;
}

#bb4 .about .case {
	width: 300px;
}

#bb4 .about .case li {
	padding: 20px 10px;
}

#bb4 .about .case li figure {
	width: 180px;
}

#bb4 .about .case li .device {
	width: 90px;
}

#bb4 .about .case li figure figcaption span {
	__display: block;
}

div#str_contents {
	width: 100%;
}

div#main {
	width: 100%;
	margin: 0 auto 45px;
}

div#main img {
	width: auto !important;
	height: auto !important;
}

#main table.tbl_summary {
	width: 100%;
}


}



/* ////////////////////////////////////////////////////////////////////////////////
///
/// under 768
///
//////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 768px) {

#bb4 .about h1 {
	width: 100%;
	text-align: center;
}

#bb4 .about .case {
	width: 100%;
}

#bb4 .about .case li {
	width: 50%;
	float: left;
	padding: 20px 0;
}

#bb4 .about .case li figure {
	width: 67%;
}

#bb4 .about .case li .device {
	width: 32%;
}

p.notice {
	width: 100%;
}




}




/* ////////////////////////////////////////////////////////////////////////////////
///
/// under 480
///
//////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 480px) {

#bb4 .about .case li {
	width: 100%;
	float: none;
}



}