@charset "utf-8";

/**
 *
 *  SSLサーバー証明書　TOP
 *
 */

/*--------------------------------------------------------------------------
   overwrite
---------------------------------------------------------------------------*/

.sec-inner{
	position:relative;
}



/*----------------------------------------------------------------------
	導入部分
----------------------------------------------------------------------*/

/*
.right-cont h2.lead{
	font-size:25px;
	font-size:2.5rem;
	color:#2C3943;
	font-weight:normal;
	line-height:1.0;
}
.right-cont h2.lead span{
	color:#00437F;
	margin:0 -8px;
}

.right-cont h2.lead + p{
	padding:20px 0 30px;
	line-height:1.6;
	font-size:15px;
	font-size:1.5rem;
	word-break:break-all;
}
*/

/*----------------------------------------------------------------------
	Sec01
----------------------------------------------------------------------*/
#Sec01{
	padding:0 0 20px;
}

.ssl-mv {
	display:block;
	overflow:hidden;
	position:relative;
	width:100%;
	background: #fff url("/rentalserver/option/ssl/images/main.png") repeat-y scroll 0 0;
}
.ssl-mv h2 {
	color:#3B494C;
	font-size:22px;
	font-size:2.2rem;
	font-weight:normal;
	line-height:1.3;
	margin:30px;
}
.ssl-mv h2 span{
	display:block;
	font-size:37px;
	font-size:3.7rem;
	font-weight:bold;
	margin-top:20px;
}

.ssl-mv dl{
	overflow:hidden;
	width:480px;
	margin:0 0 10px;
}
.ssl-mv dt{
	float:left;
	margin:4px 0 0;
	padding-left:30px;
}
.ssl-mv dd{
	float:right;
}
.ssl-mv dd .btn a{
	display:block;
	background:#FFF;
	min-width:220px;
	max-height:34px;
	padding:2px 0 0;
	text-align:center;
	font-size:15px;
	font-size:1.5rem;
	font-weight:normal;
	color:#454545;
	box-sizing:border-box;
	border-radius:5px;
	border:2px solid #FFA300;
	text-decoration:none;
	transition:all 0.2s ease;
}
.ssl-mv dd .btn a.blank{
	background:#FFF url(/rentalserver/shared/images/ico_blank02.png) no-repeat right 30px center;
}
.ssl-mv dd .btn a:hover,
.ssl-mv dd .btn a.blank:hover{
	background-color:#FFF2DB;
	border-color:#FF7542;
}


.ssl-class{
	background:#FF7542;
	overflow:hidden;
	margin:0 0 30px;
}
.ssl-class h5{
	padding:20px 0 20px 20px;
	line-height:1.2;
	font-size:17px;
	font-size:1.7rem;
	font-weight:bold;
	color:#FFF;
	float:left;
}
.ssl-class ul{
	background:#FFF;
	width:500px;
	margin:10px 10px 10px 0;
	padding:10px;
	line-height:1.2;
	font-size:15px;
	font-size:1.5rem;
	color:#3B494C;
	overflow:hidden;
	float:right;
	box-sizing:border-box;
}
.ssl-class li{
	float:left;
	margin-left:30px;
}
.ssl-class .left{
	padding-right:8px;
}
.ssl-class .left + .left{
	padding:3px 0 0;
	letter-spacing:-0.01em;
}
.ssl-class .left b{
	display:block;
}


#Ornament{
	min-height:170px;
	padding:25px 0 0 40px;
}
#Ornament .left a{
	background:#FFF;
	display:block;
	width:230px;
	height:64px;
	margin-right:20px;
	padding:20px 0;
	text-align:center;
	border:2px solid #D5D5D5;
	transition:all 0.2s ease;
}
#Ornament .left a:hover{
	background:#F3F3F3;
	opacity:0.85;
}
#Ornament h4{
	line-height:1.4;
	text-align:left;
	font-size:20px;
	font-size:2.0rem;
	font-weight:normal;
	color:#444;
}
#Ornament h4 b{
	color:#00AA47;
}
#Ornament .btn {
	margin:10px 40px 0 0;
}
#Ornament .btn a{
	display:block;
	background:#444 url(/rentalserver/shared/images/ico_arw04_white.png) no-repeat 15px center;
	width:150px;
	min-height:24px;
	padding:5px;
	text-indent:1.5em;
	line-height:24px;
	font-size:13px;
	font-size:1.3rem;
	color:#FFF;
	border-radius:4px;
	text-decoration:none;
	float:right;
	transition:all 0.2s ease;
}
#Ornament .btn a:hover{
	opacity:0.85;
}



/*----------------------------------------------------------------------
	Reco
----------------------------------------------------------------------*/
#Reco{
	padding:0 0 15px;
}

#Reco h3{
    background: rgba(0, 0, 0, 0) url("/rentalserver/shared/images/ttl_sub_bg.png") repeat-x scroll 0 50%;
    margin: 25px 0;
    text-align: center;
    color: #444;
    font-size: 26px;
    font-size: 2.6rem;
	font-weight:normal;
}
#Reco h3 span{
    background:#FFF none repeat scroll 0 0;
    padding:0 20px;
	margin-left:-10px;
}

#Reco .float-box{
	width:640px;
	margin:0 auto 15px;
	overflow:hidden;
}
.float-box .left{
}
.float-box .right{
	width:320px;
	line-height:1.5;
	font-size:15px;
	font-size:1.5rem;
	text-align:left !important;
}

/* .pickup-list
--------------------------------------------------*/
#Reco ul.pickup-list{
	margin-right:-17px;
	padding:0 0 20px;
	font-size:0;
}
#Reco ul.pickup-list > li{
	display:inline-block;
	margin-right:16px;
	font-size:15px;
	font-size:1.5rem;
	line-height:1.5;
	text-align:center;
	border:3px solid #3A7AD1;
	vertical-align:top;
	position:relative;
	transition:linear 0.25s;
}
#Reco ul.pickup-list > li:last-child{
	border:3px solid #75ACEA;
}
/*
#Reco ul.pickup-list > li:first-child:after{
	display:block;
	content:"";
	background:url(/rentalserver/option/ssl/images/img_pickup.png) no-repeat right top;
	width:100px;
	height:58px;
	position:absolute;
	right:-4px;
	top:-4px;
}
*/
#Reco ul.pickup-list > li:hover{
	border-color:#2A5693;
	opacity:0.65;
}
#Reco ul.pickup-list > li a{
	display:block;
	width:338px;
	min-height:170px;
	color:#444;
	text-decoration:none;
	box-sizing:border-box;
}
#Reco ul.pickup-list > li i{
	position:absolute;
	left:-3px;
	top:-3px;
}
#Reco ul.pickup-list p.head{
	padding:20px 0 10px;
}
#Reco ul.pickup-list li p.band{
	background:#3A7AD1;
	color:#FFF;
	line-height:1.0;
	font-size:13px;
	font-size:1.3rem;
	padding:12px 0 10px;
}
#Reco ul.pickup-list li:last-child p.band{
	background:#75ACEA;
}
#Reco ul.pickup-list li p.price{
	width:100%;
	line-height:1.2;
	font-size:15px;
	font-size:1.5rem;
	position:absolute;
	bottom:0;
}
#Reco ul.pickup-list li p.price b{
	color:#3979D1;
	padding-left:3px;
	font-size:20px;
	font-size:2.0rem;
	vertical-align:baseline;
}
#Reco ul.pickup-list li p.price b span{
	font-size:28px;
	font-size:2.8rem;
	display:inline-block;
}

/* .reco-list
--------------------------------------------------*/
#Reco ul.reco-list{
	margin-right:-11px;
	padding:0 0 20px;
	font-size:0;
}
#Reco ul.reco-list > li{
	display:inline-block;
	background:#F3F7FC;
	margin-right:10px;
	font-size:15px;
	font-size:1.5rem;
	line-height:1.5;
	text-align:center;
	border:3px solid #A9BFD6;
	vertical-align:top;
	position:relative;
	transition:linear 0.25s;
}
#Reco ul.reco-list > li:hover{
	border-color:#3A7AD1;
	opacity:0.7;
}
#Reco ul.reco-list > li a{
	display:block;
	width:222px;
	min-height:294px;
	color:#2A5693;
	text-decoration:none;
}
#Reco ul.reco-list > li i{
	position:absolute;
	left:-3px;
	top:-3px;
}
#Reco ul.reco-list p.head{
	padding:30px 0 20px;
	line-height:1.35;
	font-size:16px;
	font-size:1.6rem;
	font-weight:bold;
	letter-spacing:-0.01em;
}
#Reco ul.reco-list li p.band{
	background:#3A7AD1;
	color:#FFF;
	line-height:1.2;
	font-weight:bold;
	padding:12px 0 10px;
}
#Reco ul.reco-list li ul{
	padding:15px 15px 0;
	text-align:left;
}
#Reco ul.reco-list li li{
	color:#444;
	font-size:14px;
	font-size:1.4rem;
}
#Reco ul.reco-list li li:before{
	display:inline-block;
	content:"･";
	padding-right:5px;
}
#Reco ul.reco-list li p.price{
	width:100%;
	font-size:16px;
	font-size:1.6rem;
	color:#444;
	position:absolute;
	bottom:20px;
}
#Reco ul.reco-list li p.price b{
	padding-left:5px;
}

#Reco ul.reco-list li p.btn-border{
	background:#FCFCFC;
	width:186px;
	padding:2px 0;
	border:2px solid #CCD9E6;
	-ms-border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	border-radius:7px;
	position:absolute;
	left:18px;
	bottom:10px;
}

/* OVのあしらい
--------------------------------------------------*/
#Reco ul.reco-list li.reco-ov{
	background:#FEFAF1;
}
#Reco ul.reco-list li.reco-ov a{
	color:#AD770D;
}
#Reco ul.reco-list > li.reco-ov:hover{
	border-color:#F4A913;
}
#Reco ul.reco-list li.reco-ov p.band{
	background:#F4A913;
}

/* EVのあしらい
--------------------------------------------------*/
#Reco ul.reco-list li.reco-ev{
	background:#F0FAF8;
}
#Reco ul.reco-list li.reco-ev a{
	color:#017765;
}
#Reco ul.reco-list > li.reco-ev:hover{
	border-color:#00AA90;
}
#Reco ul.reco-list li.reco-ev p.band{
	background:#00AA90;
}
#Reco ul.reco-list li.reco-ev p.head{
	padding:30px 0 5px;
	line-height:1.2;
}

/* .brand-list
--------------------------------------------------*/
#Reco ul.brand-list{
	margin-right:-7px;
	font-size:0;
}
#Reco ul.brand-list li{
	display:inline-block;
	margin-right:6px;
	text-align:center;
	border:3px solid #BECEDE;
	vertical-align:top;
	position:relative;
	transition:linear 0.25s;
}
#Reco ul.brand-list li:hover{
	border-color:#2A5693;
	opacity:0.65;
}
#Reco ul.brand-list li a{
	display:block;
	width:130px;
	min-height:144px;
	color:#444;
	text-decoration:none;
}
#Reco ul.brand-list li:last-child a{
	width:272px;
}
#Reco ul.brand-list .logo{
	display:block;
	min-height:40px;
	padding:15px 0 10px;
}
#Reco ul.brand-list .logo img{
	vertical-align:middle;
}
#Reco ul.brand-list i{
	padding-right:2px;
	display:inline-block;
}
#Reco ul.brand-list i:last-child{
	padding-right:0;
}
#Reco ul.brand-list p.price{
	padding-top:15px;
	line-height:1.2;
	font-size:14px;
	font-size:1.4rem;
}
#Reco ul.brand-list p.price span{
	padding-left:5px;
}

#Reco ul.brand-list li:last-child div{
	width:135px;
}
#Reco ul.brand-list li:last-child .left{
	border-right:1px solid #A9BFD6;
}
#Reco ul.brand-list li:last-child .right{
}


/*----------------------------------------------------------------------
	Point
----------------------------------------------------------------------*/
#Point {
	padding:0 0 15px;
}
#Point h2 b {
	font-size:27px;
	font-size:2.7rem;
	color:#3979D1;
}
#Point .point-box{
	font-size:0;
	margin-right:-15px;
	padding:0 11px;
}
#Point .point-box p{
	display:inline-block;
	background:url(/rentalserver/option/ssl/images/bg_feature01.png) no-repeat 0 0;
	margin-right:14px;
	width:160px;
	height:142px;
	line-height:1.35;
	text-align:center;
	font-size:15px;
	font-size:1.5rem;
	font-weight:bold;
}
#Point .point-box p:nth-child(2){
	background:url(/rentalserver/option/ssl/images/bg_feature02.png) no-repeat 0 0;
}
#Point .point-box p:nth-child(3){
	background:url(/rentalserver/option/ssl/images/bg_feature03.png) no-repeat 0 0;
}
#Point .point-box p:nth-child(4){
	background:url(/rentalserver/option/ssl/images/bg_feature04.png) no-repeat 0 0;
}
#Point .point-box p span{
	display:block;
	margin-top:70px;
}
#Point .point-box p b{
	color:#3979D1;
}

/*----------------------------------------------------------------------
	Others
----------------------------------------------------------------------*/
#Others {
	overflow:hidden;
}

#Others .float-box{
	margin:0 0 30px;
	overflow:hidden;
}
#Others .float-box h4{
	display:inline-block;
	background:#DEE7EF;
	width:100%;
	min-height:40px;
	margin-bottom:30px;
	padding-left:20px;
	font-size:17px;
	font-size:1.7rem;
	line-height:40px;
	color:#00437F;
}
#Others .float-box .left,
#Others .case-box .left{
	width:220px;
	text-align:center;
}
#Others .float-box .right,
#Others .case-box .right{
	width:450px;
	padding-left:20px;
	line-height:1.5;
	font-size:15px;
	font-size:1.5rem;
	text-align:left !important;
}

#Others .case-box{
	margin:-10px 0 40px;
	padding:20px;
	overflow:hidden;
	border:1px solid #CCD9E6;
}
#Others .case-box img:hover{
	opacity:0.7;
}
#Others .case-box .right{
	width:390px;
}
#Others .case-box .right a{
	color:#444;
}

/*----------------------------------------------------------------------
	What
----------------------------------------------------------------------*/
#What {
	padding-bottom:70px !important;
}
#What p{
	line-height:1.5;
	font-size:15px;
	font-size:1.5rem;
}

#What .float-box{
	padding:30px 0 0;
	overflow:hidden;
}
#What .float-box div{
	width:342px;
	text-align:left !important;
}
#What .float-box h5{
	background:#CCD9E6;
}
#What .float-box p{
	padding-top:20px;
}
#What .float-box p a{
	color:#1087C5;
	font-weight:bold;
}
#What .float-box img:hover{
	opacity:0.7;
}

/*----------------------------------------------------------------------------------------------------
	for タブレット（1039px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1039px) {
	.ssl-mv {
		background-size: cover;
	}
}
/*----------------------------------------------------------------------------------------------------
	for SP（768px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
	.ssl-mv h2 {
		font-size: 1.8rem;
		margin-bottom: 15px;
		text-align: center;
	}
	.ssl-mv h2 span {
		font-size: 3.0rem;
		margin-top: 5px;
	}
	.ssl-mv dl {
		width: 90%;
		margin: 0 auto;
	}
	.ssl-mv dt {
		float: none;
		margin: 0;
		padding-left: 0;
		text-align: center;
	}
	.ssl-mv dd {
		float: none;
		margin-bottom: 10px;
	}
	.ssl-class ul {
		float: none;
		width: 95%;
		margin: 10px auto;
	}
	.ssl-class li {
		margin: 10px;
	}
	.ssl-class h5 {
		float: none;
		text-align: center;
		padding: 20px 0 0;
	}
	#Ornament {
		padding: 20px;
	}
	#Ornament .left {
		float: none;
	}
	#Ornament .left a {
		margin: 0 auto 10px;
	}
	#Ornament h4 {
		text-align: center;
		font-size: 1.5rem;
	}
	#Ornament .btn {
		margin-right: 0;
	}
	#Ornament .btn a {
		float: none;
		margin: 0 auto;
	}
	#Reco h3 span {
		padding: 0 10px;
		margin-left: 0;
	}
	#Reco ul.pickup-list {
		margin-right: 0;
		text-align: center;
	}
	#Reco ul.pickup-list > li {
		display: block;
		width: 300px;
		margin: 0 auto 10px;
	}
	#Reco ul.pickup-list > li a {
		width: 300px;
	}
	#Reco .float-box {
		width: 100%;
	}
	.float-box .left {
		float: none;
		text-align: center;
	}
	.float-box .right {
		float: none;
		width: 100%;
		text-align: center!important;
	}
	#Reco ul.reco-list {
		margin-right: 0;
	}
	#Reco ul.reco-list > li {
		display: block;
		margin-right: 0;
		margin-bottom: 10px;
	}
	#Reco ul.reco-list > li a {
		width: 100%;
	}
	#Reco ul.brand-list {
		margin-right: 0;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	#Reco ul.brand-list li {
		width: 100%;
		margin: 0 0 10px 0;
	}
	#Reco ul.brand-list li:nth-of-type(4) {
		width: 100%;
	}
	#Reco ul.brand-list li a {
		width: auto;
		padding: 10px;
		box-sizing: border-box;
	}
	#Reco ul.brand-list .logo {
		padding: 10px 0;
	}
	#Reco ul.brand-list li:last-child a {
		width: 100%;
	}
	#Reco ul.brand-list li:last-child div {
		width: 49%;
	}
	#Point .point-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
		box-sizing: border-box;
		padding: 0;
		margin-right: 0;
	}
	#Point .point-box p {
		width: 48%;
		max-width: 160px;
		margin: 1%;
		position: relative;
	}
	#Point .point-box p span {
		position: absolute;
		top: 2px;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		width: 100%;
	}
	#Others .float-box h4 {
		box-sizing: border-box;
		padding: 10px;
		line-height: 1.5;
	}
	#Others .float-box .left, #Others .case-box .left {
		float: none;
		margin: 0 auto 10px;
	}
	#Others .float-box .right, #Others .case-box .right {
		width: 100%;
		padding-left: 0;
	}
	#What .float-box div {
		width: 100%;
		margin: 0 auto 20px;
	}
}