@charset "utf-8";

body{
background:#B3F3FC url(../img/bg_image_sky.jpg) repeat-x;
color:#fff;}

p{
font-size:13px;
font-size:1.3rem;
line-height: 1.5;}

a.over:hover img{opacity: 0.7;}

#content{
position: relative;
width:1080px;
margin:0px auto;
}

.mb20{margin-bottom: 20px;}

/* #slidemenu,*/
#sp_header,
#sp_header_detail,
#sp_menu{ 
display: none;
}
	
.description img{width:200px}

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

#globalnav{
float:left;
width:254px;
margin-top: 20px;
padding-bottom: 20px;
border:2px solid #fff;
border-radius: 10px;
background: url(../img/bg_box.png);
text-align: center;
}

#header{padding-top:40px;}

h1{margin: 0;padding: 0;}
h1+p{margin: 0;padding: 0;}

p.combi{margin:30px 0;}

#globalnav ul{
list-style: none;
margin:0 auto;
padding: 0;}

#globalnav ul li{margin-bottom: 10px;}

p#tw{width:90%;margin:30px auto;}

.profile{
margin:20px;
padding:15px 15px 5px;
border:#fff 5px solid;
border-radius:20px;
}

.profile p{margin-bottom: 10px;}
.profile .profile-text{text-align: left;}

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

#main{
float:right;
width:800px;
margin:20px 0 0 20px;
}

.intro-box p{margin:0 0 20px;}

.intro-box a.over{
display: block;
 background: #fff;
}

.main-box{
clear:both;
background: url(../img/bg_box.png);
margin-bottom: 20px;
padding:38px;
border-radius: 10px;
border:2px solid #fff;
}

.news{
padding: 15px 38px 0px;
}

.main-box h2{
text-align: center;
padding-bottom: 16px;
border-bottom:2px dotted #fff;
letter-spacing:2px;
}

h2 span{font-size:70%;}

.main-box h3{
margin: 30px 0 0;}

/**/

.bg_3siro{
background:url(../img/bg_3siro.png) no-repeat right bottom;
}

.news dl dt{float:left;margin-right: 15px;}
.news dl dd{
letter-spacing: 2px;
overflow: hidden;
margin: 10px 0;
}	

/**/

.new:before {
position:absolute;
content:url(../../../common/img/icon_new.png);
}

.medialist ul{
overflow: hidden;
margin:0;
margin-right:-30px;}

.medialist ul li{
display: block;
position:relative;
float:left;
width:29%;
margin:30px 29px 0 0;
border:1px solid #fff;
background: rgba(249,147,184,1);
font-weight: bold;
}

.medialist ul li:hover{
background: rgba(0,0,0,.6);
-webkit-transition: .3s;
transition: .3s;
}

.medialist ul li a:hover{color: #fff;text-decoration:none;}

.medialist ul li img{width: 100%;}
.medialist ul li:hover img{opacity:0.8;}

.medialist ul li p{
display: block;
min-height:5em;
padding: 10px 14px 0;
}

.medialist ul li p.media{
position: absolute;
top:0;
right:0;
min-height:2em;
padding: 5px 10px 0;
border-left: 1px solid #fff;
border-bottom: 1px solid #fff;
background: rgba(244,69,34,1);
color: #fff;
opacity:0.9;
}

.medialist ul li:hover p.media{
right:-10%;
transition: .3s;
opacity: 0;}

.more{
text-align: center;
min-height: 4em;
line-height: 4em;}

.review h2{
padding: 72px;
background: url(../img/image_tuner_tartan.png) repeat-x 39% top;}

.review h3{
clear:both;
margin-bottom:30px;
line-height: 1.5;
text-align: center;
}

.review ul {margin-left: 4%;overflow: hidden;}
.review ul li{
float:left;
width: 27%;
min-height: 200px;
margin-right:3%;
margin-bottom: 20px;
padding: 11px;
background: #fff;}
.review ul li:hover{background:#FFC;}

.review ul li a:link{color:#024B93;}
.review ul li a:hover{color:#F6C;text-decoration: none;}
.review ul li a:visited{color:#555;}

.review ul li img{display: block;width:100%;}
.review ul li span{
display: block;
padding: 5px;
margin-bottom: 5px;
background:#80e059;
color:#fff;
font-size: 11px;	
}
.review ul li p{font-weight: bold;min-height:3em;}

.comic ul li{margin:8%;}
.comic ul li img{width:100%;margin-bottom: 2%;}

ul#ad{margin: 30px 0;overflow:hidden;}
ul#ad li{
float: left;
margin: 9px 5px 0;
background:#000;border-radius: 5px;}

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

#footer{
clear:both;
padding-top: 20px;
background:url(../img/bg_image_grass.png) repeat-x left top;
}

#footer-bg{
margin-top: 75px;
background:#C6E057;}

.footer-inr{
width:980px;
margin:0 auto;
overflow:hidden;
text-align: center;}

.footer-inr p{
float:left;	
padding:25px 0 25px 200px;
font-weight: bold;}

.go-pix a{color:#444}
.go-pix a:hover{color:#fff}

.fbox {
position: relative;
display:inline-block;
padding:10px;
margin:0 40px 37px 20px;
background-color:#ffffff;
border:6px solid #ffffff;
border-radius: 7px ;
}

.fbox:after{
content: "";
position: absolute;
height: 0;
width: 0;
top:9px;
left:-15px; 
border: 10px solid transparent;
border-bottom: 17px solid #ffffff;
}

.go-pix a:hover .fbox{
background-color:#444;
border:6px solid #444;
}

.go-pix a:hover	.fbox:after{
border-bottom: 17px solid #444;
}

ul#sns{margin:70px 0 0 0;}
ul#sns li{float:left;margin-left: 20px;}

@media screen and (max-width: 1024px) {
#content{width:100%;}
#main{width:75%;}
#globalnav{width:21%}
}

@media screen and (max-width: 768px) {
#globalnav img{width:90%}
#globalnav iframe{min-width: 143px;}

.medialist ul li{margin: 4% 3% 0 0;}

}

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

/**/

#sp_header,
#sp_header_detail{display:block;}

#sp_header{
overflow:hidden;
background:#4FD0Ef;}

#sp_header h1 img{
float:right;
width:130px;}

#sp_header_btn {
float:left;
width: 90px;
margin:10px;
padding-left: 17px;
padding-top: 2px;
border: 2px solid #fff;
border-radius: 7px;
background: url(../img/sp_icon_menu.gif) no-repeat 6px center;
font-size: 19px;
text-align: center;
}
#sp_menu{
clear:both;
width: 100%;
margin: 0 auto;
display: none;
}
#sp_menu li{
display: block;
width: 100%;
}
#sp_menu li a{
display: block;
padding: 12px 0 10px;
background:#00BFED;
color: #fff;
font-weight: bold;
text-align: center;
text-decoration: none;
}

#sp_header_detail{
position:relative;
margin:40px 0 20px;}

#sp_header_detail p.description{
padding:0 0 10px;
margin: 0 2%;
background: #4FD0Ef;
}

#sp_header_detail p.combi{
position: absolute;
right:4%;
top: -65px;}
#sp_header_detail p.combi img{
width:100px;}


/**/

#globalnav{display: none;}
.bg_3siro{background: none;}
#content {clear:both;width: 100%;margin:0;bottom:0;}

#main{
float:none;
width:95%;
margin:0 auto;
}

.intro-box p img{width: 100%;}

.main-box{padding:4% 2%;}
.main-box h2{padding-bottom:4%;font-size: 1.5rem;}

.news dl{margin:10px 0 0;}
.news dl dd {margin: 2px 0;}

.medialist ul {margin-right: -5%;}
.medialist ul li {width: 46%;margin: 13px 2% 0 0;}
.medialist ul li p {padding: 7px 4px 7px;line-height: 1.2;}

ul#ad li{width:46%;}
ul#ad li img{width: 100%;}

.review h2{background: none;padding:16px;}
.review ul li{width: 39%;}

.footer-inr {width:100%;}

.footer-inr p{padding-left:4%;}
.fbox{display: block;margin: 10px 0 0;}
.fbox:after{top:-28px;left:88px;}

ul#sns {margin-top:13%;margin-left: 71%;}
ul#sns li{margin: 8px 0px 0 3%;}


}