@charset "utf-8";
/* CSS Document */
/* 20181205 作成　ver.1.1 */

/*-------------------
製品ページ　スキャン費用10万円分サポート ページ用CSS
/contract/goldplan.asp
-------------------*/
h1 {
	font-size: 1.75em;
	line-height: 1.5em;
	font-weight: bold;
	color: #333;
	text-align: center;
}
h2 {
	color: #be9927;
	margin-bottom: 40px;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.4;
	text-align: center;
}
.contents {
	width: 90%;
	max-width: 64em;
	margin: auto;
	text-align: center;
}
.annotation{
	color: #666;
    font-size: 0.9em;
    line-height: 1.5em;
    margin-top: 0; 
}
.tx-mini{
	font-size: 0.9em;
}
/* タブレット縦サイズ 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) {
	h1 {
		font-size: 2.25em;
	    line-height: 2em;
	}
	.contents {
		max-width: 64em;
	}
}


/*-----------------
 *main_v
-----------------*/
.main_v {
	padding: 6.75em 0 1.75em;
	background-color: #fffcf2;
	background-image: url(/web/jp/contract/images/gold_main-bg_sp.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: top 20px center;
}
.main_v h1{
	margin-bottom: 20px;
}
h1 .h1-tx1{
	font-size: 20px;
	font-weight: normal;
	display: block;
	line-height: 1.5em;
    margin-bottom: 10px;
}
h1 .h1-gold{
	color: #be9927;
	font-weight: bold;
}
h1 .h1-tx2{
	font-size: 46px;
}
.main_v .cv_area{
	text-align: center;
	width: 100%;
	margin: 0 auto 10px;
    padding: 20px 0 10px;
	background-color: rgba(255,255,255,0.8);
	/*box-shadow: 0 0 0 1px #be9927 inset;*/
	border: 1px solid #be9927;
}
.main_v .cv_area p{
	line-height: 1.5;
	margin-bottom: 20px;
}
.main_v .tx-lead{
	font-size: 1.25em;
	font-weight: bold;
}
.main_v .annotation{
	text-align: left;
	max-width: 64em;
	text-indent: -1em;
    margin-left: 1em;
}
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	.main_v {
		background-image: url(/web/jp/contract/images/gold_main-bg_pc.png);
		background-position: top 40px center;
	}
}
	
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	.main_v {
		padding: 9.5em 0 2em;
		background-image: url(/web/jp/contract/images/gold_main-bg_pc.png);
		background-size: 1280px;
		background-position: top 40px center;
	}
	.main_v h1{
		margin-bottom: 10px;
	}
	h1 .h1-tx1{
	    font-size: 28px;
	}
	h1 .h1-tx2{
		font-size: 80px;
		display: inline-block;
		margin: 0 5px;
	}
	.main_v .cv_area{
	    padding: 30px 0;	
	}
	.main_v .tx-lead{
		font-size: 1.5em;
	}
}

/*-----------------
 *sec-condition 特典適用条件について
-----------------*/
#sec-condition{
	padding: 60px 0;
}
#sec-condition p{
	color: #333;
	font-weight: bold;
	font-size: 20px;
	margin-bottom: 20px;
}
#sec-condition table{
	width: 100%;
}
#sec-condition table th,#sec-condition table td{
	font-size: 0.9em;
	border: 1px solid #ccc;
	padding: 15px 8px 15px;
	text-align: left;
	line-height: 1.3;
}
#sec-condition table th{
	font-weight: bold;
	background-color: #f8f8f8;
	width: 25%;
}
#sec-condition table td{
	width: 75%;
}
#sec-condition table td p.caution{
	font-size: 1em;
	line-height: 1.3em;
	font-weight: normal;
	margin-bottom: 10px;
	text-indent: -0.9em;
    margin-left: 0.9em;
}
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-condition table th,#sec-condition table td{
		font-size: 1em;
	}
	#sec-condition table th{
		padding: 15px 20px;
	}
	#sec-condition table td{
		padding: 15px 20px;
	}
	#sec-condition table td p.caution{
		font-size: 1em;
		text-indent: -1em;
    	margin-left: 1em;
	}
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em) {
	#sec-condition table th{
		width: 20%;
	}
	#sec-condition table td{
		width: 80%;
	}
}

/*-----------------
 *sec-newplan 新登場！ゴールドプラン
-----------------*/
#sec-newplan{
	padding: 60px 0;
	background-color: #fffcf2;
}
#sec-newplan h2{
	background:url(/web/jp/contract/images/gold_plan-bg1.png) no-repeat, url(/web/jp/contract/images/gold_plan-bg2.png) no-repeat;
	background-position: left 0px center, right 0px center;
	width: 320px;
    margin: 0 auto 40px;
	background-size: 34px;
}
#sec-newplan .card{
	width: 90%;
	max-width: 680px;
	margin: 0 auto 60px;
	padding: 40px 5% 20px;
	background: #f6eac3; /* Old browsers */
	background:
		url(/web/jp/contract/images/gold_card-bg1.png) no-repeat, url(/web/jp/contract/images/gold_card-bg2.png) no-repeat,
		-moz-linear-gradient(top, #f6eac3 0%, #fffceb 50%, #f6eac3 100%)
	; /* FF3.6-15 */
	background: 
		url(/web/jp/contract/images/gold_card-bg1.png) no-repeat, url(/web/jp/contract/images/gold_card-bg2.png) no-repeat,
		-webkit-linear-gradient(top, #f6eac3 0%,#fffceb 50%,#f6eac3 100%)
	; /* Chrome10-25,Safari5.1-6 */
	background: 
		url(/web/jp/contract/images/gold_card-bg1.png) no-repeat, url(/web/jp/contract/images/gold_card-bg2.png) no-repeat,
		linear-gradient(to bottom, #f6eac3 0%,#fffceb 50%,#f6eac3 100%)
	; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    background-position: left bottom, right top;
}
#sec-newplan h3{
	color: #333;
	font-size: 1.25em;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: 20px;
}
#sec-newplan h3 span.price-tx{
    color: #be9927;
	font-size: 2em;
}
.card .usage-based{
	line-height: 1.5;
	margin-bottom: 30px;
}
.card .usage-based span{
	font-weight: bold;
}
.card .usage-based span.tx-mini{
	font-weight: normal;
}
.card .annotation{
	text-align: left;
}
.card .annotation:last-child{
	text-indent: -2em;
    margin-left: 2em;
}
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-newplan h2{
		background-position: left 0px center, right 0px center;
		width: 380px;
		margin: 0 auto 40px;
	}
	#sec-newplan h3 span{
		display: inline-block!important;
	}
	#sec-newplan .card{
		width: 96%;
		padding: 40px 2% 20px;
	}
	#sec-newplan h3 span.price-tx{
		font-size: 2.25em;
	    margin: 0 5px;
	}
}
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	#sec-newplan h3 span.price-tx{
		font-size: 2.75em;
	}
}

/*-----------------
 *sec-newplan .function 機能一覧
-----------------*/
#sec-newplan .function{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}

#sec-newplan h2.title-line{
	width: 100%;
	max-width: 600px;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	background: none;
}
h2.title-line:before, h2.title-line:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #be9927;
	display: block;
}
h2.title-line:before {
	margin-right: .4em;
}
h2.title-line:after {
	margin-left: .4em;
}
.function ul{
	margin-bottom: 6px;
}
.function ul li{
    font-size: 1em;
	text-align: left;
	line-height: 1.5em;
    padding: 0 5%;
    margin-bottom: 14px;
    width: 95%;
    float: left;
}
.function ul li span.icon {
    color: #be9927;
    margin: 3px 5px 0 0;
}
.function .annotation{
    text-align: left;
	text-indent: -2em;
    margin-left: 2em;
}
.function .annotation a{
	color: #2684e2;
    text-decoration: underline;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	.function ul li{
		padding: 0 0%;
	}
	.function ul li:nth-child(odd){
		width: 55%;
	}
	.function ul li:nth-child(even){
		width: 45%;
	}
}
/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em) {
	.function .annotation a:hover{
		opacity: 0.8;
	}
}

/*-----------------
 *sec-use サービス利用の流れ
-----------------*/
#sec-use{
	background-color: #fff;
}
#sec-use h2{
	color: #333;
}
#sec-use .contents{
	padding: 60px 0;
	max-width: 860px;
}
#sec-use dl{
	display: flex;
}
#sec-use .use01,#sec-use .use06{
	color: #be9927;
}
#sec-use .use01-txt,#sec-use .use06-txt{
	color: #be9927;
}
#sec-use ul li{
	width: 33%;
	float: left;
	margin-bottom: 20px;
    font-size: 0.9em;
}
#sec-use ul li p{
	color: #666;
	line-height: 1.25;
}
#sec-use ul li p span{
	color: #fff;
	font-size: 12px;
	background-color: #be9927;
	display: inline-block;
	padding: 2px 8px 1px;
	margin-bottom: 2px;
}
.use01,.use02,.use03,.use04,.use05,.use06{
	font-size: 0.9em;
	width: 80px;
	height: 70px;
	padding-top: 10px;
	background-size: 100%;
	margin: 0 auto 10px;
}
#sec-use .use01{
	background-image: url(/web/jp/contract/images/gold_use01.png);
}
#sec-use .use02{
	background-image: url(/web/jp/contract/docscan/images/doc_use02.png);
}
#sec-use .use03{
	background-image: url(/web/jp/contract/docscan/images/doc_use03.png);
}
#sec-use .use04{
	background-image: url(/web/jp/contract/docscan/images/doc_use04.png);
}
#sec-use .use05{
	background-image: url(/web/jp/contract/docscan/images/doc_use05.png);
}
#sec-use .use06{
	background-image: url(/web/jp/contract/images/gold_use06.png);
}
#sec-use p.merit-tx{
	margin-bottom: 40px;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em){
	#sec-use ul{
		background-image: url(/web/jp/contract/images/gold_use-bg.gif);
		background-position: center 35px;
		background-size: 68%;
	}
	#sec-use ul li{
		width: 16.6%;
		font-size: 1em;
	}
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
	#sec-use ul{
		background-size: 570px;
	}
}

/* 流れ以外 */
#sec-use .annotation{
	text-align: left;
    text-indent: -1em;
	margin: 0 0 6px;
	margin-left: 1em;
}

#sec-use .storage-link{
	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: 200px;
	padding: 40px 0;
	margin: 40px 0;
}
#sec-use .storage-link h3{
	color: #934b81;
	font-weight: bold;
	font-size: 1.5em;
	margin-bottom: 40px;
    padding: 0 20px;
}
#sec-use .storage-link h3 span{
	font-size: 16px;
	line-height: 1.5;
	display: block;
	margin-bottom: 10px;
}
#sec-use .storage-link p{
	margin-bottom: 10px;
	padding: 0 20px;
	line-height: 1.5;
}
#sec-use .storage-link a{
	color: #2684e2;
	text-decoration: underline;
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
	#sec-use .storage-link h3 span{
		font-size: 20px;
	}
	#sec-use .storage-link a:hover{
		opacity: 0.8;
	}
}

/*-----------------
 *コンバージョンボタン
-----------------*/
.cv_area{
	text-align: center;
}
.cv_area .cnv-btn{
	margin-bottom: 20px;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em){
	.campaign h3 span{
		font-size: 1.5em;
	}
}
.cnv-btn a{
	line-height: 1.25em;
	/*padding: 1.2em 1em 1.1em;*/
}
.cnv-btn a span.small{
	font-size: 0.75em;
}
.cnv-btn a span.small2{
	font-size: 0.75em;
}
.cv_area .cnv-btn_pr a,#sec-function .campaign .cnv-btn a{
	margin-bottom: 20px;
}
.cv_area .cnv-btn_pr a span.arrow_icon,#sec-function .campaign .cnv-btn a span.arrow_icon{
	vertical-align: middle;
    display: inline-block;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","MS PGothic","ＭＳ Ｐゴシック",sans-serif;
    font-size: 15px;
    height: 10px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 1em;
    margin: auto 0;
    line-height: 14px;
	font-weight: normal;
}
.cv_area .cnv-btn_pr a:last-child{
	margin-bottom: 0;
	background-color: #71a9c8;
}

/* タブレット縦サイズ 768px(16×48em)~ smサイズ */
@media screen and (min-width:48em){
	.cnv-btn{
		max-width: none; 
	}
	.cnv-btn a{
		padding: 1em 1em 0.85em;
	}
	.cnv-btn a span.small{
		font-size: 0.75em;
	}
	.cnv-btn a span.small2{
		font-size: 1em;
	}
	.cv_area .cnv-btn_pr a{
		float: left;
		width: 40.6%;
		margin-right: 3%;
		margin-bottom: 0;
	    line-height: 1.4;
    	padding: 0.65em 1em 0.5em;
	}
	.cv_area .cnv-btn_pr a:last-child{
		margin: 0;
	}
}

/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
	.section_lead{
		font-size: 1.5em;
	}
	.cnv-btn a{
		font-size: 1.5em;
	}
	.cv_area .cnv-btn,#sec-function .campaign .cnv-btn{
		max-width: 1000px;
	}
	.cv_area .cnv-btn_pr a span{
		font-size: 0.65em;
		font-weight: normal;
	}
	.cv_area .cnv-btn_pr a span.bold{
		font-size: 0.8em;
		font-weight: bold;
	}
	.cv_area .cnv-btn_pr a span.small2{
		font-size: 1em;
		font-weight: bold;
	}
	.main_v .cv_area p.cnv-btn{
		margin-bottom: 0;
	}
	.cv_area .cnv-btn_pr a{
		float: left;
		width: 42%;
		margin-right: 4%;
		margin-bottom: 0;
	    line-height: 1.4;
    	padding: 0.65em 1em 0.5em;
	}
	.cv_area .cnv-btn_pr a:last-child{
		margin: 0;
	}
	.cv_area .cnv-btn_pr a:last-child:hover{
		background-color: #8dbad2;
	}
	.cv_area .cnv-btn a:last-child::after,#sec-function .campaign .cnv-btn a:last-child::after{
		font-size: 1.5em;
	}
}
/*-----------------
 *sec-cnv02
-----------------*/
#sec-cnv02 {
	padding: 60px 0;
	background: url(/web/jp/contract/images/contract_cnv_bg.jpg) no-repeat;
	background-size: cover;
	background-position: bottom center;
}
#sec-cnv02 .cv_area {
	padding: 30px 0 10px;
    background-color: rgba(255,255,255,0.8);
}
#sec-cnv02 .cnv_tx {
	font-size: 1.25em;
	font-weight: bold;
	margin-bottom: 10px;
	line-height: 1.5;
}
/* タブレット横サイズ 1024px(16×64em)~ mdサイズ */
@media screen and (min-width:64em){
	#sec-cnv02 .cnv_tx {
		font-size: 1.5em;
	}
}
/*-----------------
事例エリア　20190402追加
-----------------*/
section#sec-case {
	padding: 60px 0 30px;
}
#sec-case .contents {
    padding-top: 0;
}
#sec-case h2 {
    color: #333;
}