@charset "utf-8";

/**
 *
 *  user-support　- サポート体制
 *
 */

/*----------------------------------------------------------------------
	Titles
----------------------------------------------------------------------*/

.support-main-box {
	background: #fff url("/rentalserver/user-support/images/img_header.png") no-repeat right bottom -10px;
	padding: 0 0 20px;
}

.support-main h2,
.support-main h2 span {
	display:block;
	overflow:hidden;
	box-sizing:border-box;
}

.support-main h2 {
	margin:30px 0;
}

.support-main h2 span.h2-main {
	font-weight:normal;
	font-size:47px;
	font-size:4.7rem;
	text-indent:0;
	color:#013A80;
	line-height:1.2;
    margin: 0 0 5px;
}

.support-main h2 span.h2-main em {
	font-size:15px;
	font-size:1.5rem;
	color:#00397F;
	margin-bottom:20px;
	vertical-align: top;
	font-weight:normal;
}

.support-main h2 span.h2-sub {
	font-weight:bold;
	font-size:18px;
	font-size:1.8rem;
	text-indent:0;
	line-height:1.2;
	color:#fff;
	background-color:#20AEE5;
	text-align:center;
	letter-spacing:-0.15px;
	width:460px;
	padding:6px 0 5px;
	-ms-border-radius:20px;
	-moz-border-radius:20px;
	-webkit-border-radius:20px;
	border-radius:20px;
}

.ttl-type01 {
	font-weight:normal;
	font-size:30px;
	font-size:3rem;
	line-height:1.15;
}
.ttl-type01 span.support-real {
	padding:15px 40px 15px 130px;
	background: #fff url("/rentalserver/user-support/images/icon_real.png") no-repeat 45px 50%;
}
.ttl-type01 span.support-online {
	padding:15px 40px 15px 110px;
	background: #fff url("/rentalserver/user-support/images/icon_online.png") no-repeat 45px 50%;
	display:block;
	width:395px;
	margin:0 auto;
}
.ttl-type01 span.support-operation {
	padding:20px 40px 20px 125px;
	background: #fff url("/rentalserver/user-support/images/icon_operation.png") no-repeat 40px 50%;
}
.ttl-type01 span.support-knowledge {
	padding:15px 30px 15px 110px;
	background: #fff url("/rentalserver/user-support/images/icon_knowledge.png") no-repeat 20px 50%;
}

#Fn02.ttl-type01 {
	margin-bottom:0;
}
#Fn03.ttl-type01 {
	margin-top:50px;
}
#Fn04.ttl-type01 {
	margin-bottom:40px;
}
.ttl-type03 {
	text-align:left;
	font-size:18px;
	font-size:1.8rem;
	margin-top:20px;
	margin-bottom:20px;
}

/*----------------------------------------------------------------------
	Support
----------------------------------------------------------------------*/
.support-main {
	padding:0 0 50px;
}

.support-contact-box * {
	box-sizing:border-box;
}

.support-contact-box dl {
	width: 250px;
	margin: 0 auto;
}

.support-contact-new,
.support-contact-user {
	background-color:#eee;
	width:475px;
	text-align:center;
	display:block;
	overflow:hidden;
	padding:0;
}

.support-contact-new {
	float:left;
	padding-bottom:18px;
	height: 251px;
}

.support-contact-user {
	float:right;
}

.contact-header {
	color:#fff;
	font-size:20px;
	font-size:2rem;
	line-height:2.4;
	text-align:center;
	display:block;
	overflow:hidden;
	padding:0;
}
.contact-header span {
	font-weight:normal;
}
.support-contact-new .contact-header {
	background-color:#20AEE5;
	margin-bottom:15px;
}

.support-contact-new ul {
	width: 250px;
	margin: 25px auto 0;
}
.support-contact-new li {
	display:table-cell;
	font-size:16px;
	font-size:1.6rem;
	color:#455D6B;
	font-weight:bold;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left:80px;
	text-align:left;
	vertical-align:middle;
}

.contact-tel {
	background: rgba(0, 0, 0, 0) url("/rentalserver/shared/images/contact_tel.png") no-repeat scroll left 25px center;
}

.contact-form {
	background: rgba(0, 0, 0, 0) url("/rentalserver/shared/images/contact_form.png") no-repeat scroll left 25px center;
}

.support-contact-new dl dd {
	display:table-cell;
	font-size:14px;
	font-size:1.4rem;
	color:#455D6B;
	font-weight:normal;
	text-align:center;
	width:265px;
}

.support-contact-new .btn-portal{
	margin-top:10px;
}

.support-contact-new .btn-portal a {
	text-align:center;
	width:250px;
	font-size:17px;
	font-size:1.7rem;
	padding:22px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}
.support-contact-new .btn-portal a span {
	margin-left:-3px;
	font-size:12px;
	font-size:1.2rem;
	font-weight:normal;
	color:#fff;
	letter-spacing:-0.05em;
}
.support-contact-new .btn-portal a.blank {
	background-position : 230px;
}

.support-contact-new .btn-contact a::before {
	background-image:none;
	width:0;
}

.support-contact-new .btn-contact a.blank {
	background-position : 225px;
}

.support-contact-new .contact-main {
	font-size:25px;
	font-size:2.5rem;
	font-weight:bold;
	line-height:1.2;
}

.support-contact-new .contact-main a {
	color:#455D6B;
	text-decoration:none;
}

.support-contact-new .contact-main a em {
	color:#1FADE5;
}

.support-contact-user .contact-header {
	background-color:#023B81;
}

.support-contact-user ul {
	margin:15px auto 5px;
	padding-left:30px;
}


.support-contact-user ul li.btn-border {
	float:left;
	width:200px;
	line-height:1.1;
}

.support-contact-user ul li.btn-border a {
	display:block;
}

.support-contact-user ul li.btn-border a.blank {
	background-position: 96% center;
	padding-right:0;
}

.support-contact-user ul li.btn-border a:before {
	display:block;
	overflow:hidden;
	margin-bottom:-30px;
	width:25px;
	background:url("/rentalserver/shared/images/ico_arw04.png") no-repeat scroll 17px 10px;
	line-height:2;
}

.support-contact-user .btn-navy {
	margin:0 auto 20px;
	width:415px;
}

.support-contact-user .btn-navy a {
	font-size:18px;
	font-size:1.8rem;
}

.support-contact-user .btn-navy a.blank {
	background-position: 96% center;
}

.support-contact-user .btn-navy a.blank:hover {
	background-color:#003362;
}

.support-box{
	padding:0 0 10px;
}
.support-box dl{
	width:978px;
	margin:30px 0 0;
	padding:30px 0 5px;
	border-top:5px solid #E7EBEE;
	overflow:hidden;
}
.support-box dl:first-child{
	margin:0;
	border:none;
}
.support-box dt{
	background:#fff;
	width:350px;
	height:200px;
	text-indent:-9999px;
	line-height:150px;
	color:#FFF;
	font-weight:bold;
	font-size:30px;
	-ms-border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	float:left;
}
.support-box dl#Real dt{
	background:url("/rentalserver/user-support/images/img_real.png") no-repeat left top;
}

.support-box dl#Operation dt{
	background:url("/rentalserver/user-support/images/img_operation.png") no-repeat left top;
}

.support-box dl#Online dt{
	background:url("/rentalserver/user-support/images/img_online.png") no-repeat left top;
}

.support-box dd{
	width:570px;
	padding:0 0 0 50px;
	float:left;
}
.support-box dd p{
	line-height:1.8;
}
.support-box dd p.headline{
	padding:0 0 5px;
}
.support-box dd .headline:before{
	display:inline-block;
	content:"■";
	padding-right:3px;
}
.support-box dd .btn-border + p.headline{
	padding-top:20px;
}

.support-box .btn-border{
	width:240px;
	margin:0 0 -10px;
	padding:0 15px 0 0;
	line-height:3.2;
	display:inline-block;
}
.support-box .btn-border:nth-child(n+4){
	padding-top:10px;
}
.support-box .btn-border a span.ex{
	display:inline-block;
	background:#1DB37E;
	margin:0 0 1px 5px;
	padding:1px 5px;
	color:#FFF;
	font-weight:bold;
	font-size:10px;
	font-size:1.0rem;
	vertical-align:middle;
}

.support-box .btn-border a.blank {
    background: rgba(0, 0, 0, 0) url("/rentalserver/shared/images/ico_blank02.png") no-repeat scroll right 30px center;
	padding-right: 15px;
}

.support-box .btn-border a.blank:hover {
    background: #F2F6F9 url("/rentalserver/shared/images/ico_blank02.png") no-repeat scroll right 30px center;
}

.small {
	font-size: 13px;
	font-size: 1.3rem;
    line-height: 1.5;
    margin-left: 24px;
    text-indent: -26px;
}

.support-main-box .small {
    margin-left: 18px;
    text-indent: -18px;
}

ul li.btn-border {
	float:left;
	width:237px;
	margin-bottom:10px;
	margin-right:10px;
	line-height:1;
}

ul li.btn-border:nth-child(4n){
	margin-right:0px;
}

.bnr a:hover img {
	opacity:0.8;
}

/*----------------------------------------------------------------------------------------------------
	for タブレット（1039px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1039px) {
	.support-main-box {
		background: none;
	}
	.support-contact-box.cf {
		display: flex;
	}
	.support-contact-new {
		height: auto;
	}
	.support-contact-new, .support-contact-user {
		width: 49%;
		margin: 1%;
	}
	.support-contact-user ul {
		padding: 0;
		display: flex;
		justify-content: center;
	}
	.support-contact-user ul li.btn-border {
		width: 46%;
		margin: 1%;
	}
	.support-contact-user .btn-navy {
		width: 90%;
	}
	.support-box dl {
		width: 100%;
		display: flex;
	}
	ul.cf {
		display: flex;
		flex-wrap: wrap;
	}
	ul li.btn-border {
		width: 30%;
		margin: 1%;
	}
	ul li.btn-border:nth-child(4n) {
		margin: 1%;
	}
}
/*----------------------------------------------------------------------------------------------------
	for SP（768px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
	.support-main {
		padding: 0;
	}
	.support-main h2 span.h2-main {
		font-size: 3rem;
	}
	.support-main h2 span.h2-sub {
		width: 100%;
		max-width: 460px;
		font-size: 1.5rem;
		padding: 5px;
	}
	.support-contact-box.cf {
		display: block;
	}
	.support-contact-new, .support-contact-user {
		width: 100%;
		margin: 0 0 10px;
	}
	.support-contact-user ul li.btn-border a.blank {
		font-size: 1.3rem;
	}
	.ttl-type01 span.support-operation,
	.ttl-type01 span.support-knowledge {
		background-image: none;
		padding: 15px;
		font-size: 2.5rem;
	}
	.support-box dl {
		width: 100%;
		padding: 0;
		display: block;
	}
	.support-box dl#Operation dt {
		width: 100%;
		background-position: center top;
	}
	.support-box dd {
		width: 100%;
		padding: 0;
		margin-top: 15px;
	}
	ul li.btn-border {
		width: 100%;
	}
}