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

/*-------------------
製品ページ　電子契約ページ用CSS
/contract/contract.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/contract_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;
	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;
/*	2行以上の時は　text-align 表示　*/
/*	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%;
	}
}


/*-----------------
 *sec-step　ステップ
-----------------*/
#sec-step {
	background-color: #e8f7ff;
}
.txt_area {
	margin-bottom: 20px;
}
.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;
}
.txt_area h3 {
	margin-bottom: 20px;
	font-size: 1.25em;
	font-weight: bold;
}
.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;
	}
	.txt_area {
	    margin-top: 30px;
		width: 40%;
		text-align: left;
    	float: left;
		position: relative;
	}
	.txt_area h3 .step {
		border-bottom: none;
	}
	.txt_area .line {
		width: 1px;
		height: 180px;
		background-color: #2d96d0;
		position: absolute;
		bottom: -200px;
		left: calc(50% - 41%);
	}
	.img_area {
		width: 50%;
		float: right;
	}
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-step .contents {
		max-width: 860px;
	}
	.txt_area .line {
	    height: 230px;
	    bottom: -250px;
	}
}


/*-----------------
 *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 .cnv02 {
	margin: 0 auto 1.25em;
	padding: 2.5em 1.25em;
	background-color: rgba(255,255,255,0.75);
}
#sec-cnv02 .cnv02 .cnv_tx {
	margin-bottom: 1.25em;
	line-height: 1.6;
}
#sec-cnv02 h2{
	margin-bottom: 20px;
}


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

/*-----------------
どんな契約書が電子化できるの？　20190422追加
-----------------*/
#sec-what{
    width:90%;
    margin:0 auto;
}
#sec-what h2{
    height:3em;
    width:100%;
    line-height:3.2em;
    font-size:1.2em;
    font-weight:bold;
    color:#fff;
    width:100%;
    margin-bottom:0;
/* border-radius */
border-radius:8px 8px 0px 0px ;
/* border */
border:1px solid #934B81;
background:#934B81;
}
.what_contents{
    border:1px solid #934B81;
    border-top:none;
    width:100%;
    padding:2em 0 1.5em;
}
.what_contents p{
    text-align:center;
}
.example01 li,.example02 li{
    margin:0 auto;
    width:80%;
    height:50px;
    line-height:50px;
    text-align:center;
    font-size:0.8em;
}
.example01 li{
    border:1px solid #934B81;
}
.example02 li{
    border:1px solid #ccc;
}
.example01_title,.example02_title{
    font-size:20px;
}
.example01_title{
    font-weight:bold;
    margin-bottom:30px;
    color:#934B81;
}
.example02_title{
    margin:40px 0 10px;
}
.example01_read_txt{
    margin-bottom:50px;
}
.example02_read_txt{
    font-size:14px;
    color:#777;
    margin-bottom:14px;
}
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em){
    font-size:1.5em;
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
#sec-what{
    width:100%;
}
#sec-what h2{
    height:80px;
    font-size:24px;
    width:950px;
    margin:0 auto;
    position: relative;
    background:  #934B81;
    line-height:80px;
}
#sec-what h2 span{
    background:url("/web/jp/contract/images/contract_what_h2.png") 0 0 no-repeat;
    position: absolute;
    display:inline-block;
    width:84px;
    height:115px;
    top:-34px;
    left:697px;
}
.what_contents{
    width:948px;
    margin:0 auto;
    padding:50px 0 36px;
}
.example01,.example02{
    letter-spacing: -.4em;
    padding-left:66px;
}
.example01 li,.example02 li{
    display:inline-block;
    width:270px;
    height:50px;
    letter-spacing:normal;
    margin-right:4px;
    margin-bottom:4px;
    font-size:16px;
    line-height:50px;
}
.example01_title,.example02_title{
    font-size:20px;
}
.example01_title{
    font-weight:bold;
    margin-bottom:30px;
    color:#934B81;
}
.example02_title{
    margin:40px 0 10px;
}
.example01_read_txt{
    margin-bottom:50px;
}
.example02_read_txt{
    font-size:14px;
    color:#777;
    margin-bottom:14px;
}
}

/**/
#sec-what {
	padding-top: 7.5em;
	margin-top: -7.5em;
}