@charset "utf-8";

/**
 *
 *  App - マニュアル　共通
 *
 */


/*--------------------------------------------------------------------------
   overwrite
---------------------------------------------------------------------------*/
/*#Page {
}
#PageTtl .ttl{
	height: 148px;
}
#PageTtl h1{
	padding-top: 56px;
	text-align: center;
	color: #fff;
}
#PageTtl h1 span.main{
	font-size:45px;
	font-size:4.5rem;
	background: none;
}*/


/*--------------------------------------------------------------------------
   Manual
---------------------------------------------------------------------------*/


/* 見出し
--------------------------------------------------*/

#Manual h2{
	background:#5193DB;
	margin:0 0 40px;
	padding:15px 20px;
	color:#FFF;
	font-size:22px;
	font-size:2.2rem;
}
#Manual h2 span{
	width:70px;
	margin:0 15px 0 -20px;
	text-align:center;
	border-right:1px solid #FFF;
	display:inline-block;
}
#Manual h3{
	margin:0 0 20px;
	padding:10px 0;
	font-size:20px;
	font-size:2.0rem;
	color:#2C4658;
	border-bottom:5px solid #5193DB;
}
#Manual h4{
	margin:0 0 20px;
	padding:0 0 0 15px;
	font-size:18px;
	font-size:1.8rem;
	border-left:5px solid #5193DB;
}
#Manual h5{
	margin:0 0 15px;
	padding:0 0 5px;
	font-size:18px;
	font-size:1.8rem;
	border-bottom:2px solid #BBB;
}


/* テキストレベル
--------------------------------------------------*/

#Manual p{
	line-height:1.8;
}
#Manual p.em{
	background:#E4EEF8;
	padding:20px 25px;
	color:#2C4658;
}


/* 画像
--------------------------------------------------*/

#Manual p.img img{
	box-shadow:2px 2px 4px #D5D5D5;
	border-left:1px solid #DDD;
	border-top:1px solid #DDD;
}
#Manual p.img a:hover{
	opacity:0.85;
}


/* ボックスデザイン
--------------------------------------------------*/

#Manual div.pre-box{
	background:#EEEEEE;
	margin:0 0 20px;
	padding:20px;
	color:#2C4658;
	line-height:1.8;
	border-left:5px solid #4C8CD0;
}
#Manual div.pre-box pre{
	font-family: "メイリオ", Meiryo, Osaka,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

#Manual div.ex-box,
#Manual div.lb-box,
#Manual div.reco-box{
	margin:0 0 20px;
	padding:20px;
}
#Manual div.ex-box{
	background:#FCF8E3;
	color:#A18659;
	border:2px solid #B8A37C;
}
#Manual div.lb-box{
	background:#E2EEFA;
	color:#2B79D0;
	border:2px solid #69A2E0;
}
#Manual div.reco-box{
	background:#FFF;
	color:#2B79D0;
	border:2px solid #69A2E0;
}
#Manual div.ex-box p.tit,
#Manual div.lb-box p.tit,
#Manual div.reco-box p.tit{
	height:33px;
	margin:0 0 10px;
	padding:0 0 0 40px;
	line-height:35px;
	font-weight:bold;
	font-size:15px;
	font-size:1.5rem;
}
#Manual div.ex-box p.tit{
	background:url("/rentalserver/user-support/knowledge/images/icon_ex.png") no-repeat left center;
}
#Manual div.lb-box p.tit{
	background:url("/rentalserver/user-support/knowledge/images/icon_lb.png") no-repeat left center;
}
#Manual div.reco-box p.tit{
	background:url("/rentalserver/user-support/knowledge/images/icon_reco.png") no-repeat left center;
}

#Manual div.ex-box ul.disc,
#Manual div.lb-box ul.disc,
#Manual div.reco-box ul.disc{
	border:none;
	padding:0 40px;
	color:#455D6B;
}
#Manual div.ex-box ul.disc li+li,
#Manual div.lb-box ul.disc li+li,
#Manual div.reco-box ul.disc li+li{
	padding-top:0;
}
#Manual div.ex-box p.glossary,
#Manual div.lb-box p.glossary,
#Manual div.reco-box p.glossary{
	margin:0 0 0 25px;
	color:#455D6B;
}


/* リスト
--------------------------------------------------*/

#Manual ul.disc{
	margin:0;
	padding:25px 40px;
	border:2px solid #8EB9E8;
	overflow:hidden;
}
#Manual ul.disc li+li{
	padding-top:10px;
}

#Manual ul.disc-small li{
	text-indent:-0.6em;
	margin-left:-10px;
	padding-left:1.5em;
}
#Manual ul.disc-small li:before{
	display:inline-block;
	content:"・";
	padding-right:3px;
}

#Manual ol.anchor-list{
	border:2px solid #DDD;
	padding:25px 40px 20px 105px;
	overflow:hidden;
}
#Manual ol.anchor-list li:before{
	display:inline-block;
	content:"■";
	background:url("/rentalserver/user-support/knowledge/images/icon_anchor.png") no-repeat left center;
	width:21px;
	margin:0 0 0 -53px;
	text-indent:-9999em;
}
@-moz-document url-prefix() {
  #Manual ol.anchor-list li:before {
	margin:0 0 0 -48px;
  }
}
#Manual ol.anchor-list li{
	width:40%;
	padding:0 54px 5px 0;
	list-style:decimal;
	vertical-align:top;
	float:left;
}
#Manual ol.anchor-list li a{
	padding:0 0 0 25px;
	color:#013A80;
}
#Manual ol.anchor-list li.non-num{
	width:43.5%;
	margin-left:-20px;
	text-indent:20px;
	list-style:none;
}
#Manual ol.anchor-list li.non-num a{
	padding:0 0 0 7px;
}

#Manual ol.decimal{
}
#Manual ol.decimal li{
	padding:0;
}


/* テーブル（表組み）
--------------------------------------------------*/

#Manual th{
	background:#C8DEF7;
	padding:15px;
	text-align:left;
	line-height:1.5;
	white-space:normal;
}
#Manual th.thead{
	background:#4C8CD0;
	color:#FFF;
	padding:5px 0;
	text-align:center;
}
#Manual th.thead span{
	display:block;
	margin-top:-5px;
	font-weight:normal;
}
#Manual th.tac{
	font-weight:normal;
}
#Manual th.indigo,
#Manual td.indigo{
	background:#3258A8;
	color:#FFF;
}
#Manual th.marine,
#Manual td.marine{
	background:#568EDA;
	color:#FFF;
}
#Manual th.sky,
#Manual td.sky{
	background:#20AEE5;
	color:#FFF;
}
#Manual td{
	background:#F1F6FB;
	padding:10px 15px;
	line-height:1.6;
	text-align:left;
}
#Manual td.aqua{
	background:#D0EEF9;
}
#Manual td ul{
	line-height:1.6;
}
#Manual td.plus{
}
#Manual td span.plus{
	display:block;
	content:"■";
	background:url(/rentalserver/user-support/knowledge/images/img_plus.png) no-repeat left center;
	width:25px;
	height:25px;
	text-indent:-9999em;
	position:absolute;
	bottom: -13px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}


/* ステップ
--------------------------------------------------*/

.step{
}
.step .num-title{
	margin:0 0 20px;
	color:#2C4658;
	font-size:18px;
	font-size:1.8rem;
	font-weight:bold;
	line-height:1;
}
.step .num-title span{
	width:40px;
	height:32px;
	padding:8px 0 0;
	margin:0 15px 0 0;
	background:#4C8CD0;
	font-size:25px;
	font-size:2.5rem;
	font-weight:normal;
	color:#FFF;
	text-align:center;
	display:inline-block;
}


/* ボタン
--------------------------------------------------*/

.btn-cp-ssl a{
	background:url("/rentalserver/user-support/knowledge/images/ban_cp_ssl.png") no-repeat left top;
	width:571px;
	height:60px;
	display:block;
	text-indent:-9999em;
}
.btn-cp-ssl a:hover{
	opacity:0.75;
}


/* フローチャート
--------------------------------------------------*/

.manual-flow{
	margin:0 0 70px;
	overflow:hidden;
	position:relative;
}
.manual-flow ul{
	width:704px;
	margin:0 auto;
}
.manual-flow ul:before{
	display:block;
	content:"■";
	background:#DDD;
	height:15px;
	margin:30px auto 0;
	text-indent:-9999em;
	border-radius:30px;
	z-index:10;
}
.manual-flow ul li{
	display:inline-block;
	margin:-30px 0 0;
	line-height:1.2;
	text-align:center;
	color:#444;
	vertical-align:top;
}
.manual-flow ul.three-step li{
	width:231px;
}
.manual-flow ul.four-step li{
	width:172px;
}
.manual-flow ul li p{
	line-height:1.2 !important;
}
.manual-flow li p span{
	background:#888;
	width:48px;
	height:46px;
	margin:0 auto 10px;
	padding:2px 0 0;
	line-height:48px;
	color:#FFF;
	font-size:26px;
	font-size:2.6rem;
	border-radius:30px;
	text-align:center;
	vertical-align:middle;
	display:block;
}
.manual-flow ul li.active{
	color:#4b80d0;
	margin:-30px 0 0;
	position:relative;
}
.manual-flow ul li.active:before{
	display:block;
	content:"■";
	text-indent:-9999em;
	background-color:#5193DB;
	background-image:url("/rentalserver/user-support/knowledge/images/bg_flow.png");
	background-repeat:no-repeat;
	background-position:right center;
	height:15px;
	border-radius:30px 0 0 30px;
	z-index:100;
	margin:15px 0 0;
}
.manual-flow ul li.active:last-child:before{
	background-image:none;
}
.manual-flow ul li.active p{
	margin:-30px 0 0;
	z-index:1;
}
.manual-flow ul li.active p span{
	background:#5193DB;
}


/* 右ナビ
--------------------------------------------------*/

#Manual .left-cont{
	background:#E4EEF8;
}

#Manual .left-cont dd{
	border-bottom:1px solid #FFF;
}
#Manual .left-cont dd a{
	background-image:none;
	padding:15px 15px 15px 38px;
	color:#00397F;
	border:none;
	position:relative;
}
#Manual .left-cont dd.active a,
#Manual .left-cont dd a:hover{
	background-color:#5193DB;
	color:#FFF;
}
#Manual .left-cont dd a span{
	margin:0 0 0 -15px;
	display:block;
}
#Manual .left-cont dd a span.num{
	margin:0;
	padding:0 0 0 12px;
	vertical-align:middle;
	border-left:none;
	position:absolute;
	left:4px;
	top:30%;
}
#Manual .left-cont dd a span.num+span{
	margin:0;
	padding:0 0 0 12px;
	border-left:1px solid #ACCBEE;
}

/* 用語集
--------------------------------------------------*/

#Manual .glossary{
	text-indent:-7px;
	padding-left:20px;
	font-size:13px;
	font-size:1.3rem;
}
#Manual .glossary:before{
	display:inline-block;
	content:"*";
	padding-right:5px;
}
#Manual .glossary.num{
	text-indent:-14px;
	padding-left:28px;
}
#Manual .glossary.num span{
	margin-left:-8px;
	padding-right:8px;
}


/* Q&A
--------------------------------------------------*/

#Manual h3.qa_category {
	background: #2177AD;
	margin:0;
	padding:10px 20px;
	color: #fff;
	font-size: 18px;
	font-size: 1.8rem;
	font-weight: bold;
	border:none;
}
#Manual dl.qa_group {
	padding:30px 20px 40px;
}
#Manual dl.qa_group + dl.qa_group {
	margin-top:-30px;
}
#Manual dt.qa_ques {
	background: url("/rentalserver/shared/images/ssl_qa_icon_q.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	margin:0 0 20px;
	padding-left: 40px;
	color: #004380;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
}
#Manual dd.qa_answer {
	background: url("/rentalserver/shared/images/ssl_qa_icon_a.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
	padding-left: 40px;
}


/* OP導線強化
--------------------------------------------------*/
#Manual .reco-service h3.reco-service-title {

	font-weight:normal;
	border-bottom:1px solid #ccc;
	padding:0;
	margin-bottom:20px;
	font-size:18px;
}

.reco-service div {
	width:100%;
	margin-bottom:20px;
}

.reco-service div .reco-image,
.reco-service div .reco-lead {
	display:table-cell;
	line-height:1.5;
	font-size:13px;
}

.reco-service div .reco-image {
	width:194px;
}

.reco-service div .reco-image a:hover img {
	opacity:0.8;
}

.reco-service div .reco-lead {
	padding-left:20px;
}

/*----------------------------------------------------------------------------------------------------
	for タブレット（1039px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1039px) {
}
/*----------------------------------------------------------------------------------------------------
	for SP（768px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
	#Manual h2 {
		line-height: 1.5;
		margin: 20px 0;
	}
	#Manual h3 {
		line-height: 1.5;
	}
	#Manual p.img {
		width: 99%;
	}
	#Manual ol.anchor-list {
		padding: 20px 20px 15px 60px;
	}
	#Manual ol.anchor-list li.non-num {
		width: 100%;
		margin: 0;
	}
	#Manual dl.qa_group {
		padding: 30px 0 40px;
	}
	.reco-service div .reco-image {
		display: block;
		margin: 0 auto;
	}
	.reco-service div .reco-lead {
		display: block;
		padding: 0;
		margin-top: 15px;
	}
	.step .num-title {
		line-height: 1.5;
		position: relative;
		padding-left: 50px;
		padding-top: 8px;
	}
	.step .num-title span {
		position: absolute;
		top: 0;
		left: 0;
		line-height: 1;
	}
	.reco-box .btn-contact a {
		width: 100%;
		height: auto;
		padding: 20px;
	}
}