@charset "UTF-8";
/*
Theme Name: Union Theme
Author: unionnet
Author URI: http://unionnet.jp
Version: 1.4
*/
.contactForm input, .contactForm textarea {
    padding: 10px 12px;
}

.form {padding-top:30px}
.ttl01 { margin-top: 40px;}

/*****************
アプリダウンロード施策エリア
*****************/
.dl_area  {
	background:#eee;
	padding: 30px 0;
    margin-bottom: 80px;
    margin-top: -80px;
}
.dl_area p {
    text-align: center;
    margin-bottom: 20px;
}
.dl_area h2 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 2.4rem;
}
.dl_area h2 span {
font-size: 3rem;
color: #d5000a;
}
.dl_area ul {
    display: flex;
    justify-content: space-evenly;
}
.dl_area ul li {
	width: 200px;
	text-align: center;
}

/*****************
180116商標
*****************/
.l-header.index_header .main_visual .main_l .spider span.trademark-main, .foot_cv_area .tel span.trademark,.fdl_area h2 span.trademark, .m-index .index_about h2 span.trademark, .dl_area h2 span.trademark, .lower_ttl h2 span.trademark, .flow_header .support_box .support_in .tel span.trademark, .trademark {
font-size:50%;color:#333;vertical-align:-webkit-baseline-middle;font-weight:nomal;display: inline-block;
}
.gnavi ul li a span.trademark,.cm .trademark, .m-about .ipad h2 span.trademark, .l-footer .foot_top a span.trademark {
color:#fff;
}

/*****************
Youutbe動画
*****************/
.main_r iframe { margin-right:40px;}
@media only screen and (max-width: 767px) {
iframe { width:100%;height:auto;margin-right:0px }
}
.popmake-content p { line-height:0px;padding:0;margin:0}

.making {
background:#222;
padding:5px;
color:#fff;
font-size:90%;
margin-right:40px;
}
@media only screen and (max-width: 767px) {
.making { margin-right:0px }
}
.making p {
padding:5px;
}
.making p span {
background:#d5000a;
padding:2px 4px;
margin:2px 10px;
}

.cm {
	background: url(https://spider-plus.com/common/img/header/index_header_bg_cm_bg.jpg) left top;
    background-size: cover;
    padding:30px 0px;
    margin-bottom:0px;
}
.cm .container h2, .cm .container p {
	color:#fff;
	margin:20px;
}
.cmbt {
	margin-top:40px;
	border: 1px solid #fff;
}
.cmbt a {
	color:#fff;
}

.orix {
	background: url(https://spider-plus.com/common/img/header/index_header_bg_orix_bg.jpg) left top;
    background-size: cover;
    padding:30px 0px;
    margin-bottom:0px;
}
.orix .container h2, .orix .container p {
	color:#fff;
	margin:20px;
}

/*****************
投稿詳細下部関連記事リストの文字数制限
*****************/
.post_list .post_box h3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
overflow: hidden;
}
.column_list div a h3 { overflow: hidden;text-overflow: ellipsis;white-space: nowrap; }

/*****************
フォーム関連追加CSS
*****************/
.l-main article:not(.m-index) p a { text-decoration:underline;color:#336699; }
.box01 { border:5px solid #ddd;padding:20px 20px 0px 20px;margin:60px 0 }
.box02 { border:5px solid #85c3e2;padding:20px 20px 0px 20px;margin:60px 0;background:#eaf6fc }
.dlbtn {
	border: 1px solid #d5000a;
    margin: 0 auto;
    text-align: center;
}
.dlbtn a {
	color: #d5000a;
	position: relative;
	display: block;
    padding: 10px;
}
.dlbtn a {
    moz-transition: all .3s ease;
    o-transition: all .3s ease;
    webkit-transition: all .3s ease;
    transition: all .3s ease;
}
.dlbtn a::after {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;
    right: 15px;
}
/*180124フォーム項目追加*/
.m-contact .contactForm td, .m-contact .contactForm th {
    min-width: 240px;
}
.m-contact .contactForm .any {
    padding: 3px 4px;
    color: #fafafa;
    font-size: 9px;
    letter-spacing: 1px;
    margin: 0 0 0 10px;
    line-height: 9px;
    border-radius: 3px;
    zoom: normal;
    background: #999;
}
.mwform-checkbox-field label, .mwform-radio-field label {
    display: inline-table;
}
.mw_wp_form .horizontal-item + .horizontal-item {
 margin-left:0px;
}

/*****************
180423申込みページ修正
*****************/
.functions_area .functions_box p {
    font-size: 1.6rem;line-height: 1.2;padding: 10px;
}
/*
.functions_area .functions_box h3 {
    margin-bottom: 0px;padding: 10px;text-align: center;font-size: 2.2rem;
}
 */
 /*****************
フォーム内開閉ボックス
*****************/
.btn03 { width: auto;border: 1px solid #ddd;padding: 10px;line-height: 5; }
/*ボックス全体*/
.accbox { margin: 2em 0;padding: 0;max-width: 100%;/*最大幅*/ }
/*ラベル*/
.accbox label { display: block;margin: 1.5px 0;padding : 11px 12px;color :#333;font-weight: bold;background :#ddd;cursor :pointer;transition: all 0.5s;}
.accbox li { font-size: 2em;color:#fff}
/*ラベルホバー時*/
.accbox label:hover { background :#85baef;}
/*チェックは隠す*/
.accbox input.cssacc { display: none;}
/*中身を非表示にしておく*/
.accbox .accshow { height: 0;padding: 0;overflow: hidden;opacity: 0;transition: 0.8s;}
/*クリックで中身表示*/
.cssacc:checked + .accshow { height: auto;padding: 5px;background: #eaeaea;opacity: 1;}

/*****************
cf7
*****************/
.contactform input.wpcf7c-conf,
.contactform textarea.wpcf7c-conf{
    border:0;
    padding:0;
    background:#fff;
}
.wpcf7 input[type="submit"]:hover {
box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}
input.wpcf7c-conf,
textarea.wpcf7c-conf {
  border: 0;
  padding: 0;
  background: #fff;
}
.wpcf7-text:-webkit-autofill {
  box-shadow: 0 0 0 1000px #fff inset;
}

span.wpcf7-not-valid-tip {
	display: none;
}
span.wpcf7-form-control-wrap {
	position: static;
}
.formError .formErrorContent {
	border: none;
	box-shadow: none;
}
.formError .formErrorArrow div {
	border-left: none;
	border-right: none;
	box-shadow: none;
}
@media only screen and (max-width: 767px) {
.contactForm input, .contactForm textarea { max-width: 90%;}
}
.wpcf7-submit, .wpcf7-confirm {
font-size: 1.7rem;
padding: 10px 25px;
    background: linear-gradient(to bottom,#d5000a,#a8040c);
color: #ffffff;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: solid 4px #dcdcdc;
}
.wpcf7-submit:hover {
    background:#fff;
color: #d5000a;
border:1px solid #d5000a;
}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
border: 2px solid #d5000a;
    padding: 10px;
    background: #fff7f7;
    text-align: center;
    color: #d5000a;
    font-weight: 700;
}
input.wpcf7c-conf,
textarea.wpcf7c-conf {
  border: 0;
  padding: 0;
  background: #fff;
}
.wpcf7c-conf {
  border: 0;
  padding: 0;
  background: #fff;
}
.wpcf7c-elm-step2 p { padding:10px 10px 10px 10px;font-size:120%;font-weight:700;text-align:center;border:5px solid #78bdf7;background-color: #e3f0fb;margin:120px 20px 20px 20px }

/*****************
アウトプットタヴァーン
*****************/
.m-column .post_ttl01 {
    background: #f6f6f6;border-left: 3px solid #106da1;padding: 15px 20px;margin-bottom: 40px;font-size: 2.4rem;
}
.m-column h2 span {
    color: #333;margin-left: 10px;
}

.functions_price table th span a { background: linear-gradient(to bottom,#098a8f,#267578);padding: 5px; color: #fff; position: relative;font-size:1.2rem;margin-left:10px}

/*****************
180502フォーム部追記
*****************/
.contactForm h3 { margin-bottom:20px }
.qno { background: #106da1;color: #fff;padding:0px 5px;margin: 0px 5px 5px 0px;font-size: 2.4rem; }
.ttl01 {line-height: 1.4;}

/*****************
180614ロゴ掲載
*****************/
.txt-r {text-align: right;
    font-size: 80%;
    margin-bottom: 0;}
.l-main ul.company_list {margin-bottom:0}
/*
.m-index .index_case .company_list { margin-top:20px;}
*/
.l-main .logo ul { margin-bottom: 0px;}
/*****************
180615大規模導入・セキュリティページ追加
*****************/
.introduction { margin: 80px 0px; }
.introduction h2, .introduction h3 { margin-bottom:2rem }
.introduction ul{list-style-type: disc;margin-left: 2%;margin-bottom: 40px;}
/*****************
180622フッター・リンク改修
*****************/
.i-Construction { text-align:center;margin-top:20px;font-size:80%}

/*****************
180627記事投稿内矢印、導入前・導入後リスト、タイトル
*****************/
@media screen and (min-width:240px) and ( max-width:768px) {
.arrow {
    display: inline-block;
    height: 40px;width: 30px;
    background-color: #5bc0de;
    position: relative;top: -30px;left: 150px;
}
.arrow:before {
    position: absolute;
    content: "";
    width: 0;height: 0;
    border: 40px solid transparent;
    border-left: 30px solid #5bc0de;
    left: 30px;top: -20px;
}
.arrow {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@media screen and (min-width:769px) {
.arrow {
display: inline-block;
    height: 40px;width: 90px;
    background-color: #5bc0de;
    position: relative;top: 240px;
}
.arrow:before {
    left: 30px;position: absolute;
    content: "";
    width: 0;height: 0;
    border: 40px solid transparent;
    border-left: 50px solid #5bc0de;
    left: 90px;top: -20px;
}
}

.post_ttl_usual{ background: #c6a016;color: #fff;padding: 5px 15px;margin-bottom: 20px; }
.post_ttl_introduction{ background: #106da1;color: #fff;padding: 5px 15px;margin-bottom: 20px; }
.list_usual li { background: #f9eec97a;padding: 5px 15px;margin-bottom: 10px;border: 2px solid #c6a016;font-weight: bold; }
.list_introduction li { background: #106da114;padding: 5px 15px;margin-bottom: 10px;border: 2px solid #106da1;font-weight: bold; }
.l-main .borderlist { margin:20px 0px 60px }
.borderlist li { padding: 5px 15px;margin-bottom: 10px;border: 1px solid #ddd;font-weight: bold; }
.borderlist li i { margin-right: 10px; }
/*****************
180629商標ページリスト
*****************/
.trademarkpage ul{ list-style-type: disc;padding-left: 2rem; }
.trademarkpage ul li { margin-bottom: 2rem; }
/*****************
180709豪雨災害復旧用無償ライセンス｜180713大規模導入・ホワイトペーパー｜180906北海道地震復旧用無償ライセンス
*****************/
.disaster-recovery {
	background: url(https://spider-plus.com/img/index/disaster-recovery_bg.jpg) left center;
    background-size: cover;padding:40px 0px;margin-bottom:0px;text-align: center;
}
.disaster-recovery02 {
	background: url(https://spider-plus.com/img/index/disaster-recovery02_bg.jpg) left center;
    background-size: cover;padding:50px 0px;margin-bottom:0px;text-align: center;
}
.large-scale {
	background: url(https://spider-plus.com/img/index/bg_large-scale.jpg) center top;
    background-size: cover;padding:30px 0px;margin-bottom:40px;text-align: center;
}
.whitepaper {
	background: url(https://spider-plus.com/img/index/bg_whitepaper.jpg) left top;
	background-size: cover;padding:30px 0px;margin-bottom:0px;text-align: center;
}
.l-main .disaster-recovery p a.recoveryform, .l-main .large-scale p a.large-scalebt {
    background: linear-gradient(to bottom,#0090d5,#047ba8);
    display: block;padding: 15px;color: #fff;position: relative;text-decoration: none;
max-width: 320px;margin: 0px auto;border:1px solid #0090d5;
}
.l-main .disaster-recovery02 p a.recoveryform {
    background: linear-gradient(to bottom,#00d59a,#04a891);
    display: block;padding: 15px;color: #fff;position: relative;text-decoration: none;
max-width: 320px;margin: 20px auto;border:1px solid #00d59a;
}
.l-main .disaster-recovery p a.recoveryform:hover, .l-main .large-scale p a.large-scalebt:hover {
    color: #0090d5;background:#fff;
}
.l-main .disaster-recovery02 p a.recoveryform:hover {
    color: #00d59a;background:#fff;
}
.l-main .whitepaper a.whitepaperbt:hover {
    opacity: .8;
}
.l-main .disaster-recovery p a.recoveryform, .l-main .large-scale p a.large-scalebt, {
    moz-transition: all .3s ease;
    o-transition: all .3s ease;
    webkit-transition: all .3s ease;
    transition: all .3s ease;
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    transition-delay: initial;
}
.l-main .disaster-recovery p a.recoveryform::after, .l-main .large-scale p a.large-scalebt::after, .l-main .disaster-recovery02 p a.recoveryform::after {
    content: "\f105";
    font-family: FontAwesome;
    position: absolute;right: 15px;
}
.l-main .disaster-recovery p, .l-main .large-scale p, .l-main .disaster-recovery02 p {margin-bottom: 20px;}
.l-main .disaster-recovery p a, .l-main .disaster-recovery02 p a { text-decoration: underline;}
/*****************
180731利用規約リスト
*****************/
.m-contract ol { padding-left: 2rem;}
.m-contract ol li {
    padding-bottom: 1rem;
    padding-left: 1rem;
}
/*****************
180824IT補助金
*****************/
.it-subsidies .hero { background:#20b19b;padding-top:40px}
.it-subsidies .hero p { text-align:center}
.it-subsidies .triangle{
	margin:0px auto 50px;width:50px;
  border-top: 50px solid #20b19b;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.it-subsidies .subsidies-h2 { font-size:3rem;color:#20b19b;padding-bottom:2rem; }
.it-subsidies p.sm { font-size:85% }
.it-subsidies p.subsidies-caution { margin: 80px auto;padding: 30px;border: 5px solid #20b19b;font-size: 3rem;width: 50%;color: #20b19b;text-align: center;font-weight: 600;min-width: 340px; }
.l-main .it-subsidies p a.bt-subsidies {
    background: #ffffff;display: block;padding: 15px;color: #20b19b;position: relative;text-decoration: none;max-width: 320px;margin: 0px auto;border: 1px solid #20b19b;font-weight: 600;
}
.l-main .it-subsidies p a.bt-subsidies:hover {
    color: #ffffff;background: #20b19b;border: 1px solid #ffffff;
}
.it-subsidies { margin: 0 0 0px; }

/*****************
180919オールインワンっぽさ
*****************/
.allinone {
    position: absolute;top: 180px;
}
/*****************
180926運用サポートページ追加
*****************/
.flow_header02 { background: url(../../../../img/flow/flow_img02.jpg) center top;
    text-shadow: #fff 0.5px 0.5px 0, #fff -0.5px -0.5px 0,/*右下、左上*/ #fff -0.5px 0.5px 0, #fff 0.5px -0.5px 0,/*右上、左下*/ #fff 0px 0.5px 0, #fff 0 -0.5px 0,/*右、左*/ #fff -0.5px 0 0, #fff 0.5px 0 0; }
@media screen and (min-width:769px) {
.flow_header02 { padding: 55px 65px;}
}
.flow_header02 .in { max-width: 560px; }
.flow_header02 .support_box { border: 1px solid #d5000a;background: #fff;padding: 30px; }
.flow_header02 .support_box .support_in .tel { font-weight: 700; flex: 3; }
.flow_header02 .support_box .support_in .time { flex: 2; font-size: 1.4rem; }
.flow_header02 h2 { margin-bottom: 35px;line-height: 1.5; }
.flow_header02 .support_box .support_in .tel span { display: block;color: #d5000a;font-family: "Roboto",sans-serif;font-size: 3.5rem; }
/*****************
181002 FAQ本文内リスト
*****************/
.list { list-style-type: disc;padding-left: 2rem;margin:20px 0px 60px 0px }
.list li {padding:0px 0px 20px 0px}


/*****************
181009 フォーム
*****************/
.check { display: inline-block;margin: 0 0 0 1em; }

/*****************
181109 建設イノベーションラボ
*****************/
.lab-circle{
  width: 160px;height: 160px;border-radius: 50%;background:#106da1;text-align:center;line-height: 160px;vertical-align: middle;color:#fff;font-weight:bold;font-size: 2.5rem;margin:10px auto;
}
.l-main .ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:1em;background: #f5faff;border: 1px solid #7aa5d0;margin-bottom:60px;
}
.ol li{
  position: relative;line-height: 1.5em;padding: 0.5em 0.5em 0.5em 40px;
}
.ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;background: #106da1;color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;font-size: 15px;border-radius: 50%;left: 0;width: 25px;height: 25px;line-height: 25px;text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}

.bluebox { border: 1px solid #7aa5d0;padding:10px 10px 0px 10px }

.exmple_list  { padding: 0; }
.exmple_list li {
  color: #404040;
  border-left: solid 6px orange;/*左側の線*/
  border-bottom: solid 2px #dadada;/*下に灰色線*/
  background: whitesmoke;
  margin-bottom: 5px;/*下のバーとの余白*/
  line-height: 1.5;
  padding: 0.5em;
  list-style-type: none!important;/*ポチ消す*/
  font-weight: bold;
}
.introduction h3.orange-back {
position: relative;padding:5px 13px 5px 21px;background: #fff0d9;font-size: 20px;text-align:center;margin: 2rem 0 2rem 0;
color: #2d2d2d;margin-left: -16.5px;line-height: 1.3;border-bottom: solid 3px orange;z-index:-2;
}
.orange-back:before {
position: absolute;content: '';left: -2px;top: -2px;width: 0;height: 0;border: none;
border-left: solid 40px white;border-bottom: solid 79px transparent;z-index: -1;
}
.orange-back:after {
position: absolute;content: '';right: -3px;top: -7px;width: 0;height: 0;border: none;
border-left: solid 40px transparent;border-bottom: solid 79px white;z-index: -1;
}
.cp_qa *, .cp_qa *:after, .cp_qa *:before {
	font-family: 'FontAwesome', sans-serif;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_qa dt,.cp_qa dd {
	position: relative;padding: 0.5em;box-shadow: 0px 1px 1px rgba(0,0,0,0.2);border-radius: 0.3em;
}
.cp_qa dt {
	margin:0 0em 0.5em 3em;background: #fff3e0;font-size: 2rem;font-weight: 600;
}
.cp_qa dd {
	margin:0 0em 2em 0em;background: #fafafa;
}
/* 吹き出し?? */
.cp_qa dt::before{
	position: absolute;z-index: 99;top: 0.5em;display: inline-block;width: 0;height: 0;content: '';border-style: solid;
}
/* 質問吹き出し?? */
.cp_qa dt::before {
	left: -0.5em;border-width: 5px 8.7px 5px 0;border-color: transparent #ffe0b2 transparent transparent;
}

/* ?!アイコン */
.cp_qa dt::after{
	font-size: 1.2em;position: absolute;top: 0;color: #ffffff;border-radius: 50%;display: inline-block;width: 1.5em;height: 1.5em;line-height: 1.2em;
}
/* ?アイコン */
.cp_qa dt::after {
	left: -2.5em;margin: 0 0.5em 0 0;padding: 0.2em 0.4em;content: '\f128';background: #f57c00;font-weight: normal;
}

/*****************
181113 運用サポートページ修正
*****************/
.flow_header {
    background: url(https://spider-plus.com/img/flow/flow_img01.jpg) right top;
    text-shadow: #fff 0.5px 0.5px 0, #fff -0.5px -0.5px 0,/*右下、左上*/ #fff -0.5px 0.5px 0, #fff 0.5px -0.5px 0,/*右上、左下*/ #fff 0px 0.5px 0, #fff 0 -0.5px 0,/*右、左*/ #fff -0.5px 0 0, #fff 0.5px 0 0;
}

/*****************
190514　トップメイン内ボタン修正
*****************/
.l-header.index_header .main_visual .main_l ul {
    display: inline;
}
.l-header.index_header .main_visual .main_l ul li {
    font-size: 2rem;width: 340px;margin-top: 10px;margin-left:0px;
}
.l-header.index_header .main_visual .main_l ul li a {
    padding: 20px;
}
@media screen and (min-width:769px) {
.l-header.index_header .main_visual .main_l ul li {
    font-size: 2.2rem;width: 520px;margin-top: 10px;margin-left:0px;
}
}

.caution {
background: orangered;padding: 10px;text-align: center;color: #fff;font-size: initial;
}
.caution a {color: lawngreen;text-decoration: underline;}

/*****************
190601 direct連携キャンペーン
*****************/

.direct .hero { background: #2DAFBB;padding: 20px; }
.direct .hero p { text-align:center}
.direct .triangle{
	margin:0px auto 30px;width:50px;
  border-top: 50px solid #2DAFBB;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
}
.direct h3 { letter-spacing:-1px; }
.direct h3 span { font-size:50%; }
.direct p.subsidies-caution a { display: block;margin: 60px auto;text-align: center;font-weight: 600;min-width: 340px;padding: 30px;border: 5px solid #2DAFBB;font-size: 3rem;width: 50%;color: #2DAFBB;text-decoration: none;}
.direct p.subsidies-caution a:hover { color: #ffffff;background: #2DAFBB; }

.flexbox div { }
a.direct-bt { background: #2DAFBB;display: block;padding: 15px;color: #ffffff;position: relative;text-decoration: none;max-width: 535px;margin: 0px auto;border: 3px solid #2DAFBB;font-weight: 600;;font-size: 3rem;text-align:center;line-height: normal;margin:60px auto;}
a.direct-bt:hover { color: #2DAFBB;background: #ffffff;border: 3px solid #2DAFBB;}
a.direct-bt span, a.direct-sp-bt span, a.sp-bt span { font-size:70%; }

a.direct-sp-bt { background: #d5000a;display: block;padding: 15px;color: #ffffff;position: relative;text-decoration: none;max-width: 535px;margin: 0px auto;border: 3px solid #d5000a;font-weight: 600;;font-size: 3rem;text-align:center;line-height: normal;margin:60px auto; }
a.direct-sp-bt:hover { color: #d5000a;background: #ffffff;border: 3px solid #d5000a;}

a.sp-bt { background: #106da1;display: block;padding: 15px;color: #ffffff;position: relative;text-decoration: none;max-width: 535px;margin: 0px auto;border: 3px solid #106da1;font-weight: 600;;font-size: 3rem;text-align:center;line-height: normal;margin:60px auto; }
a.sp-bt:hover { color: #106da1;background: #ffffff;border: 3px solid #106da1;}

.l-main .direct p a.bt-direct {
    background: #ffffff;display: block;padding: 15px;color: #2DAFBB;position: relative;text-decoration: none;max-width: 320px;margin: 0px auto;border: 1px solid #2DAFBB;font-weight: 600;
}
.l-main .direct p a.bt-direct:hover { color: #ffffff;background: #2DAFBB;border: 1px solid #ffffff;}
.m-index .direct { margin-top: -80px;}


/*****************
190612 オプションパック
*****************/
.l-header.index_header .main_visual .main_l ul li.optionpackage a {
    background: linear-gradient(to bottom,#167ac6,#205379);
}
.m-price .functions_price.option table th.op_ken { background:#f0fde9; }
.m-price .functions_price.option table th.op_el { background:#fdfce9; }
.m-price .functions_price.option table th.op_eq { background:#e9f1fd }
.op_ken a, .op_el a, .op_eq a {text-decoration: underline;color:#106da1;}

/*****************
190624 機能詳細Youtube
*****************/
.header_movie {
  position: relative;width: 100%;padding-top: 56.25%;
}
.header_movie iframe {
  position: absolute;top: 0;right: 0;width: 100% !important;height: 100% !important;
}
/*****************
190626 記事一覧ページ内記事BOXの高さを揃える
*****************/
.post_list {
display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:-moz-flex;display:flex;
-webkit-box-lines:multiple;-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;
flex-wrap:wrap;
}
/*****************
190627 連携一覧ページ
*****************/
.post table { table-layout: fixed;}
.post .cooperation table th { width:35% }
.post .cooperation table td { width:65% }
.cooperation p {text-align:center}
.cooperation p img {max-width:300px;height:auto}
/*****************
190729　地域別導入企業一覧
*****************/
.regional-users h2 { text-align: center;margin-bottom: 30px; }
.regional-users h2 span { font-size: 3.6rem;color: #d5000a; }

ul.jp_map { position: relative;list-style-type: none;margin: 0;padding: 0;box-sizing: border-box; }
ul.jp_map a {
	color: #00365d;
	text-shadow: #fff 2px 0px,#fff -2px 0px,#fff 0px -2px,#fff 0px 2px,#fff 2px 2px,#fff -2px 2px,#fff 2px -2px,#fff -2px -2px,#fff 1px 2px,#fff -1px 2px,#fff 1px -2px,#fff -1px -2px,#fff 2px 1px,#fff -2px 1px,#fff 2px -1px,#fff -2px -1px;text-decoration:none;
}
.jp_map li a { box-sizing: border-box;width: calc(50% - 6px);float: left;padding: 7px 0;border-radius: 10px;text-align: center;margin: 3px; }
.jp_map li a:hover { text-decoration: none;}

.jp_map li:nth-child(1) a { background-color: #00365d; }
.jp_map li:nth-child(1) a:hover { background: rgba(0,54,93,0.5); }

.jp_map li:nth-child(2) a, .jp_map li:nth-child(3) a, .jp_map li:nth-child(4) a, .jp_map li:nth-child(5) a, .jp_map li:nth-child(6) a, .jp_map li:nth-child(7) a { background-color: #004d84; }
.jp_map li:nth-child(2) a:hover, .jp_map li:nth-child(3) a:hover, .jp_map li:nth-child(4) a:hover, .jp_map li:nth-child(5) a:hover, .jp_map li:nth-child(6) a:hover, .jp_map li:nth-child(7) a:hover { background: rgba(0,77,132,0.5); }

.jp_map li:nth-child(8) a, .jp_map li:nth-child(9) a, .jp_map li:nth-child(10) a, .jp_map li:nth-child(11) a, .jp_map li:nth-child(12) a, .jp_map li:nth-child(13) a, .jp_map li:nth-child(14) a { background-color: #005da0; }
.jp_map li:nth-child(8) a:hover, .jp_map li:nth-child(9) a:hover, .jp_map li:nth-child(10) a:hover, .jp_map li:nth-child(11) a:hover, .jp_map li:nth-child(12) a:hover, .jp_map li:nth-child(13) a:hover, .jp_map li:nth-child(14) a:hover { background: rgba(0,93,160,0.5); }

.jp_map li:nth-child(15) a, .jp_map li:nth-child(16) a, .jp_map li:nth-child(17) a, .jp_map li:nth-child(18) a, .jp_map li:nth-child(19) a { background-color: #006bb7; }
.jp_map li:nth-child(20) a { height:20%;background-color: #006bb7; }
.jp_map li:nth-child(15) a:hover, .jp_map li:nth-child(16) a:hover, .jp_map li:nth-child(17) a:hover, .jp_map li:nth-child(18) a:hover, .jp_map li:nth-child(19) a:hover { background: rgba(0,107,183,0.5); }
.jp_map li:nth-child(20) a:hover { background: rgba(0,107,183,0.5); }

.jp_map li:nth-child(21) a, .jp_map li:nth-child(22) a, .jp_map li:nth-child(23) a, .jp_map li:nth-child(24) a { background-color: #0077cc; }
.jp_map li:nth-child(21) a:hover, .jp_map li:nth-child(22) a:hover, .jp_map li:nth-child(23) a:hover, .jp_map li:nth-child(24) a:hover { background: rgba(0,119,204,0.5); }

.jp_map li:nth-child(25) a, .jp_map li:nth-child(26) a, .jp_map li:nth-child(27) a, .jp_map li:nth-child(29) a, .jp_map li:nth-child(30) a { background-color: #4a9eda; }
.jp_map li:nth-child(28) a { height:20%;background-color: #4a9eda; }
.jp_map li:nth-child(25) a:hover, .jp_map li:nth-child(26) a:hover, .jp_map li:nth-child(27) a:hover, .jp_map li:nth-child(29) a:hover, .jp_map li:nth-child(30) a:hover { background: rgba(74,158,218,0.5); }
.jp_map li:nth-child(28) a:hover { background: rgba(74,158,218,0.5); }

.jp_map li:nth-child(31) a, .jp_map li:nth-child(32) a, .jp_map li:nth-child(33) a, .jp_map li:nth-child(34) a, .jp_map li:nth-child(35) a { background-color: #7db9e5 }
.jp_map li:nth-child(31) a:hover, .jp_map li:nth-child(32) a:hover, .jp_map li:nth-child(33) a:hover, .jp_map li:nth-child(34) a:hover, .jp_map li:nth-child(35) a:hover { background: rgba(125,185,229,0.5); }

.jp_map li:nth-child(36) a, .jp_map li:nth-child(37) a, .jp_map li:nth-child(38) a, .jp_map li:nth-child(39) a { background-color: #a5cfed }
.jp_map li:nth-child(36) a:hover, .jp_map li:nth-child(37) a:hover, .jp_map li:nth-child(38) a:hover, .jp_map li:nth-child(39) a:hover { background: rgba(165,207,237,0.5); }

.jp_map li:nth-child(40) a, .jp_map li:nth-child(41) a, .jp_map li:nth-child(42) a, .jp_map li:nth-child(43) a, .jp_map li:nth-child(44) a, .jp_map li:nth-child(45) a, .jp_map li:nth-child(46) a { background-color: #c6e1f3 }
.jp_map li:nth-child(40) a:hover, .jp_map li:nth-child(41) a:hover, .jp_map li:nth-child(42) a:hover, .jp_map li:nth-child(43) a:hover, .jp_map li:nth-child(44) a:hover, .jp_map li:nth-child(45) a:hover, .jp_map li:nth-child(46) a:hover { background: rgba(198,225,243,0.5); }

.jp_map li:nth-child(47) a { background-color: #e4f0f9 }
.jp_map li:nth-child(47) a:hover { background: rgba(228,240,249,0.5); }

@media screen and (min-width: 768px) {
ul.jp_map { padding: 84% 0 0; }
.jp_map li a { width: 7%;height: 10%;border: solid #ffffff 2px;box-sizing: border-box;padding: 7px 0;float: none;font-size: 14px;margin: 0; }
.jp_map li a:hover { text-decoration: none; }

.jp_map li:nth-child(1) a { position: absolute;top: 0; left: 85%;width: 15%;background-color: #00365d; }

.jp_map li:nth-child(2) a { position: absolute;top: 11%; left: 85%;width: 14%;height: 5.5%;background-color: #004d84; }
.jp_map li:nth-child(3) a { position: absolute;top: 16.5%; left: 92%;background-color: #004d84; }
.jp_map li:nth-child(4) a { position: absolute;top: 26.5%; left: 92%;background-color: #004d84; }
.jp_map li:nth-child(5) a { position: absolute;top: 16.5%; left: 85%;background-color: #004d84; }
.jp_map li:nth-child(6) a { position: absolute;top: 26.5%; left: 85%;background-color: #004d84; }
.jp_map li:nth-child(7) a { position: absolute;top: 36.5%; left: 92%;background-color: #004d84; }

.jp_map li:nth-child(8) a { position: absolute;top: 46.5%; left: 92%;background-color: #005da0; }
.jp_map li:nth-child(9) a { position: absolute;top: 46.5%; left: 85%;background-color: #005da0; }
.jp_map li:nth-child(10) a { position: absolute;top: 46.5%; left: 78%;background-color: #005da0; }
.jp_map li:nth-child(11) a { position: absolute;top: 56.5%; left: 85%;background-color: #005da0; }
.jp_map li:nth-child(12) a { position: absolute;top: 56.5%; left: 92%;background-color: #005da0; }
.jp_map li:nth-child(13) a { left: 85%;position: absolute;top: 66.5%;background-color: #005da0; }
.jp_map li:nth-child(14) a { left: 78%;position: absolute;top: 66.5%;background-color: #005da0; }

.jp_map li:nth-child(15) a { position: absolute;top: 36.5%; left: 78%;width: 14%;background-color: #006bb7; }
.jp_map li:nth-child(16) a { position: absolute;top: 36.5%; left: 71%;background-color: #006bb7; }
.jp_map li:nth-child(17) a { position: absolute;top: 36.5%; left: 64%;background-color: #006bb7; }
.jp_map li:nth-child(18) a { left: 64%;position: absolute;top: 46.5%;background-color: #006bb7; }
.jp_map li:nth-child(19) a { position: absolute;top: 56.5%; left: 78%;background-color: #006bb7; }
.jp_map li:nth-child(20) a { left: 71%;position: absolute;top: 46.5%;height: 20%;background-color: #006bb7; }

.jp_map li:nth-child(21) a { left: 64%;position: absolute;top: 56.5%;background-color: #0077cc; }
.jp_map li:nth-child(22) a { left: 71%;position: absolute;top: 66.5%;background-color: #0077cc; }
.jp_map li:nth-child(23) a { left: 64%;position: absolute;top: 66.5%;background-color: #0077cc; }
.jp_map li:nth-child(24) a { left: 57%;position: absolute;top: 66.5%;background-color: #0077cc; }

.jp_map li:nth-child(25) a { left: 57%;position: absolute;top: 46.5%;background-color: #4a9eda; }
.jp_map li:nth-child(26) a { left: 50%;position: absolute;top: 46.5%;background-color: #4a9eda; }
.jp_map li:nth-child(27) a { left: 50%;position: absolute;top: 56.5%;background-color: #4a9eda; }
.jp_map li:nth-child(28) a { left: 43%;position: absolute;top: 46.5%;height: 20%;background-color: #4a9eda; }
.jp_map li:nth-child(29) a { left: 57%;position: absolute;top: 56.5%;background-color: #4a9eda; }
.jp_map li:nth-child(30) a { left: 50%;position: absolute;top: 66.5%;background-color: #4a9eda; }

.jp_map li:nth-child(31) a { left: 36%;position: absolute;top: 46.5%;background-color: #7db9e5; }
.jp_map li:nth-child(32) a { left: 29%;position: absolute;top: 46.5%;background-color: #7db9e5; }
.jp_map li:nth-child(33) a { left: 36%;position: absolute;top: 56.5%;background-color: #7db9e5; }
.jp_map li:nth-child(34) a { left: 29%;position: absolute;top: 56.5%;background-color: #7db9e5; }
.jp_map li:nth-child(35) a { left: 22%;position: absolute;top: 51.5%;background-color: #7db9e5; }

.jp_map li:nth-child(36) a { left: 36%;position: absolute;top: 78.5%;background-color: #a5cfed; }
.jp_map li:nth-child(37) a { left: 36%;position: absolute;top: 68.5%;background-color: #a5cfed; }
.jp_map li:nth-child(38) a { left: 29%;position: absolute;top: 68.5%;background-color: #a5cfed; }
.jp_map li:nth-child(39) a { left: 29%;position: absolute;top: 78.5%;background-color: #a5cfed; }

.jp_map li:nth-child(40) a { left: 14%;position: absolute;top: 46.5%;background-color: #c6e1f3; }
.jp_map li:nth-child(41) a { left: 7%;position: absolute;top: 46.5%;background-color: #c6e1f3; }
.jp_map li:nth-child(42) a { left: 0;position: absolute;top: 46.5%;background-color: #c6e1f3; }
.jp_map li:nth-child(43) a { left: 7%;position: absolute;top: 56.5%;background-color: #c6e1f3; }
.jp_map li:nth-child(44) a { left: 14%;position: absolute;top: 56.5%;background-color: #c6e1f3; }
.jp_map li:nth-child(45) a { left: 14%;position: absolute;top: 66.5%;background-color: #c6e1f3; }
.jp_map li:nth-child(46) a { left: 7%;position: absolute;top: 66.5%;background-color: #c6e1f3; }

.jp_map li:nth-child(47) a { left: 0;position: absolute;top: 76.5%;background-color: #e4f0f9; }
}

/*****************
190729　業種別導入実績
*****************/
.btn05 { border: 1px solid #d5000a;margin: 5px auto;text-align: center; }
.btn05 a {
	color: #d5000a;position: relative;display: block;padding: 10px;
	-moz-transition: all .3s ease;
	-o-transition: all .3s ease;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}
.btn05 a:hover { background: #d5000a;color: #fff; }
/*****************
190802トップページ文字間ツメ
*****************/
.function_box p { letter-spacing: -1px; }

/*****************
190822トップヘッダーボタン追加
*****************/
.btn.btn06 { border: 1px solid #d5000a;background: #fff; }
.btn.btn06 a { color: #d5000a; }
.btn.btn06 a:hover { background: #d5000a;color: #fff; }
@media only screen and (max-width: 767px) {
.btn.btn06 { margin-top: 30px; }
}
/*****************
191112小文字→大文字
*****************/
.dl_area h2 span { font-size:2.4rem;}

/*****************
200115紹介フォーム
*****************/
input[type=text]:focus, textarea:focus { background: #fcffea; }
input::placeholder{ color:#ccc }
.m-contact .recommender_head {
    background: url(../../../../../img/contact/recommend_bg.jpg);
    background-size: cover;
    /*padding: 20px 60px;*/
}
.m-contact .recommender_head .contact_in {
    max-width: 575px;
    /*padding: 25px;*/
    background: rgba(255,255,255,.8);
}
.m-contact .recommender_head h2 {
    margin-bottom: 25px;
    font-size: 2.8rem;
}
.m-contact .recommender_head ul li {
    position: relative;
    padding-left: 25px;
}
.m-contact .recommender_head ul li::before {
    content: "\f14a";
    font-family: fontawesome;
    position: absolute;
    left: 0;
    color: #d5000a;
}
/*****************
200306ユーザーアンケート
*****************/
.osusume { display: flex;align-items:baseline;-webkit-justify-content: space-between;
    justify-content: space-between; }

.contactForm input[type=radio]:checked:after {
    display: block;position: absolute;
    top: 9px;left: 9px;content: "";width: 12px;height: 12px;
    background: #007aff;border-radius: 50%;
}
#form .contactForm input[type=checkbox] {
    vertical-align: top;
}
@media only screen and (max-width: 767px)
#form .m-contact .contactForm input[type=checkbox] {
    vertical-align: top;
}
#page .contactForm input[type=radio] {
    position: relative;
    -webkit-appearance: none;
    appearance: button;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;width: 30px;height: 30px;content: "";
    background-color: none;border: 1px solid #999;border-radius: 50%;
    box-shadow: none;vertical-align: unset;cursor: pointer;padding: 0px;
}
.contactForm input[type=radio]:checked:after { background:none; }
.contactForm table td, .contactForm table th {
    text-align: left;
    padding: 30px;
    border-bottom: 1px solid #ccc;
    font-size: 1.6rem;
}
.contactForm select { font-size: 1.6rem;padding:5px;margin-bottom: 1rem;}
@keyframes click-wave {
	0% {
		position: relative;width: 30px;height: 30px;opacity: 0.35;
	}
	100% {
		width: 200px;height: 200px;margin-top: -80px;margin-left: -80px;opacity: 0;
	}
}
.contactForm span label input {
	position: relative;top: 13.33333px;right: 0;bottom: 0;left: 0;
	width: 30px;height: 30px;margin-right: 0.5rem;cursor: pointer;
	transition: all 0.15s ease-out 0s;
	color: #ffffff;border: none;outline: none
/*
;background: #e0e0e0;
*/
	-webkit-appearance: none;
	        appearance: none;
}
/*
.contactForm span label input:hover {
	background: #d6a9a9;
}
.contactForm span label input:checked {
	background: #da3c41;
}
*/
.contactForm span label input:checked::before {
	font-size: 20px;line-height: 30px;position: absolute;display: inline-block;
	width: 30px;height: 30px;content: ' ';text-align: center;
}
/*
.contactForm span label input:checked::after {
	position: relative;display: block;content: '';
	-webkit-animation: click-wave 0.65s;
	        animation: click-wave 0.65s;
	background: #da3c41;
}
*/
.contactForm span label input {
	border-radius: 50%;
}
.contactForm span label input::after {
	border-radius: 50%;
}
.contactForm span label {
	line-height: 40px;display: block;
}
/*
.contactForm span label input:disabled {
	cursor: not-allowed;background: #b8b7b7;
}
*/
.contactForm span label input:disabled::before {
	font-size: 20px;line-height: 30px;position: absolute;
	display: inline-block;width: 30px;height: 30px;content: '●';text-align: center;
}
.contactForm span label input .disabled {
	color: #9e9e9e;
}
@media only screen and (max-width: 767px) {
.m-contact .contactForm input[type=radio] {
    -webkit-appearance: none;
    appearance: button;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    content: "";
    background-color: none;
    border: 1px solid #999;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: inset 4px 4px 10px rgba(0,0,0,.2);
    box-shadow: inset 4px 4px 10px rgba(0,0,0,.2);
    vertical-align: super;
    cursor: pointer;
    padding: 5px;
}
label {
    margin: 0 2px 0 0;
}
}
.contactForm input[type=checkbox] {
    vertical-align: top;
}
.contactForm input[type=radio]:checked:after {
background: #none;
}
/*****************
200331アウトプットタバーン詳細
*****************/
.m-column .column_ttl { line-height:normal; }
.cta { text-align:center;margin:60px auto 120px;}
.cta a { background: #106da1;padding:15px;color:#fff;text-decoration:none;font-size:2rem}

/*****************
200720インタビュー詳細
*****************/
.entry-talk-box {
  border-collapse: separate;
  border-spacing: 15px 2px;
  display: table;
  margin: 30px 0;
  table-layout: fixed;
  width: 100%;
}
.entry-talk-img {
  display: table-cell;
  vertical-align: top;
  width: 80px;
font-weight:bold;
}
.entry-talk-img img {
  border-radius: 50%;
  width: 100px;
}
.entry-talk-txt {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  display: table-cell;
  padding: 10px;
  position: relative;
}

.entry-talk-txt-left:after, .entry-talk-txt-left:before {
  right: 100%;
  top:20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.entry-talk-txt-left:after {
  border-color:transparent;
  border-right-color: #ffffff;
  border-width: 9px;
  margin-top: -9px;
}
.entry-talk-txt-left:before {
  border-color:transparent;
  border-right-color: #ddd;
  border-width: 10px;
  margin-top: -10px;
}


.entry-talk-txt-right:after, .entry-talk-txt-right:before {
  left: 100%;
  top:20px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.entry-talk-txt-right:after {
  border-color:transparent;
  border-left-color: #ffffff;
  border-width: 9px;
  margin-top: -9px;
}
.entry-talk-txt-right:before {
  border-color:transparent;
  border-left-color: #ddd;
  border-width: 10px;
  margin-top: -10px;
}
.entry-talk-txt p {
  line-height: 1.4;
  margin: 0;
}
/*****************
200805トップボタン改変
*****************/
.main_visual {
    margin-top: 70px;}
.m-index .index_topic .bnr_btn {
    box-shadow:none;
}
.main_visual .mv_wrap .mv_main {
    height: auto;
}
/*****************
201202ContactForm7
*****************/
span.wpcf7-list-item {
    display: flex;
    margin: 10px 0px 0px 1em;
}