@charset "utf-8";
a:link,
a:visited{color:#333;}

.sp{display: none;}

#bnrarea{
padding:30px 0;
background:#F2F2F2;
}

#smpBnr{text-align:center;}

.nextmall{margin: 50px 0;}

/*  clearfix */
.topix:after,
.select_os:after,
.select_os_area:after,
.select_os_area .inr:after, 
.news .nav:after,
.sub:after,
.medialink_social:after{
content:"";
display: table;
clear:both;
}

/* Contents inr */

h2{
clear: both;
margin: 40px 0;
padding-left: 10px;
border-left:7px solid #999;
color: #4D4D4D;
}

/*topix*/

.topix{
margin-right: -32px;
margin-left:-20px;
}

.topix h2{
margin-left: 20px;
}

.topix ul{
margin-left: 20px;
}

.topix li{
position: relative;
width:210px;
margin-right:32px;
border:4px solid #fff;
}

.topix li:before{ /*上部黒帯*/
position: absolute;
top: -30px;
width:100%;
height:30px;
background: rgba(0,0,0,0.8);
color: #fff;
content:"";
}

.topix li a:before{ /*リボン本体*/
position:absolute;
top: -26px;
left:-20px;
height:20px;
width:120px;
color:#fff;
text-align: center;
}

.topix li:before

.topix li a:hover{
  text-decoration: none;
}

.topix li a:after{ /*リボン下部*/
position: absolute;
left: -20px;
top: -6px;
border-width: 0 20px 20px 0;
border-style: solid;
border-color: transparent;
content: "";
}

.topix li img{
display: block;
width:100%;
}

.topix li:hover p{
	text-decoration: underline;
}

.topix li:hover:before{
	width:102%;
}


.topix li p{
min-width: 170px;
margin: 0;
padding:20px;
background: rgba(0,0,0,0.7);
color:#fff;
}

/*ir*/

.topix li.ir a:before{
content: "IR";
background:#ED1C24;
}

.topix li.ir:hover{border-color: #ED1C24;}
.topix li.ir a:after{border-right-color: #C1272D;}


/*release*/
.topix li.release a:before{content: "プレスリリース";}
.topix li.announce a:before{content: "お知らせ";}

.topix li.release a:before,
.topix li.announce a:before{background:#00A4CF;}

.topix li.release:hover,
.topix li.announce:hover{border-color: #00A4CF;}

.topix li.release a:after,
.topix li.announce a:after{border-right-color: #013980;}

/*campaign*/

.topix li.campaign a:before{content: "ピックアップ";}
.topix li.event a:before{content: "イベント";}
.topix li.live a:before{content: "速報中";}
.topix li.announce a:before{content: "お知らせ";}

.topix li.campaign a:before,
.topix li.event a:before,
.topix li.live a:before,
.topix li.announce a:before{background:#39B54A;}

.topix li.campaign:hover,
.topix li.event:hover,
.topix li.live:hover,
.topix li.announce:hover{border-color: #39B54A;}

.topix li.campaign a:after,
.topix li.event a:after,
.topix li.live a:after,
.topix li.announce a:after{border-right-color: #009245;}


/*select*/
.select_os{
	}

.select_os ul{
margin-right: -42px;
font-size: 15px;	
}

.select_os li{
position:relative;
margin-right:42px;
margin-bottom:40px;
background:#F2F2F2;
text-align: center;
}

.select_os a{
display: block;
width:210px;
padding:14px 0;
text-decoration: none;
}

.select_os p{
margin:14px 0 0;
}

.select_os li.active,
.select_os li:hover{
background:url(/common/image/top/nav/bg_select.png);

}

.select_os li.active a,
.select_os li:hover a{
color:#fff;
}

.select_os li.active:after{
position: absolute;
left:36%;
bottom:-40px;
border:30px solid #fff;
border-top:0;
border-bottom: 30px solid transparent;
background:url(/common/image/top/nav/bg_select.png);
content: "";
}


.select_os_area{
position:relative;
clear: both;
padding:20px 0;
background:url(/common/image/top/nav/bg_select.png);
}

.select_os_area .leftbox{
float:left;
width:84%;
}

.select_os_area .rightbox{
float:right;
width:16%;
}

.select_os_area a{
display: block;
color:#fff;
}

.select_os_area ul{
margin: 30px;
font-size: 15px;	
}

.select_os_area li{
width: 47%;
margin-right:3%;
border-bottom: 1px solid #fff;
}

.select_os_area li a{
padding:10px 10px 10px 15px;
background: url(/common/image/arrow_w.png) no-repeat left center;
}

.select_os_area .rightbox p{
position:absolute;
bottom:0;
border:1px solid #fff;
text-align: center;
}

.select_os_area p a{
padding:10px;
text-decoration: none;
}

.select_os_area p a:hover{
background: #fff;
color:#000;
}

/* 製品カテゴリ */

#ios b{
color:#FF7BAC;
font-weight: bold;
}

#android b{ 
color:#FF931E;
font-weight: bold;
}

#win b{
color:#8CC63F;
font-weight: bold;
}

#mac b{
color:#00A4CF;
font-weight: bold;
}

/*news,sub*/

.news{
	margin-top:80px;
	background:url(/common/image/top/bg_news.png) repeat-x left bottom;
}

.news .inr{
	background:url(/common/image/top/bg_news_horizon.png) no-repeat left bottom;
}

.rss{
position:relative;
}

.rss p{
position: absolute;
margin: 0;
top: 5px;
left: 110px;
}

.datelist{
clear: both;
font-size: 15px;}

.datelist dt{
float: left;
width: 13%;
margin-right: 1%;
text-align: center;
}

.news dt.ir{background:#ED1C24;}
.news dt.release{background:#00A4CF;}
.news dt.event,
.news dt.campaign{background:#39B54A;}

.news dt.ir,
.news dt.release,
.news dt.event,
.news dt.campaign{
color:#fff;
font-size: 13px;
}

.datelist dd{
margin: 0;
padding-bottom: 12px;
overflow: hidden;
line-height: 1.4;
}

.supportlink dt{
width:21%;
text-align: left;
}

ul.boxlink{
float:right;
margin: 40px 0;
}

.boxlink li{
margin-right: 10px;
text-align: center;
}

.boxlink a{
display: block;
padding:10px;
background: #fff;
border:1px solid #ccc;
text-decoration: none;
}

.boxlink a:hover{
color:#fff;
background:#333;
}

.sub{
background: #f2f2f2;
}

.supportlink{
clear:both;
width:68%;
float:left;
}

.medialink{
float:right;
width:28%;
padding:0 0 40px 0;
}

.medialink_social{
	margin-left: 6%;
}

.medialink_social ul{
	margin-bottom:50px;
}

.medialink_social li{
width:31.33%;
margin: 0 2% 0 0;
}

.footer-cover{margin-top: -70px;background:#f2f2f2;}

@media only screen and (max-width: 768px) {
.pc{display: none;}

.sp{display: block;}

#contents{width:100%;}

#contents img[width]{
	width:initial;
}

.topix,
.select_os,
.news,
.supportlink,
.medialink{
	width:96%;
	padding:0 2%;
}

.topix,
.topix h2{
	margin-left:0;
}


.topix li:before{
content:initial;
width: 0;/*IE*/
}

.topix li {
background: rgba(0,0,0,0.7);
box-sizing: border-box;
width: 100%;
height: 100px;
margin-bottom: 20px;
}

.topix li a:before{top:12px;}
.topix li a:after{top:32px;}

.topix li img {
float: left;
width:inherit;
height:100%;
margin-right:6%;
}

.topix li p {
position: static;
background: none;
}

.select_os ul {
margin-right:-2%;
}

.select_os li{
display: table;
height: 180px;
width:24%;
margin-right: 1%;
}

.select_os li.active:after{
	left:20%;
}

.select_os li span{
	display: block;
}

.select_os a{
display: table-cell;
width:100%;
padding: 0;
vertical-align: middle;
}


.select_os_area .leftbox,
.select_os_area .rightbox,
.medialink_social{
	float:none;
	width:100%;
}

.select_os_area .rightbox p{
position:static;
width: 50%;
margin: 0 auto;
}

.select_os_area li{
width: 97%;
margin-right:3%;
}

.datelist dl{
width:100%;
margin-top: -3%;
}
  
.datelist dt{
width:25%;
margin:3% 0 0;
}

.datelist dd{
width: 100%;
padding: 3% 0;
border-bottom: 1px dotted #ccc;
}

.medialink_social{
width: 46%;
margin: 0 auto;
padding-bottom: 50px;
}

  .nextmall h2{
    margin-left: 10px;
  }
  
@media only screen and (max-width: 490px) {
  
  .nextmall img{
    width: 90%;
  }

.medialink_social{
	float:none;
	width:100%;
}

.datelist dt{
width: 35%;
}

.boxlink a{
	padding: 10px 8px;
}

.medialink_social{
text-align: center;
}