﻿@media screen and (min-width: 768px){

#S_OP {
	max-width:1206px;
	font-family: "FOT-ロダン Pro M";
}

#S_OP img{
	max-width:100%;
	height:auto;
}

#S_OP span.spbr{
	display:none;
}


/* header
============================================================*/

#S_OP header{
	margin:0 0 20px;
}

#S_OP header .headerInner{
	margin:10px auto 0;
	text-align:center;
	background:url(images/pc_header.jpg) no-repeat center top;
	background-size:100% auto;
}

#S_OP header .headerInner h1{
	padding:20px 0 0;
}

#S_OP header .headerInner h1 .firstLine{
	font-size:200%;
	color:#c4d947;
}

#S_OP header .headerInner h1 .secondLine{
	font-size:370%;
}

#S_OP header .headerInner p{
	font-size:120%;
	padding:10px 0 35px;
}


/* column
============================================================*/

/* col2 */
#S_OP ul.col2{
	padding-right:20px;
	margin-bottom:20px;
}

#S_OP ul.col2 li{
	border:#f0f5c2 3px solid;
	float:left;
	width:50%;
	box-sizing:border-box;
	margin-right:20px;
	padding:12px;
	text-align:center;
}

#S_OP ul.col2 li:last-child{
	margin-right:-20px;
}


/* col3 */

#S_OP ul.col3{
	/*padding-right:18px;*/
	margin-bottom:21px;
}

#S_OP ul.col3 li{
	border:#f0f5c2 3px solid;
	float:left;
	width:32.3383084%;
	box-sizing:border-box;
	margin-right:18px;
	padding:2px;
	text-align:center;
	position:relative;
}

#S_OP ul.col3 li:last-child{
	margin-right:-18px;
}

/* col4 */

#S_OP ul.col4{
	/*padding-right:30px;*/
	margin-bottom:20px;
}

#S_OP ul.col4 li{
	border:#f0f5c2 3px solid;
	float:left;
	width:23.7147595%;
	box-sizing:border-box;
	margin-right:20px;
	padding:2px;
	text-align:center;
}

#S_OP ul.col4 li:last-child{
	margin-right:-20px;
}


/* section
============================================================*/

#S_OP section a:link{
	text-decoration:none;
}

#S_OP section a:visited{
	text-decoration:none;
}

#S_OP section a:hover{
	text-decoration:none;
}

#S_OP section a:active{
	text-decoration:none;
}



/* col3 */

#S_OP ul.col3 section h2{
	position:absolute;
	top:30%;
	left:3%;
	font-size:238%;
	color:#000000;
	line-height:1.0em;
	text-align:left;
}

#S_OP ul.col3 section h2 p.comment{
	font-size: 45%;
    padding: 10px 0 0;
    width: 50%;
	line-height:1.3em;
	color:#333333;
}

#S_OP ul.col3 section p.btn{
	font-size:140%;
	color:#000000;
	background-color:#f0f5c2;
	padding:10px;
	margin:10px 0 0;
}

#S_OP ul.col3 section p.btn:before{
	content:url(images/arrow.png);
	margin-right:5px;
	position:relative;
	top:1px;
}

/* col4 */

#S_OP ul.col4 section h2{
	/*font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace;*/
	font-size:200%;
	margin:10px 0 10px;
	line-height:1.0em;
}

#S_OP ul.col4 section p.btn{
	font-size:140%;
	color:#000000;
	background-color:#f0f5c2;
	padding:10px;
	margin:3px 0 0;
}

#S_OP ul.col4 section p.btn:before{
	content:url(images/arrow.png);
	margin-right:5px;
	position:relative;
	top:1px;
}

#S_OP ul.col4 section p.comment {
	padding:0 10px 5px;}


/* ranking
============================================================*/

#mod_1columnArea div.mod_1columnArea_ranking{
	padding:0;
}

#S_OP #mod_1columnArea div.mod_1columnArea_ranking div#parts_ranking{
	margin:30px 0;
}

#S_OP #mod_1columnArea div.mod_1columnArea_ranking div#parts_ranking h2{
	/*font-family:"ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif,"Times New Roman";*/
	font-size:250%;
	padding-left:50px;
	background:url(images/icon_crown.png) no-repeat left top;
	position:relative;
	bottom:20px;
}

#S_OP #mod_1columnArea div.mod_1columnArea_ranking div#parts_ranking p.update{
	float:right;
}

#S_OP #mod_1columnArea div.mod_1columnArea_ranking div#parts_ranking ul.tabmenu {
    position: absolute;
    right: 0;
    top: 29px;
    height: 29px;
}


/* morelink
============================================================*/

#S_OP ul.morelink{
	margin-bottom:50px;
}

#S_OP ul.morelink li{
	padding:1px;
}


/* clearFix
============================================================*/
#S_OP ul.col2:after,
#S_OP ul.col3:after,
#S_OP ul.col4:after{
	display:block;
	clear:both;
	height:0;
	visibility:hidden;
	content:".";
}

#S_OP ul.col2,
#S_OP ul.col3,
#S_OP ul.col4{
	zoom:1;
}

}


/* narrow width 
============================================================*/

@media screen and (min-width: 768px) and (max-width: 1080px){

#S_OP header .headerInner h1 .firstLine{
	font-size:170%;
	color:#c4d947;
}

#S_OP header .headerInner h1 .secondLine{
	font-size:340%;
}

#S_OP header .headerInner p{
	font-size:110%;
}

}

@media screen and (min-width: 768px) and (max-width: 1090px){

#S_OP ul.col4 section h2{
	font-size:180%;
}

#S_OP ul.col4 section p.btn{
	font-size:120%;
}

}

@media screen and (min-width: 768px) and (max-width: 1117px){
	#S_OP ul.col3 section h2{
	position:absolute;
	top:40%;
	left:2.6%;
	font-size:200%;
	color:#000000;
	line-height:1.0em;
	text-align:left;
}
	
}