@charset "UTF-8";

/* =======================================================================

CSSの名前：pdf_xchange_trial.css 

/ext/pdf_xchange_trial.xhtml

--------------------------------------------------------------------------*/
#jstore #main3 {clear:both;width:100%!important;background: #fff;box-sizing: border-box;}
#jstore #main3 .inner{clear:both;width: 1055px!important;margin:0 auto;padding:0!important;box-sizing: border-box;}
#jstore .red {color: #c80010;}
#jstore .small{font-size:75%;}
#jstore .bigTxt{font-size:120%;}
#jstore a:hover{text-decoration: none;}
#jstore #main3 #breadcrumbsline{width:1095px;margin:0 auto;}
.flex{display: flex;}
.pinkBg{background:#fcf4f4;}

.ttl{
	width:1055px;
	margin:20px auto 0;
	padding:0;}

#jstore #main3 h2 {
    text-align: center;
    font-size: 4.2em;
	padding: 90px 0 60px!important;
}

/* 利用事例
-------------------------------------------------------------*/	
.usageArea {
    width: 1050px;
    margin: 0 auto;
    padding: 0 0 80px;
}
.usageArea_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.usageArea_item {
    width: 490px;
    padding: 50px 25px;
    border-radius: 20px;
    box-shadow: 0 2px 14px rgb(0, 0, 0, 0.1);
	background: #fff;
}
.usageArea_item h3 {
    font-size: 2.6em;
    line-height: 1.4;
    text-align: center;
}
.usageArea_item img {
    display: block;
    width: 440px;
}
.usageArea_item h3 + img {
    margin-top: 20px;
}
.usageArea_item ul li {
    font-weight: bold;
    text-indent: -1em;
    padding-left: 1em;
}
.usageArea_item img + ul {
    margin-top: 20px;
}


/* ページ上部ボタン
-------------------------------------------------------------*/	
a.oneButtons_trial {
	display: block;
	width:655px;
	height: 130px; 
	margin: 60px auto 80px;
	padding: 32px 30px 0;
	background-color: #8D0007;
	border-radius: 65px;
	border:5px solid #8D0007;
	box-sizing: border-box;
	text-decoration: none;
	transition: 0.3s;
	font-weight: bold;
}
a.oneButtons_trial span.bt__text {
	display: block;
	position: relative;
	color: #fff;
	font-size:4.0em;
	text-align: center;
	padding-left: 0;
}
a.oneButtons_trial span.bt__text:before {
	content: '';
	width: 60px;
	height: 64px;
	background: #ffffff;
	border-radius: 50%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 5px;
	margin: auto;
}
a.oneButtons_trial span.bt__text:after {
	content: '\f061';
	font-family: "Font Awesome 5 Free";
	width: 0px;
	height: 0px;
	position: absolute;
	right: 47px;
	bottom: 60px;
	margin: auto;
	transition: 0.3s;
	color: #8D0007;
}
a.oneButtons_trial:hover {
	background-color: #e15f00;
}
a.oneButtons_trial:hover span.bt__text:after {
color: #e15f00;
}

/* ページ下部イングルードのボタン（2つ）
-------------------------------------------------------------*/	
#twoButtons {
    margin: 0 auto;
    width: 880px;
    padding: 115px 0 120px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#twoButtons a {
    display: block;
    width: 420px;
    padding: 60px 0;
    text-align: center;
    font-size: 2.4em;
    font-weight: bold;
    line-height: 1;
    color: #FFFFFF;
}
#twoButtons .twoButtons_ocument {
    background-color: #C6000B;
	border: 2px solid #C6000B;
    position: relative;

}
#twoButtons .twoButtons_ocument:hover {
    background-color: #e18f00;
}

#twoButtons .twoButtons_ocument::after {
    content: url(../images/detail/pdf_xchange_trial/icon_ocument.png);
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 41px;
    height: 42px;
}
#twoButtons .twoButtons_trial {
    background-color: #8D0007;
	border: 2px solid #8D0007;
    position: relative;
}
#twoButtons .twoButtons_trial:hover {
    background-color: #e15f00;
}
#twoButtons .twoButtons_trial::after {
    content: url(../images/detail/pdf_xchange_trial/icon_trial.png);
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 41px;
    height: 42px;
}

/* 機能エリア
-------------------------------------------------------------*/	
.kinouBox{width:335px;margin-right: 25px;}
.kinouBox:nth-of-type(3n){margin-right: 0;}
.border{border-style: solid;border-width: 2px;border-radius: 8px;padding:15px;margin: 70px 0 0 ;background: #fff;}
.kinouBox h3{font-size:2.6em;margin: 10px 0 25px;	position: relative;	font-size: 26px;}
.kinouBox h3::before {content: attr(data-number);display: inline-block;margin-right: 15px;padding-right: 10px; font-size: 20px;border-right-style: solid;border-right-width: 1px;}
.kinouBox ul{clear: both;margin-bottom: 20px;}
.kinouBox li{font-size: 1.5em;  position: relative;color:#000; padding: 0 0 5px 1.5em; margin: 0;}
.kinouBox ul li::before { position: absolute; left: 0; font-family: "Font Awesome 5 Free"; font-weight: 900; content: '\f00c';}

.kinouBox img{position:relative;top:20px;right:10px;}
.h01{height:290px;}
.h02{height:230px;}
.h03{height:250px;}


/* 機能カラー
-------------------------------------------------------------*/	
.color01{border-color:#e0ba14;color:#e0ba14;}
.color01 li::before{color: #e0ba14;}

.color02{border-color:#40a60a;color:#40a60a;}
.color02 li::before{color: #40a60a;}

.color03{border-color:#c6000b;color:#c6000b;}
.color03 li::before{color: #c6000b;}

.color04{border-color:#119fa5;color:#119fa5;}
.color04 li::before{color: #119fa5;}

.color05{border-color:#3c66f2;color:#3c66f2;}
.color05 li::before{color: #3c66f2;}

.color06{border-color:#1c9acf;color:#1c9acf;}
.color06 li::before{color: #1c9acf;}

.color07{border-color:#a7950a;color:#a7950a;}
.color07 li::before{color: #a7950a;}

.color08{border-color:#e85298;color:#e85298;}
.color08 li::before{color: #e85298;}

.color09{border-color:#999999;color:#999999;}
.color09 li::before{color: #999999;}