@charset "UTF-8";

div.box{
	width:960px;
	margin:0 auto;
	padding-top:39px;
}

div.title{
	display:inline-block;
	vertical-align:top;
	height:72px;
	width:600px;
	padding:0 0 0 92px;
	margin-bottom:52px;
	cursor:pointer;
	position: relative;
}
div.title:before{
	content: "";
	display:block;
	width: 72px;
	height: 72px;
	background:url(/-/Media/Ricoh/Sites/co_jp/mfp/funcguide/image/title.png) no-repeat 0 0;
	background-size:72px 72px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
}
div.title h1{
	font-size:28px;
	margin-bottom:20px;
	font-weight:bold;
	display: inline-block;
}
div.title p{
	font-size:16px;
	font-weight:bold;
	display: inline-block;
}
div.title .titleLinkArea{
	display: block;
	width: 72px;
	height: 72px;
	position: absolute;
	top: 0;
	left: 0;
	cursor: pointer;
	z-index: 100;
}
div.box a.wide{
	padding:0 30px 0 0;
	display:inline-block;
	line-height:72px;
	vertical-align:top;
	float:right;
	background:url("/-/Media/Ricoh/Sites/co_jp/mfp/funcguide/image/menu_arrow.png") right center no-repeat;
	background-size:23px 23px;
	color:#0a0a0a;
    font-weight: bold;
}

h2.section_title{
	padding:11px 0;
	font-size:19px;
	cursor:pointer;
	display: inline-block;
}
h2.section_title span{
	font-size:14px;
	font-style:oblique;
	margin-left:10px;
}
h2.section_title:before{
	content: "";
	display: inline-block;
	vertical-align:middle;
	width:12px;
	height:8px;
	background:url("/-/Media/Ricoh/Sites/co_jp/mfp/funcguide/image/open_arrow.png") 0 0 no-repeat;
	background-size:12px 8px;
	margin-right:10px;
}

ul.select2{
	width:960px;
	margin:20px auto 35px;
}
ul.select2 li{
	width:476px;
	display:inline-block;
	text-align:center;
	border:#313249 2px solid;
	padding:10px 0;
	background:#fff;
	font-weight:bold;
	cursor:pointer;
}
ul.select2 li.current{
	background:#313249;
	color:#fff;
	position:relative;
}
ul.select2 li:not(.current):hover{
	background:#c0c0c0;
	color:#000;
	position:relative;
}
ul.select2 li.current:after,
ul.select2 li:not(.current):hover:after{
  border-left:solid 7px transparent;
  border-right:solid 7px transparent;
  border-top:solid 10px #313249;
  bottom:-10px;
  content:"";
  display:block;
  height:0;
  left:50%;
  position:absolute;
  margin-left:-7px;
  width:0;
}


ul#menu{
	width:960px;
	margin:20px auto 0;
	list-style:none;
}
ul#menu li{
	display:inline-block;
	vertical-align:top;
	width:293px;
	height:150px;
	padding:0;
	margin:0 29px 29px 0;
	background:#fff;
	border-left:5px solid #e5e5e5;
	position:relative;
	cursor:pointer;
}
ul#menu li p{
	position:absolute;
	top:50%;
	left:20px;
	padding-right:10px;
	font-size:24px;
	line-height:1.3em;
	width:250px;
	background:url("/-/Media/Ricoh/Sites/co_jp/mfp/funcguide/image/menu_arrow.png") right center no-repeat;
	background-size:23px 23px;
	font-weight:bold;
}
ul#menu li p span{
	display:block;
	font-size:16px;
	font-weight:normal;
}
ul#menu li span.new{
	color:#d7313b;
	position:absolute;
	top:20px;
	left:21px;
	font-weight:bold;
	font-size:13px;
}
ul#menu li:hover{
	border-left:5px solid #d7313b;
}
ul#menu li:nth-child(3n){
	margin-right:0;
}
br.for_sp{
	display:none;
}

@media (max-width: 960px) {
	div.box{
		width:90%;
		margin:0 auto;
	}
	div.title{
		width:calc(100% - 82px);
		background-position:10px 39px;
		padding: 39px 0 39px 82px;
	}
	div.title h2{
		font-size:22px;
		text-align:left;
		padding-left:10px;
		font-weight:bold;
	}
	div.title p{
		font-size:12px;
		text-align:left;
		padding-left:10px;
	}
	div.box a.wide{
		width: calc(100% - 20px);
		margin: 0 auto 29px;
		display: block;
		background:#fff url("/-/Media/Ricoh/Sites/co_jp/mfp/funcguide/image/menu_arrow.png") calc(100% - 10px) center no-repeat;
		background-size: 23px 23px;
		float:none;
		padding:0 10px;
	}
	h3.section_title {
		width: 100%;
		margin: 0 auto 29px;
	}
	ul.select, ul.select2{
		width:90% !important;
		margin:0 auto 20px;
	}
	ul.select span, ul.select2 span{
		display:none;
	}
	ul.select li{
		box-sizing:border-box;
		width:50% !important;
	}

	ul.select2 li{
		box-sizing:border-box;
		width:50%;
	}
	ul#menu{
		width:90%;
		margin-bottom:0;
	}
	ul#menu li{
		width:calc(100% - 5px);
		margin:0 auto 29px;
		display:block;
	}
	ul#menu li p{
		width:90%;
	}
	ul#menu li:nth-child(3n) {
		margin:0 auto 29px !important;
	}
	br.for_sp{
		display:inline;
	}
}