@charset "utf-8";

/**
 *
 *  Case
 *
 */

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



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


/* メインビジュアル部分
--------------------------------*/

.mv-area{
	position:relative;
	overflow:hidden;
}
.mv-area .mv-inner{
	background:rgba(0,0,0,0.6);
	width:100%;
	padding:30px 25px;
	position:absolute;
	left:0;
	bottom:0;
}
.mv-area .mv-inner h2{
	font-size:32px;
	font-size:3.2rem;
	line-height:1.4;
	color:#FFF;
	text-shadow:1px 1px 1px rgba(54, 79, 120, 0.8);
	font-family: 'Noto Sans Japanese',"メイリオ";
	font-weight:750;
}
.mv-area .mv-inner h2.small{
	font-size:31px !important;
	font-size:3.1rem !important;
}
.company-area{
	padding:5px 0;
}
.company-area h3{
	display:table-cell;
	vertical-align:middle;
	padding:0 30px;
}
.company-area dl.company-name {
	display:table-cell;
	padding:15px 0;
}
.company-area dl.company-name dt{
	font-size:20px;
	font-size:2.0rem;
	font-weight:bold;
}
.company-area dl.company-name dt .small {
	font-size:17px !important;
	font-size:1.7rem !important;
}
.company-area dl.company-name dd{
	line-height:1.5;
}

.company-detail{
	background:#F9F9F9;
	width:922px;
	padding:25px 25px 15px;
	overflow:hidden;
	border:3px solid #EEE;
}
.company-detail dl{
	width:100%;
	overflow:hidden;
}
.company-detail dl.left-box,
.company-detail dl.right-box{
	width:45%;
	float:left;
}
.company-detail dl.right-box{
	width:55%;
}
.company-detail dt{
	background:#023B81;
	width:100px;
	height:23px;
	padding:0;
	color:#FFF;
	font-size:13px;
	font-size:1.3rem;
	line-height:22px;
	text-align:center;
	float:left;
	border-radius:0 30px 30px 0;
	-moz-border-radius:0 30px 30px 0;
	-webkit-border-radius:0 30px 30px 0;
	-ms-border-radius:0 30px 30px 0;
}
.company-detail dd{
	width:72.5%;
	padding:0 0 5px 5px;
	line-height:1.5;
	font-size:14px;
	font-size:1.4rem;
	float:left;
}
.company-detail dd+dt{
	clear:both;
}

.company-detail dd ul{
}
.company-detail dd li{
	text-indent:-1em;
	padding:0 0 0 1em;
	line-height:1.6;
}
.company-detail dd li:before{
	padding:0 0 0 1em;
	content:"・";
	display:inline-block;
}
.company-detail dd li a{
	color:#325271;
}


/* int-wrap
--------------------------------*/

.int-wrap{
	padding:20px 20px 0;
}
.int-wrap h4{
	padding:50px 0 30px;
	color:#023B81;
	font-size:30px;
	font-size:3.0rem;
	font-family: 'Noto Sans Japanese',"メイリオ";
	font-weight:800;
	line-height:1.5;
	clear:both;
}
.int-wrap p{
	padding:0 0 20px;
	font-size:16px;
	font-size:1.6rem;
	line-height:1.85;
}
.int-wrap p.notes{
	margin-top:5px;
	padding:20px 0 0;
	font-size:14px;
	font-size:1.4rem;
	border-top:1px solid #e5e5e5;
}
.int-wrap p.notes span{
	font-size:15px;
	font-size:1.5rem;
}
.int-wrap p.notes + .notes{
	margin-top:0;
	padding:5px 0 0;
	border-top:none;
}
.int-wrap p.notes.page-bottom {
	text-align:right;
	line-height:1.5;
}
.int-wrap p.notes + .page-bottom {
	padding:20px 0 0;
	border-top:1px solid #e5e5e5;
}
.int-wrap p.notes.page-bottom + .page-bottom {
	padding:0;
	border-top:none;
}

.int-wrap p + ul{
	margin-top:-20px;
	padding:10px 0 10px 5px;
}
.int-wrap p + ul li{
	padding-left:2em;
	text-indent:-2em;
	font-size:16px;
	font-size:1.6rem;
}
.int-wrap ul.border-list{
	margin:0 0 30px;
	padding:15px 10px;
	border:1px solid #D5D5D5;
}

.int-wrap figure{
	padding:15px 0;
}
.int-wrap figure.three{
	width:297px;
	height:auto;
	padding-right:15px;
}
.int-wrap figure.three img{
	width:297px;
	height:auto;
}
.int-wrap figure a img{
	width:928px;
	height:auto;
	border:5px solid #F5F5F5;
	opacity:1;
}
.int-wrap figure a:hover img{
	opacity:0.85;
	border:5px solid #e9e9e9;
}
.int-wrap figure figcaption{
	padding:5px 0;
	font-size:13px;
	font-size:1.3rem;
	text-align:left;
}
.int-wrap figure.left + p,
.int-wrap figure.right + p{
	padding-top:40px;
	clear:both;
}
.int-wrap figure.left img,
.int-wrap figure.right img{
	width:auto;
}

.int-wrap figure.around-right{
	width:50%;
	padding:0 0 20px 20px;
	float:right;
}
.int-wrap figure.around-left{
	width:50%;
	padding:0 20px 20px 0;
	float:left;
}

.int-credit{
	background:#F9F9F9;
	margin:20px 0;
	padding:20px;
	border:3px solid #EEE;
}
.int-credit p{
	padding:0;
	line-height:1.6;
	font-size:15px;
	font-size:1.5rem;
}

.pickup-txt{
	background:#FDFDFD;
	height:50px;
	margin:0 0 30px;
	padding:12px 60px 0;
	box-sizing:border-box;
	position:relative;
	border:1px solid #8DBEDC;
}
.pickup-txt:before{
	display:inline-block;
	content:"";
	background:#8DBEDC url(/rentalserver/case/images/icon_check.png) no-repeat center center;
	width:50px;
	height:50px;
	position:absolute;
	left:-1px;
	top:-1px;
}
.pickup-txt p{
	padding:0;
	font-size:15px;
	font-size:1.5rem;
	color:#2C3943;
}


/*----------------------------------------------------------------------
	Sec02
----------------------------------------------------------------------*/
#Sec02{
	background:#FAFAFA;
	padding: 30px 0 15px;
	border-top:2px solid #EEEEEE;
}
#Sec02 .sec-inner{
	text-align:center;
}

#Sec02 h5{
	background:url(/rentalserver/case/images/ttl_bottom.png) no-repeat center bottom;
	text-align:center;
	margin:0 0 25px;
	padding:0 0 7px;
	font-size:25px;
	font-size:2.5rem;
}

/* case-box
--------------------------------*/
.case-box{
	overflow:hidden;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.case-box dl{
	width:30%;
	margin-right:5%;
	box-sizing:border-box;
	vertical-align:top;
	position:relative;
}
.case-box dl:nth-of-type(3n+3) {
	margin-right:0;
}
.case-box dt{
	position:absolute;
	top:138px;
	line-height:1.2;
	font-size:15px;
	font-size:1.5rem;
	font-weight:bold;
	color:#444;
}
.case-box dd{
	padding:0 0 30px;
	line-height:1.4;
	font-size:14px;
	font-size:1.4rem;
	text-align:left;
	overflow:hidden;
}
.case-box dd a{
	color:#2c3a43;
	text-decoration:none;
}
.case-box dd a:hover{
	color:#1089c5;
	text-decoration:underline;
}
.case-box dd span{
	height:130px;
	margin:0 0 30px;
	box-sizing:border-box;
	display:block;
}
.case-box dd span:hover{
	opacity:0.85;
}

/* 各記事のイメージ（追加していく） */

.case-box dd span.int01{
	background:url(/rentalserver/case/images/intro01/img_int01_mv.png) no-repeat center top/cover;
}
.case-box dd span.int02{
	background:url(/rentalserver/case/images/intro02/img_int02_mv.png) no-repeat center top/cover;
}
.case-box dd span.int03{
	background:url(/rentalserver/case/images/intro03/img_int03_mv.png) no-repeat center top/cover;
}
.case-box dd span.int04{
	background:url(/rentalserver/case/images/intro04/img_int04_mv.png) no-repeat center top/cover;
}
.case-box dd span.int05{
	background:url(/rentalserver/case/images/intro05/img_int05_mv.png) no-repeat center top/cover;
}
.case-box dd span.int06{
	background:url(/rentalserver/case/images/intro06/img_int06_mv.png) no-repeat center top/cover;
}
.case-box dd span.int07{
	background:url(/rentalserver/case/images/intro07/img_int07_mv.png) no-repeat center top/cover;
}
.case-box dd span.int08{
	background:url(/rentalserver/case/images/intro08/img_int08_mv.png) no-repeat center top/cover;
}
.case-box dd span.int09{
	background:url(/rentalserver/case/images/intro09/img_int09_mv.png) no-repeat center top/cover;
}
.case-box dd span.int10{
	background:url(/rentalserver/case/images/intro10/img_int10_mv.png) no-repeat center top/cover;
}
.case-box dd span.int11{
	background:url(/rentalserver/case/images/intro11/img_int11_mv.png) no-repeat center top/cover;
}
.case-box dd span.int12{
	background:url(/rentalserver/case/images/intro12/img_int12_mv.png) no-repeat center top/cover;
}
.case-box dd span.int13{
	background:url(/rentalserver/case/images/intro13/img_int13_mv.png) no-repeat center top/cover;
}
.case-box dd span.int14{
	background:url(/rentalserver/case/images/intro14/img_int14_mv.png) no-repeat center top/cover;
}
.case-box dd span.int15{
	background:url(/rentalserver/case/images/intro15/img_int15_mv.png) no-repeat center top/cover;
}
.case-box dd span.int16{
	background:url(/rentalserver/case/images/intro16/img_int16_mv.png) no-repeat center top/cover;
}

/* 各記事のタグ */
.case-box dd.tag{
	margin:0;
	padding:0;
}
.case-box dd.tag span{
	display: inline-block;
	height:auto;
	margin:0;
	padding:3px 15px;
	line-height: 1.0;
	font-size:12px;
	font-size:1.2rem;
	color: #FFF;
	font-weight:normal;
	border-radius:30px;
	box-sizing:border-box;
}

.case-box dd.tag span.aossl{
	background:#CB972D;
}
.case-box dd.tag span.mail-secu{
	background:#DF8078;
}
.case-box dd.tag span.cost{
	background:#00A5D7;
}
.case-box dd.tag span.cdn{
	background:#26AD6B;
}
.case-box dd.tag span.opt{
	background:#2F6EDF;
}
.case-box dd.tag span.ap{
	background:#6D4590;
}


/*----------------------------------------------------------------------
	Sec_CV
----------------------------------------------------------------------*/
#Sec_CV{
	background: url(/rentalserver/shared/images/info_bg.jpg) no-repeat 50% 0;
	padding:20px 0;
	border-top:2px solid #EEEEEE;
}
#Sec_CV h5{
	background:url(/rentalserver/case/images/ttl_bottom.png) no-repeat center bottom;
	margin:0;
	padding:0 0 7px;
	text-align:center;
	font-size:25px;
	font-size:2.5rem;
}

/* contact-box
--------------------------------*/
.contact-box{
	padding:20px 0;
	width:800px;
	margin:0 auto;
}
.contact-box strong{
	margin-bottom:5px;
	line-height:1.6;
	color:#004381;
	font-size:16px;
	font-size:1.6rem;
	display:block;
}
.contact-box .btn-contact{
	float:left;
}
.contact-box .btn-contact a{
	width:390px;
}

.contact-box .btn-contact a.blank {
	background-position: 230px center;
}

.contact-box .btn-contact+.btn-contact a{
	margin-left:20px;
	line-height:1.25;
	font-size:16px;
	font-size:1.6rem;
}

.contact-box .btn-contact a:before{
	margin-left:-30px;
}

.contact-box .btn-contact.navy a{
	background-color:#004381 !important;
	box-shadow:2px 2px 0 #00284d;
}
.contact-box .btn-contact.navy a:hover{
	background-color:#023565 !important;
}


/* FS事例の場合(.fs)
--------------------------------*/
#Sec_CV.fs{
	padding-top:30px;
}
#Sec_CV.fs .contact-box{
	width:1000px;
	padding:20px 0;
	margin:0 auto;
	line-height:1.6;
	color:#004381;
	font-size:17px;
	font-size:1.7rem;
}

#Sec_CV.fs .contact-box ul.fs-list{
	overflow:hidden;
	padding:0 120px;
	margin:0 0 30px;
}
#Sec_CV.fs .contact-box ul.fs-list li{
	width:372px;
	height:74px;
	font-size:16px;
	font-size:1.6rem;
	color:#004381;
	border:2px solid #004381;
	box-sizing:border-box;
	float:left;
}
#Sec_CV.fs .contact-box ul.fs-list li + li{
	margin-left:10px;
}
#Sec_CV.fs .contact-box ul.fs-list li span.num{
	display:inline-block;
	padding:8px 15px 15px 8px;
	margin-right:15px;
	font-size:36px;
	font-size:3.6rem;
	font-style:oblique;
	border-right:2px solid #004381;
	float:left;
}
#Sec_CV.fs .contact-box ul.fs-list li span.txt{
	padding:15px 0;
	line-height:1.35;
	float:left;
}
#Sec_CV.fs .contact-box .btn-contact{
	float:inherit;
}
#Sec_CV.fs .contact-box .btn-contact a{
	font-size:16px;
}

/*----------------------------------------------------------------------------------------------------
	for タブレット（1039px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 1039px) {
	.mv-area .mv-inner h2,
	.mv-area .mv-inner h2.small {
		font-size: 2.8rem!important;
	}
	.company-detail {
		width: 100%;
		box-sizing: border-box;
	}
	.company-detail dd + dt {
		margin-top: 15px;
	}
	.int-wrap figure {
		float: none;
		text-align: center;
	}
	.int-wrap figure figcaption {
		text-align: center;
	}
	.int-wrap figure.three {
		margin: 0 auto;
		width: auto;
		padding-right: 0;
	}
	.int-credit {
		word-break: break-all;
	}
}
/*----------------------------------------------------------------------------------------------------
	for SP（768px以下）
-----------------------------------------------------------------------------------------------------*/
@media (max-width: 768px) {
	.case-box dd.tag {
		padding-bottom: 10px;
	}
	.mv-area .mv-inner {
		padding: 20px;
		box-sizing: border-box;
		position: static;
		background: #333;
	}
	.mv-area .mv-inner h2,
	.mv-area .mv-inner h2.small {
		font-size: 1.6rem!important;
	}
	.company-area h3 {
		display: block;
		text-align: center;
	}
	.company-area dl.company-name {
		display: block;
		padding-top: 0;
	}
	.company-area dl.company-name dt {
		line-height: 1.2;
		margin-bottom: 10px;
	}
	.company-detail {
		padding: 25px 15px 15px;
	}
	.company-detail dl.left-box,
	.company-detail dl.right-box,
	.company-detail dd {
		width: 100%;
		display: block;
	}
	.company-detail dt {
		margin-top: 15px;
	}
	.company-detail dl:first-of-type dt:first-of-type {
		margin-top: 0;
	}
	.int-wrap {
		padding: 0;
	}
	.int-wrap h4 {
		font-size: 1.8rem;
		padding-bottom: 20px;
	}
	.int-wrap figure.around-right,
	.int-wrap figure.around-left {
		float: none;
		width: auto;
		padding-left: 0;
	}
	.case-box dl {
		width: 100%;
		margin: 0;
	}
	.case-box dd span {
		max-width: 400px;
		margin: 0 auto 30px;
	}
	.int-wrap p.notes.page-bottom {
		font-size: 1.3rem;
		text-align: left;
	}
}