@charset "utf-8";
/* CSS Document */
/* 201809 作成　*/
/* 20181015 改修　ver.1.1 */

/*-------------------
製品ページ　自社保管ページ用CSS
/contract/storage.asp
-------------------*/
h1 {
	font-size: 1.7em;
	font-weight: bold;
	color: #934b81;
	text-align: center;
}
h2 {
	margin-bottom: 40px;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
section {
	padding: 60px 0;
}

.contents {
	width: 90%;
	max-width: 64em;
	margin: auto;
	text-align: center;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	h1 {
		font-size: 2em;
	}
	h2 {
		font-size: 1.5em;
	}
	.contents {
		max-width: 48em;
	}
} 
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	.contents {
		max-width: 860px;
	}
}


/*-----------------
 *main_v
-----------------*/
.main_v {
	padding: 6.75em 0 1.75em;
	background: linear-gradient(#f2e6ef, #fff5fc);
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	.main_v {
		padding: 8em 0 2em;
	}
}


/*-----------------
 *sec-able
-----------------*/
#sec-able {
	background: url(/web/jp/contract/images/storage_able_bg.jpg) no-repeat;
	background-position: bottom right;
	background-size: 1300px;
}
#sec-able h2 {
	color: #934b81;
}
#sec-able .able .able_box {
	margin: 0 auto .65em;
	width: 192px;
	height: 192px;
	background: #fff;
	border: 1px solid #934b81;
	border-radius: 50%;
	box-shadow: 0 0 8px 2px #c69cbc inset;
	position: relative;
} 
#sec-able .able .able_box .able_box_wrap {
	margin: 0 auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 48%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
	text-align: center;
}
#sec-able .able .able_box img {
	margin-bottom: .9em;
	width: 30%;
}
#sec-able .able .able_box p {
	font-size: 1em;
	line-height: 1.4;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-able .able {
		display: inline-block;
	}
	#sec-able .able .able_box {
		float: left;
		margin: 0 .75em;
	}
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-able .able .able_box {
		margin: 0 1em;
		width: 240px;
		height: 240px;
	} 
	#sec-able .able .able_box img {
		margin-bottom: 1.25em;
	}
	#sec-able .able .able_box p {
		font-size: 1.25em;
	}
}
/* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
@media screen and (min-width:75em) {
	#sec-able {
		background-size: contain;
	}
}


/*-----------------
 *sec-cnv01 
-----------------*/
#sec-cnv01 {
	background-color: #f5f5f5;
	background-image: url(/web/jp/contract/images/contract_cnv_bg_ornament.png), url(/web/jp/contract/images/contract_cnv_bg_ornament.png);
	background-repeat: no-repeat, no-repeat;
	background-position: left top, right bottom;
	background-size: 190px;
}
#sec-cnv01,#sec-cnv02{
	padding: 60px 0 40px;
}
#sec-cnv01 .cnv01 {
	margin: 0 auto 1.25em;
	padding: 2em 1.25em 1.5em;
	background: #fff;
}
#sec-cnv01 .cnv01 h2 {
	font-size: 1.25em;
	margin-bottom: 20px;
}
#sec-cnv01 .note, #sec-cnv02 .note {
	margin: 0 auto;
	width: 100%;
}
#sec-cnv01 .note p, #sec-cnv02 .note p {
	margin-bottom: .9em;
	padding-left: 1em;
	font-size: .9em;
	color: #666;
	line-height: 1.4;
	/*text-align: left;*/
    text-indent: -1em;
}


/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-cnv01 {
		background-size: 220px;
	}
	#sec-cnv01 .cnv01 {
		width: 620px;
	} 	
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-cnv01 {
		background-size: 270px;
	}
	#sec-cnv01 .cnv01 {
		width: 720px;
	} 
	#sec-cnv01 .note, #sec-cnv02 .note {
		width: 82%;
	}
}

p.other-link{
	border-top: 1px solid #ccc;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	padding-top: 20px;
	margin-top: 30px;
}
p.other-link a{
	color: #2684e2;
    text-decoration: underline;
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	p.other-link a:hover{
		opacity: 0.8;
	}
}

/*-----------------
 *sec-faq　ファイルサーバ保管との違い
-----------------*/
#sec-faq {
	background: url(/web/jp/contract/images/storage_faq_bg.jpg) no-repeat;
	background-position: bottom left -40px;
	background-size: 1000px;
}
#sec-faq h2{
	margin-bottom: 20px;
}
#sec-faq p{
	color: #333;
	line-height: 1.5;
	margin-bottom: 40px;
}
#sec-faq p span{
	color: #666;
	font-size: 0.9em;
}
#sec-faq a{
	font-size: 1em;
	color: #2684e2;
    text-decoration: underline;
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-faq a{
		font-size: 1.25em;
	}
	#sec-faq a:hover{
		opacity: 0.8;
	}
}


/* ノートPC以上のサイズ 1200px(16×75em)~ lgサイズ */
@media screen and (min-width:75em) {
	#sec-faq {
		background-size: contain;
	}
}


/*-----------------
 *sec-step　ステップ
-----------------*/
#sec-step {
	background-color: #e8f7ff;
}
#sec-step .txt_area {
	margin-bottom: 20px;
}
#sec-step .txt_area h3 .step {
	margin-bottom: 10px;
	font-size: .9em;
	font-weight: normal;
	color: #2d96d0;
	line-height: .8em;
	border-bottom: 1px solid #2d96d0;
	display: block;
}
#sec-step .txt_area h3 {
	margin-bottom: 20px;
	font-size: 1.25em;
	font-weight: bold;
}
#sec-step .txt_area p, #sec-step .txt_area span.note {
	line-height: 1.4;
}
#sec-step .txt_area span.note {
    margin-top: 1em;
    font-size: .9em;
    color: #666;
    display: inline-block;
}
#sec-step .img_area img {
	margin: 0 auto 0;
	width: 100%;
	border: 1px solid #ccc;
}
#sec-step .contents-full ul li {
	padding: 30px 0;
}
#sec-step .contents-full ul li:first-child {
	padding-top: 0;
}
#sec-step .contents-full ul li:last-child {
	padding-bottom: 0;
}
#sec-step .contents-full ul li.bg-color2 {
	background-color: #f4f9fb;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-step .contents {
		max-width: 48em;
	}
	#sec-step .txt_area {
	    margin-top: 30px;
		width: 40%;
		text-align: left;
    	float: left;
		position: relative;
	}
	#sec-step .txt_area h3 .step {
		border-bottom: none;
	}
	#sec-step .txt_area .line {
		width: 1px;
		background-color: #2d96d0;
		position: absolute;
		left: calc(50% - 41%);
	}
	#sec-step .contents-full ul li:first-child .txt_area .line {
		height: 168px;
		top: 105px;	
	}
	#sec-step .contents-full ul li:nth-of-type(2) .txt_area .line {
		height: 95px;
		top: 180px;	
	}
	#sec-step .img_area {
		width: 50%;
		float: right;
	}
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-step .contents {
		max-width: 860px;
	}
	#sec-step .contents-full ul li:first-child .txt_area .line {
		height: 222px;
	}
	#sec-step .contents-full ul li:nth-of-type(2) .txt_area .line {
		height: 146px;
	}
}


/*-----------------
 *sec-cnv02
-----------------*/
#sec-cnv02 {
	background: url(/web/jp/contract/images/contract_cnv_bg.jpg) no-repeat;
	background-size: cover;
	background-position: bottom center;
}
#sec-cnv02 h2{
	margin-bottom: 20px;
}
#sec-cnv02 .cnv02 {
	margin: 0 auto 1.25em;
	padding: 2.5em 1.25em 1.5em;
	background-color: rgba(255,255,255,0.75);
}
#sec-cnv02 .cnv02 .cnv_tx {
	margin-bottom: 1.25em;
	line-height: 1.6;
}


/*-----------------
事例エリア　20190402追加
-----------------*/
section#sec-case {
	padding-bottom: 30px;
}
#sec-case .contents {
    padding-top: 0;
}