/*
Theme Name:HR mitas(neve-child)
Version:3.0.11
Template: neve
*/

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
 .pc { display: none !important; }
 .sp { display: block !important; }
}

body {
 font-family: 'Noto Sans JP', sans-serif!important;
}
a {
 text-decoration:none!important; 
}
.header {
 width:100%;
 position: sticky; 
 top: 0; /* 上下の固定位置を上から0pxにする */
 left: 0; /* 左右の固定位置を左から0pxにする */
}
.header-in {
 background: #333;
 padding: 30px;
}
.header-container-in.hlt-top-menu .logo-image {
 text-align: left;
}
.hfg_header.site-header {
 box-shadow: none!important;
}
.site-logo {
 margin-left:50px;
}
.button-primary:hover {
 opacity: 0.7!important;
}
/* footer */
.footer-top-inner {
 width:1080px;
 margin:0 auto; 
}
.footer_middle {
 width:1080px;
 margin:0 auto;
 text-align:center;
}
.footer_middle span {
 margin-right:50px;
}
.footer_middle .span_link:after {
 content:"";
 display:inline-block;
 width:1px;
 height:20px;
 background-color:#a0a0a0;
 position:absolute;
 top:3px;
 margin-left:20px;
}
.span_last {
 
}
.copyright {
 width:1080px;
 margin:0 auto;
}
.copyright img {
 float:left;
}
.copyright p{
 float:right;
 margin-top:40px;
}
.button-primary:before {
 font-family: "Font Awesome 5 Free";
 content: '\f0e0';
 font-weight: 900;
 margin-right:10px;
}

/* 資料請求ボタン*/
.dl_btn {
 background:#f8405c;
 padding:16px 20px;
 border-radius:5px;
 color:#fff;
 font-weight:bold;
}
.dl_btn:hover {
 background:#f8405c;
 opacity:0.7;
}
.dl_btn:before {
 font-family: "Font Awesome 5 Free";
 content: "\f56d";
 font-weight: 900;
 margin-right:10px;
}
.dl_btn a {
 color : #fff!important;
}
.dl_btn span {
 color:#fff!important;
}
.site-logo {
}
#content {
 margin:150px auto;
 width:100%;
}
/* フェードイン */
.slide-bottom {
 opacity: 0;
 transform: translateY(50px);
 transition: all 1.3s 0s ease-out;
}
/* トップへ戻るボタン */
.pagetop{
 display: none;
 position: fixed;
 right: 15px;
 bottom: 0px;
 z-index:200;
 display: block;
}
.pagetop a{
 display: block;
 font-size: 0;
 width: 50px;
 height: 50px;
 text-align: center;
 background: #7db4e6;
 border-radius: 50%;
 line-height: 50px;
}
.pagetop a i{
 font-size: 20px;
 color:#fff;
 line-height: 50px;
}
/* トップへ戻るボタンここまで */
/* 診断バナー */
.fixed_banner{
 right:0;
 position:fixed;
 bottom:80px;
 z-index:100;
 width: 15%;
}
/* トライアルバナー */
.fixed_banner_trial{
 right:0;
 position:fixed;
 bottom:100px;
 z-index:100;
 width:15%;
 text-align:center;
}
.banner_trial_text {
 clear:both;
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 color:#fff;
 text-align:center;
 padding: 20px;
 border-radius: 5px;
}
/* トライアルバナー ページ下部 */
.page_footer_trial{
 width:50%;
 text-align:center;
 margin: 0 auto;
}
.page_footer_trial:hover{
 opacity:0.7;
}
.page_footer_trial_text {
 clear:both;
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 color:#fff;
 text-align:center;
 padding: 20px;
 border-radius: 5px;
 text-decoration: none;
}

/* bnr 閉じる
-----------------------------------------*/
.bnr{
 position: relative;
 margin: 0 auto;
 width: 15%;
 display: none;
}
.bnr p {
 margin-bottom: 0;
}
.bnr .bnr_img{
 position: fixed;
 width: 14.5%;
 bottom: 200px;
 right: 0.5%;
 box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
 z-index: 88;
}
.bnr_img_inner{
 box-sizing:border-box;
 padding: 10px;
 background-color: #fafafa;
}
.bnr .bnr_img_inner a{
 display: block;
}
.bnr .bnr_img p.close{
 position: absolute;
 right: 10px;
 top:10px;
}
.bnr .bnr_img p.close a{
 display: block;
 width: 20px;
 height: 25px;
 text-align: center;
}
.bnr .bnr_img p.close a span{
 display: block;
 width: 1px;
 height: 1px;
 overflow: hidden;
}
.bnr .bnr_img p.close a i{
 font-size: 30px;
 z-index: 888;
 color: #222;
}
/*--------------------------------
共通
---------------------------------*/
.ta_r {
text-align: right;
}
.mt_30 {
 margin-top: 30px;
}
.mb_30 {
 margin-bottom: 30px;
}
/*--------------------------------
トップページ
---------------------------------*/
#top_page {
 width:100%;
}
#top_main {
 width: 100%;
 background-color: #F0F5FC;
 margin-top: -150px;
 padding-bottom: 50px;
}
.top_main_box {
 width:1280px;
 margin: 100px auto;
 background-image:url("https://hr-mitas.jp/draft/wp-content/uploads/2024/06/top_img.png");
 background-repeat: no-repeat;
 background-position: bottom -20px right -35px;
 height: 750px;
 padding: 100px 0 50px;
 background-size: 65%;
}
#top_main h1 {
 color: #333;
 text-align: left;
 font-weight: bold!important;
 margin:50px 0 0 0px;
 letter-spacing: 0.25em;
 font-size: 40px;
 line-height: 2em;
}
.h1_hr {
 font-size:88px;
 color: #ff9845;
 display: inline;
 font-weight: bold;
}
.h1_mirai {
 font-size: 88px;
 color: #6e9fdd;
 display: inline;
 font-weight: bold;
}
.h1_mitasu {
 font-size: 88px;
 color: #fb576b;
 display: inline;
 font-weight: bold;
}
#top_main h1:before {
 background: none;
}
#top_main h2 {
 margin-top: 20px 0 0;
}
#top_main h3{
 position: relative;
 padding-bottom: 0.5rem;
 border-bottom: 3px solid #333;
 background-color: white;
 color: #333;
 font-weight: bold;
 font-size: 26px;
 text-align: center;
 margin-top: 50px;
 width: auto;
}
#top_main h3:before {
 position: absolute;
 top: 100%;
 left: 50%;
 transform: translateX(-50%) skew(-25deg);
 height: 20px;
 width: 10px;
 border-right: 3px solid #333;
 background-color: white;
 content: "";
}#top_main h3:after {
 border-bottom: none;
}
.main_pricebox {
 float: right;
 width: 30%;
}
#top_main h4 {
 margin: 30px 0px;
 width: 42%;
 }
.top_main_360 {
 width: 12%;
 vertical-align: middle;
 padding: 0 10px 0 30px;
}

.banner_trial {
 clear:both;
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 color:#fff;
 text-align:center;
 padding: 20px 30px;
 border-radius: 5px;
 width: 500px;
 float: left;
 font-size: 36px;
 margin-top: 20px;
}
#top_page h2 {
 border-left: 1px solid #333;
 padding: 25px 30px;
 font-size: 26px;
}
#top_page h3 {
 font-size: 24px;
 border-bottom: solid 2px #e3e2e3;
 position: relative;
 padding-bottom: 5px;
}
#top_page h3:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 2px #6e9fdd;
 bottom: -3px;
 width: 20%;
}
#top_page h4 {
 position: relative;
 padding: 1rem;
 border-bottom: 1px solid #6899dd;
}
#top_page h4:before {
 position: absolute;
 bottom: -14px;
 left: 1em;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0 12px;
 border-style: solid;
 border-color: #6899dd transparent transparent transparent;
}
#top_page h4:after {
 position: absolute;
 bottom: -13px;
 left: 1em;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0 12px;
 border-style: solid;
 border-color: #fff transparent transparent transparent;
}
.link_dl_btn {
 margin:50px auto 0;
 text-align:center;
}
#top_page .link_dl {
 padding: 10px 30px;
 border: 1px solid #f8405c;
 background-image: linear-gradient(to right, rgba(255,255,255,255) 50%, rgba(215,66,92,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 color: #f8405c;
 font-weight: normal;
 margin:0 auto;
}
#top_page .link_dl:hover {
 background-position: -100% 0;
 color: #fff;
}
#top_page .link_btn,#realization .link_btn{
 padding: 5px 20px;
 border: 1px solid #6e9fdd;
 background-image: linear-gradient(to right, rgba(255,255,255,255) 50%, rgba(110,159,221,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 color: #6e9fdd;
 float: right;
 font-weight: normal;
 margin-top: 50px;
}
#top_page .link_btn:hover,#realization .link_btn:hover{
 background-position: -100% 0;
 color: #fff;
}
.hr_gradation1 {
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 transform:rotate(-2deg);
 clear: both;
 padding: 50px 0;
}
.hr_gradation2 {
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 transform:rotate(3deg);
 clear: both;
 padding: 50px 0;
}
.info_about_hrmitas {
 width:1080px;
 margin:100px auto;
}
/*--------------------------------
HR mitasとは
---------------------------------*/
.about_hrmitas {
 width:100%;
 padding:100px 0;
 overflow:hidden;
 margin:50px 0 100px;
}
.about_hrmitas_inner {
 width:1080px;
 margin:0 auto;
}
.about_hrmitas_p {
 width:100%;
 margin-bottom: 30px;
}
.about_hrmitas_p p{
 margin-bottom:20px;
}
.about_hrmitas_pbox {
 width: 50%;
 float: left;
 margin-top: 30px;
}
.about_check{
 font-size: 16px;
 margin-bottom: 10px;
 margin-left: 50px;
}
.about_check:before {
 font-family: "Font Awesome 5 Free";
 content: "\f058";
 font-weight: 900;
 color: #6e9fdd;
 padding-right: 20px;
}
.about_hrmitas_inner img {
 display:block;
 width:50%;
 float:right;
 box-shadow: 20px 20px 0 #fff;
 margin-top: -30px;
}
.about_hrmitas_infopbox {
 width: 100%;
 clear: both;
 padding-top: 30px;
}
.about_hrmitas_infopbox_merit {
 font-size: 24px;
 margin-bottom: 15px;
}
.infopbox_merit_center {
 width: 43%;
 margin: 0 auto;
}
/*topできること*/
.about_realization {
 width:1080px;
 margin:100px auto;
 overflow:hidden;
}
.items {
 display: flex;
 justify-content: space-between;
 margin: 50px 0 0;
}
.items .item {
 width: 30%;
}
.item {
 width: 100%;
 padding: 10px;
}
.item_white {
 border: 1px solid #E0EAF6;
}
.item_blue {
 background: #E0EAF6;
}
.item-img {
 padding: 20px 0;
 text-align: center;
}
.item-body {
 padding: 0;
}
.item-title {
 margin: 0 0 8px;
 font-size: 20px;
 font-weight: 700;
 color: #fb576b;
 text-align: center;
}
.item-body p {
 font-size: 16px;
 font-weight: 400;
 color: #333;
}
.item_link {
 float: right;
 background: #6e9fdd;
 text-align: center;
 color: #fff;
 border-radius:5px;
 padding: 5px 20px;
}
.item_link:hover {
 opacity:0.7;
 color: #fff;
}
/*top機能*/
.about_function {
 width: 100%;
}
.about_function_inner {
 width:1080px;
 margin:0 auto;
 padding:50px 0 100px;
}
.about_function_box {
 width:100%;
 box-shadow: 1px 1px 2px gray;
 clear: both;
 height: 320px;
 margin: 100px 0;
 border: 1px solid #dcdcdc;
}
.about_function_img_l {
 float: left;
 width: 45%;
 margin: -30px;
 box-shadow: 1px 1px 2px grey;
}
.about_function_img_r {
 float: right;
 width: 45%;
 margin: -30px;
 box-shadow: 1px 1px 2px grey;
}
.about_function_pbox_l {
 float: left;
 width: 55%;
 margin-left: 1%;
}
.about_function_pbox_r {
 float: right;
 width: 55%;
 margin-right: 1%;
}
.about_function_pbox_l p {
 margin-left: 1%;
}
.about_function_pbox_r p {
 margin-right: 1%;
}
.mb_none {
 margin-bottom: 0;
}
.about_function_okr {
 font-size: 18px;
 color: #808080;
}
.about_okr_initial {
 border-bottom:2px solid #fb576b;
}
/*.about_function_flex {
 display: flex;
}
.about_function_inner_box {
 width: calc(100% / 3);
}
.about_function_inner_box {
 margin-right:25px
}
.about_function_inner_box:last-child {
 margin-right:0px
}*/

/*top特長*/
.about_features {
 width: 1080px;
 margin: 0 auto 200px;
}
.about_plan {
 width:1080px;
 margin:100px auto;
 overflow:hidden;
}

.trial_inner_box {
 width:33%;
 margin-right:1%;
 background:#fff;
 padding:50px;
}
.trial_inner_box:last-child {
 margin-right: 0;
}
/*top戦略人事*/
.ideal_organization {
 
}
.ideal_organization_pbox {
 float: left;
 width: 49%;
}
.ideal_organization_imgbox {
 float: right;
 width: 49%;
 margin-top: -100px;
 text-align: center;
}


/* 新着ブログ */
.blog_article {
 width:1080px;
 margin:100px auto 100px;
}
.wpcu_block_title {
 border-left: 1px solid #000;
 padding: 25px 30px;
 font-size: 26px!important;
}

/*下層ページ　hタグ*/
h1 {
 font-size: 30px;
 font-size: 3rem;
 font-weight:normal!important;
 position: relative;
 padding: 1.5rem;
 text-align: center;
}
h1 span {
 font-size: 1.6rem;
 display: block;
 font-weight:normal;
 color:#e7e7e7;
}
#content h1:before {
 position: absolute;
 bottom: -10px;
 left: calc(50% - 30px);
 width: 60px;
 height: 2px;
 content: '';
 border-radius: 3px;
 background: #6899dd;
}
h3 {
 font-size: 24px;
 border-bottom: solid 2px #e3e2e3;
 position: relative;
 padding-bottom: 5px;
 text-align: left;
}
h3:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 2px #6e9fdd;
 bottom: -2px;
 width: 20%;
}
h4 {
 position: relative;
 padding: 1rem;
 border-bottom: 1px solid #6899dd;
}

/*--------------------------------
HR mitasとは
---------------------------------*/
#about_hrmitas {
}
#about_hrmitas h4 {
 text-align: center;
 display: inline-block;
 margin: 0 auto;
}
#about_hrmitas h5 {
 margin: 30px 0 0 0;
}
#about_hrmitas h6 {
 text-align: center;
 margin: 0;
}
.about_hrmitas_main {
 width:100%;
 background-image:url("http://hr-mitas.jp/wp-content/uploads/2022/03/about_hrmitas.png");
 background-repeat: no-repeat;
 height: 400px;
 padding: 50px 0;
 background-size: cover;
}
.about_hrmitas_hbox {
 width: 1080px;
 margin: 0 auto;
 background: rgba(255,255,255,0.8);
 border-radius:10px;
 padding: 30px;
 height: 300px;
 text-align: center;
}
.about_hrmitas_main h2 {
 text-align: center;
 color: #000;
 font-size: 70px;
}
.about_hrmitas_main h3 {
 text-align: center;
 color: #6e9fdd;
 border-bottom: none;
}
.about_hrmitas_main h3:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: none;
}
.about_hrmitas_info {
 width: 1080px;
 margin: 100px auto;
}
.about_hrmitas_info_text {
 float: left;
 width: 49%;
}
.about_hrmitas_info_img {
 float: right;
 width: 49%;
}
.about_hrmitas_info_img img{
 margin-top: -20px;
}
.about_hrmitas_table {
 margin-top: 50px;
}
/*　HR mitasとは　機能　*/
.about_hrmitas_function {
 width: 1080px;
 margin: 100px auto; 
}
.about_hrmitas_function_flex {
 display: flex;
 justify-content:space-around;
}
.about_hrmitas_function_flexbox {
 width: 23%;
 text-align: center;
}
.about_hrmitas_function_flexbox p{
 text-align: left;
}
/*　HR mitasとは　機能 他社比較　*/
.comparison {
 margin-top: 100px;
}
.comparison_table {
 margin-top: 30px;
}
.comparison_table table {
 border-collapse: collapse;
 margin: 0 auto;
 padding: 0;
 width: 850px;
 table-layout: fixed;
}
.comparison_table thead th{
 padding: 1em .8em;
 border-right: 5px solid#fff;
}
.comparison_table table tr {
 background-color: #fff;
 padding: .35em;
}
.comparison_table table tr:nth-child(even){
 background-color: #f9f9f9;
}
.comparison_table table td {
 padding: .7em;
 text-align: center;
}
.comparison_table table th {
 font-size: .75em;
}
.comparison_table i{
 font-size:2em
}
.comparison_table .plan1{
}
.comparison_table .plan1_i{
 color:#03A9F4;
}
.comparison_table .plan4{
 background: #009688;
}
.comparison_table .plan4_i{
 color:#009688;
}
.comparison_table .plan3{
 background: #4caf50;
}
.comparison_table .plan3_i{
 color:#4caf50;
}
.comparison_table .plan2{
 background: #cddc39;
}
.comparison_table .plan2_i{
 color:#cddc39;
}
.comparison_table .initial{
 color: #fff;
 font-weight: bold;
 font-size: 1.8em;
 text-align: center;
 margin-bottom:10px
}
.comparison_table .price span {
 font-size: .6em;
}
.comparison_table .btn{
 background:#fff;
 color:#000;
 padding: 1em;
 border-radius:5px;
 display:block;
 text-decoration:none;
 font-size:.8em
}

@media screen and (max-width: 600px) {
 .comparison_table{
   overflow-x: scroll;
 }
}
/*　HR mitasとは　サポート　*/
.about_hrmitas_support {
 width: 1080px;
 margin: 100px auto; 
}








.about_hrmitas_connect {
 width: 1080px;
 margin: 100px auto;
 text-align: center;
}
.about_hrmitas_connectpbox {
 text-align: left;
 margin: 50px auto;
 width: 85%;
}
.about_hrmitas_connectimg{
 width: 65%;
 margin: 30px auto;
}
.about_hrmitas_tableindex {
 float: left;
 width: 18%;
}
.about_hrmitas_tableindex p {
 background: #a3c263;
 border: 1px solid #a3c263;
 color: #fff;
 padding: 3px 10px;
 margin:0 20px 25px 0;
 text-align: center;
}
.table_contents {
 float: left;
 width: 23%;
}
.table_contents p{
 border: 1px solid #a3c263;
 padding: 3px 10px;
 background: #f0f5e6;
 margin:0 0px 25px 0;
 text-align: center;
}
.table_contents_icon {
 float: left;
 width: 14%;
 text-align: center;
}
.table_contents_icon img{
 margin-top: 300px;
}
.table_contents_new_box {
 float: left;
}
.table_contents_new {
 position: relative;
 border: 1px solid #6e9fdd;
 background: #e0eaf6;
 padding: 3px 10px;
 width: 100%;
 text-align: center;
 margin:0 20px 25px 0;
}
.table_contents_new:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-18px;
 right:-28px;
 border-style: solid;
 border-color: transparent transparent transparent #e0eaf6;
 border-width: 51px 0px 0px 44px;
 z-index: 10;
}
.table_contents_new:after{
 content: "";
 position: absolute;
 width: 4px;
 height: 54px;
 margin: auto;
 top: -20px;
 right: -27px;
 border-style: solid;
 border-color: transparent transparent transparent #6e9fdd;
 border-width: 50px 0px 0px 43px;
}
.infotable_right {
 float: right;
 width: 15%;
}
.infotable_right img {
 margin-top: 250px;
}
.infotable_right p {
 text-align: center;
 background: #fb576b;
 padding: 5px 10px;
 border-radius:5px;
 font-size: 20px;
 font-weight: bold;
 color: #fff;
}
.span_pink {
 color: #fb576b;
 font-weight: bold;
}
.about_hrmitas_about {
 width: 1080px;
 margin: 100px auto;
}
.about_hrmitas_aboutpbox {
 float: left;
 width: 45%;
}
.about_hrmitas_about img{
 float: right;
 width: 50%;
 margin: -20px 0 0;
}


/*--------------------------------
戦略人事をサポート
---------------------------------*/
#hr_support {
 width: 100%;
}
.hr_support_main {
 width:100%;
 background-image:url("http://hr-mitas.jp/wp-content/uploads/2022/03/about_hrmitas.png");
 background-repeat: no-repeat;
 height: 400px;
 padding: 50px 0;
 background-size: cover;
}
.hr_support_hbox {
 width: 1080px;
 margin: 0 auto;
 background: rgba(255,255,255,0.8);
 border-radius:10px;
 padding: 30px;
 height: 300px;
}
.hr_support_main h2 {
 text-align: center;
 color: #000;
 font-size: 70px;
}
.hr_support_main h3 {
 text-align: center;
 color: #6e9fdd;
 border-bottom: none;
}
.hr_support_main h3:after {
 position: absolute;
 content: " ";
 display: block;
 border-bottom: none;
}
.hr_support_info {
 width: 1080px;
 margin: 100px auto;
}
.hr_support_table {
 margin-top: 50px;
}
.hr_support_tableindex {
 float: left;
 width: 18%;
}
.hr_support_tableindex p {
 background: #a3c263;
 border: 1px solid #a3c263;
 color: #fff;
 padding: 3px 10px;
 margin:0 20px 25px 0;
 text-align: center;
}
.table_contents {
 float: left;
 width: 23%;
}
.table_contents p{
 border: 1px solid #a3c263;
 padding: 3px 10px;
 background: #f0f5e6;
 margin:0 0px 25px 0;
 text-align: center;
}
.table_contents_icon {
 float: left;
 width: 14%;
 text-align: center;
}
.table_contents_icon img{
 margin-top: 300px;
}
.table_contents_new_box {
 float: left;
}
.table_contents_new {
 position: relative;
 border: 1px solid #6e9fdd;
 background: #e0eaf6;
 padding: 3px 10px;
 width: 100%;
 text-align: center;
 margin:0 20px 25px 0;
}
.table_contents_new:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-18px;
 right:-28px;
 border-style: solid;
 border-color: transparent transparent transparent #e0eaf6;
 border-width: 51px 0px 0px 44px;
 z-index: 10;
}
.table_contents_new:after{
 content: "";
 position: absolute;
 width: 4px;
 height: 54px;
 margin: auto;
 top: -20px;
 right: -27px;
 border-style: solid;
 border-color: transparent transparent transparent #6e9fdd;
 border-width: 50px 0px 0px 43px;
}
.infotable_right {
 float: right;
 width: 15%;
}
.infotable_right img {
 margin-top: 250px;
}
.infotable_right p {
 text-align: center;
 background: #fb576b;
 padding: 5px 10px;
 border-radius:5px;
 font-size: 20px;
 font-weight: bold;
 color: #fff;
}
.span_pink {
 color: #fb576b;
 font-weight: bold;
}
.hr_support_about {
 width: 1080px;
 margin: 100px auto;
}
.hr_support_aboutpbox {
 float: left;
 width: 60%;
}
.hr_support_about img{
 float: right;
 width: 30%;
 margin: -20px 0 0;
}
.hr_support_connect {
 width: 1080px;
 margin: 100px auto;
 text-align: center;
}
.hr_support_connectpbox {
 text-align: left;
 margin: 50px auto;
 width: 85%;
}
.hr_support_connectimg{
 width: 65%;
 margin: 30px auto;
}


/*--------------------------------
課題を解決
---------------------------------*/
/* 共通 */
#realization {
 width: 100%;
}
#realization h4 {
 position: relative;
 padding: 1rem;
 border-bottom: 3px solid #ff871c;
 font-size: 40px;
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 3px;
}
.realization_main{ 
 padding-bottom: calc(10vw + 10px); 
 position: relative;
 overflow: hidden;
 background-color:#F0F5FC;
} /* .section1の背景 */ 
.realization_main::before {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 border-bottom: 5vw solid #fff; /* ちら見せ三角 高さを調節*/ 
 border-left: 100vw solid transparent;
}
.realization_main::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 border-bottom: 10vw solid #6e9fdd;  /* 三角を白に */ 
 border-right: 100vw solid transparent;
}
.realization_main_box {
 width: 1080px;
 margin: 0 auto;
}
.realization_main_hbox {
 width: 50%;
 float: left;
}
.realization_main h2 {
 color: #333;
 margin-top: 150px;
 font-size: 58px;
}
.realization_main h3 {
 clear: both;
 border:none;
}
.realization_main h3:after {
 border: none;
}
.realization_main_h2_span {
 font-size: 45px;;
}
.realization_main img {
 float: right;
 width: 40%;
 box-shadow:1px 1px 2px grey;
 margin-top: 100px;
}
.realization_solution {
 width: 100%;
 margin: 0px auto;
}
.realization_solution_inner {
 width: 1080px;
 padding: 100px 0 0;
 background: #fff;
 margin: 0 auto;
}
.realization_solution_box {
 width: 90%;
 margin: 0 auto;
 background: #F0F5FC;
 padding: 50px 100px 20px;
 border-radius:5px;
 box-shadow:1px 1px 2px grey;
 text-align: center;
}
.solution_balloon {
 position: relative;
 display: inline-block;
 margin-bottom: 30px;
 padding: 7px 50px;
 min-width: 120px;
 max-width: 100%;
 color: #fff;
 font-size: 30px;
 background: #6899dd;
}
.solution_balloon:before {
 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -15px;
 border: 15px solid transparent;
 border-top: 15px solid #6899dd;
}
.solution_balloon p {
 margin: 0;
 padding: 0;
}
.solution_p {
 font-size: 24px;
 margin-bottom: 20px;
 text-align: left;
}
.solution_p:before {
 font-family: "Font Awesome 6 Free";
 content: "\e4bb";
 font-weight: 900;
 color: #6e9fdd;
 padding-right: 20px;
 font-size: 24px;
}
/* できること一覧 */
#realization_list {
 width: 1080px;
 margin: 0 auto;
}

/* データの一元化 */
.unification h3 {
 color: #fff;
 font-size: 48px;
 text-align: center;
}
.unification {
 width: 100%;
 background:#6899dd ;
 margin: 50px auto ;
 position: relative;
 z-index: 0;
 padding: 50px 0;
}
.unification::after{
 content: '';
 position: absolute;
 left:0;
 top: 0;
/* 四角形を傾ける */
 transform: skewY(-4deg);
 transform-origin: bottom left;
 z-index: -1;
 width:100%;
 height:100%;
 background:#6899dd;
}
.unification_box {
 width:1080px;
 box-shadow: 1px 1px 2px gray;
 clear: both;
 height: 360px;
 margin: 100px auto 150px;
 border: 1px solid #dcdcdc;
 background: #fff;
}
.unification_img_l {
 float: left;
 width: 50%;
 margin: -50px;
 padding: 30px 20px;
 background: #fff;
 box-shadow: 1px 1px 2px grey;
}
.unification_img_r {
 float: right;
 width: 50%;
 margin: -30px;
 box-shadow: 1px 1px 2px grey;
}
.unification_pbox_l {
 float: left;
 width: 46%;
 margin-left: 2%;
}
.unification_pbox_r {
 float: right;
 width: 46%;
 margin-right: 2%;
}
.unification_pbox_l p {
 margin-left: 1%;
 font-size: 20px;
 margin-bottom: 10px;
}
.unification_pbox_r p {
 margin-right: 1%;
 font-size: 20px;
 margin-bottom: 10px;
}
/* 他の出来ること紹介 */
.realization_items {
 display: flex;
 justify-content: space-between;
 margin: 50px 0 0;
}
.realization_items .realization_item {
 width: 19%;
}
.realization_item {
 width: 100%;
 padding: 10px;
 background-color:#E0EAF6;
}
.realization_item:nth-child(2n) {
 border: 1px solid #E0EAF6;
 background-color:#fff;
}
.realization_item-img {
 padding: 20px 0;
 text-align: center;
}
.realization_item-body {
 padding: 0;
}
.realization_item-title {
 margin: 0 0 8px;
 font-size: 20px;
 font-weight: 700;
 color: #fb576b;
 text-align: center;
}
.realization_item-body p {
 font-size: 16px;
 font-weight: 400;
 color: #333;
 height: 130px;
}
/*--------------------------------
セキュリティ security
---------------------------------*/
#security {
 width: 100％;
 overflow: hidden;
}
#security .inner{
 width: 1080px;
 margin: 0 auto;
}
#security h2{
 border-left: 1px solid #333;
 margin: 40px 0;
 padding: 25px 30px;
 font-size: 26px;
}
#security h4{
 display: inline-block;
 margin: 20px 0 0 20px;
}
#security_environment {
 overflow: hidden;
 margin-bottom: 100px;
}
.security_environment_box_l{
 float:left;
 width:48%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 30px;
 height: 200px;
}
.security_environment_box_l img,.security_environment_box_r img {
 width: 18%;
 float: left;
}
.security_environment_box_l p,.security_environment_box_r p {
 clear: both;
 padding: 10px 15px 0;
}
.security_environment_box_r {
 float:right;
 width:48%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 30px;
 height: 200px;
}

#security_diagnosis {
 margin-bottom: 100px;
 background-color: #F0F5FC;
 padding: 50px 0 100px;
}
#security_diagnosis .box {
 background-color: #fff;
}
#security_diagnosis h4 {
 margin: 20px 0 0 40px;
 font-size: 22px;
}
#security_diagnosis p {
 padding: 30px 40px;
}
#security_corporate_effort {
}
.corporate_effort_box {
 width: 98%;
 box-shadow: 1px 1px 2px grey;
 overflow: hidden;
 border: solid 1px #dcdcdc;
 padding: 20px;
 margin-bottom: 30px;
}
.corporate_effort_box img{
 border: 1px solid #dcdcdc;
 float: right;
}
.corporate_effort_pbox {
 width: 75%;
 float: left;
}
.corporate_effort h3{
 font-size: 24px;
 margin-bottom: 20px;
 text-align: left;
 font-weight: normal;
}
.corporate_effort h3:before {
 font-family: "Font Awesome 6 Free";
 content: "\e574";
 font-weight: 900;
 color: #6e9fdd;
 padding-right: 20px;
 font-size: 24px;
}

/*スマートフォン*/
@media screen and (max-width:768px){
#security {
 width: 100％;
 overflow: hidden;
}
#security .inner{
 width: 90%;
 margin: 0 auto;
}
#security h2{
 border-left: 1px solid #333;
 margin: 40px 0;
 padding: 25px 30px;
 font-size: 26px;
}
#security h4{
 display: inline-block;
 margin: 20px 0 0 20px;
}
#security_environment {
 overflow: hidden;
 margin-bottom: 100px;
}
.security_environment_box_l{
 width:100%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 30px;
 height: 200px;
}
.security_environment_box_l img,.security_environment_box_r img {
 width: 18%;
 float: left;
}
.security_environment_box_l p,.security_environment_box_r p {
 clear: both;
 padding: 10px 15px 0;
}
.security_environment_box_r {
 width:100%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 30px;
 height: 200px;
}

#security_diagnosis {
 margin-bottom: 50px;
 background-color: #F0F5FC;
 padding: 50px 0;
}
#security_diagnosis .box {
 background-color: #fff;
}
#security_diagnosis h4 {
 margin: 20px;
 font-size: 18px;
}
#security_diagnosis p {
 padding: 15px 20px;
}
#security_corporate_effort {
}
.corporate_effort_box {
 width: 98%;
 box-shadow: 1px 1px 2px grey;
 overflow: hidden;
 border: solid 1px #dcdcdc;
 padding: 20px;
 margin-bottom: 30px;
}
.corporate_effort_box img{
 border: 1px solid #dcdcdc;
 float: right;
 width: 24%;
}
.corporate_effort_pbox {
 width: 75%;
 float: left;
}
.corporate_effort h3{
 font-size: 22px;
 margin-bottom: 20px;
 text-align: left;
 font-weight: normal;
}
.corporate_effort h3:before {
 font-family: "Font Awesome 6 Free";
 content: "\e574";
 font-weight: 900;
 color: #6e9fdd;
 padding-right: 20px;
 font-size: 24px;
}
}

/*--------------------------------
導入メリットページ
---------------------------------*/
#merit {
 width:100%;
}
.merit_info {
 width:100%;
 background:#be75a9;
 overflow:hidden;
 padding:50px 0 100px;
 margin:100px 0;
}
.merit_info h3 {
 color:#fff;
}
.merit_info_box {
 width:1080px;
 margin:0 auto;
}
.merit_info_box img {
 float:left;
 width:40%;
 box-shadow:20px 20px 0 #fff;
}
.merit_info_text {
 float:right;
 width:50%;
}
.merit_info_text p{
 color:#fff;
}
.merit_contents {
 width:1080px;
 margin:0 auto;
}

.merit_contents h2{
}
.merit_contents h3 {
 font-size: 20px;
 clear: both;
 margin-top: 20px;
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 line-height: 34px;
 padding: 15px 24px;
}

.merit_contents_box_l {
 float:left;
 width:48%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 50px;
}
.merit_contents_box_l img {
 width: 100px;
 float: left;
 margin-right: 20px;
}
.merit_contents_box_r {
 float:right;
 width:48%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 50px;
}
.merit_contents_box_r img{
 width: 100px;
 float: left;
 margin-right: 20px;
}
/* フェードイン */
/* 画面外にいる状態 */
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}
/* 1つ目の要素に200msのdelayをかける */
#effect2 > div .fadein:nth-of-type(1) {
	-moz-transition-delay:200ms;
	-webkit-transition-delay:200ms;
	-o-transition-delay:200ms;
	-ms-transition-delay:200ms;
	}
/* 2つ目の要素に400msのdelayをかける */
#effect2 > div .fadein:nth-of-type(2) {
	-moz-transition-delay:400ms;
	-webkit-transition-delay:400ms;
	-o-transition-delay:400ms;
	-ms-transition-delay:400ms;
	}
/* 3つ目の要素に600msのdelayをかける */
#effect2 > div .fadein:nth-of-type(3) {
	-moz-transition-delay:600ms;
	-webkit-transition-delay:600ms;
	-o-transition-delay:600ms;
	-ms-transition-delay:600ms;
	}
/* 4つ目の要素に600msのdelayをかける */
#effect2 > div .fadein:nth-of-type(4) {
	-moz-transition-delay:800ms;
	-webkit-transition-delay:800ms;
	-o-transition-delay:800ms;
	-ms-transition-delay:800ms;
	}


/*--------------------------------
機能ページ
---------------------------------*/
#function {
 width: 1080px;
 margin: 0 auto;
}
#function h3 {
 font-size: 20px;
 clear: both;
 margin-top: 20px;
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 line-height: 34px;
 padding: 0 20px 20px;
}
#function .content_box_1 {
 margin: 150px 0 100px;
 clear: both;
 overflow: hidden;
}
#function .content_box_1:last-child {
 margin: 100px 0;
}
#function .content_box_2 {
 margin: 100px 0;
 clear: both;
}
#function .content_box_1 img {
 float: left;
 width: 40%;
}
#function .content_box_2 img {
 float: right;
 width: 40%;
}
.content_text_right {
 float: right;
 width: 60%;
}
.content_text_left {
 float: left;
 width: 60%;
}
/*--------------------------------
簡易診断ページ
---------------------------------*/	
#diagnose {
 width: 1080px;
 margin: 0 auto;
}
.qmn_quiz_container .qmn_btn, .qmn_quiz_container .btn {
 width: 30%;
 margin: 0 auto;
 padding: 10px 0!important;
}
.qmn_mc_answer_wrap {
 display: inline-block!important;
}
/*--------------------------------
トライアルページ
---------------------------------*/
#trial{
 width:100%;
 overflow:hidden;
 text-align: center;
}
#trial h2{
 display: inline-block;
 margin: 100px auto 30px;
 font-size: 50px;
 font-weight: normal;
}
.trial_bg{
 margin: 50px 0 0;
 background-image:url("http://hr-mitas.jp/okr/wp-content/uploads/sites/2/2022/01/trial_image.png");
 background-repeat: no-repeat;
 background-position:center center;
 text-align:center;
 height: 500px;
}
.trial_circle {
 position: absolute;
 left: 55%;
 width: 220px;
 height: 220px; 
 border-radius: 50%;/* ←円を作る */
 color: #fff;
 text-align: center;
 font-size: 18px;
 font-weight: bold;
 line-height: 1.5em;
 padding-top:90px;
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
}
.trial_circle span {
 font-size: 100px;
}
.trial_inner{
 width:1080px;
 margin: 0 auto;
}
.trial_recommendation_box {
 border: 1px solid #ff871c;
 border-radius: 5px;
 position: relative;
 margin: 100px auto;
 width: 70%;
 padding: 50px 120px 30px;
}
.trial_recommendation_box h3{
 padding: 10px 20px;
 color: #fff;
 font-size: 20px;
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 position: absolute;
 right: 0;
 left: 0;
 top: -1.7em;
 margin-left: 11%;
 width: 80%;
 border-radius: 5px;
}

.trial_recommendation {
 text-align: left;
 font-size: 22px;
 margin-bottom: 20px;;
}
.trial_recommendation:before {
 font-family: "Font Awesome 5 Free";
 content: '\f14a';
 font-weight: 900;
 margin-right:10px;
 color:#ff871c;
}
.trial_inner_merit{
 width:1080px;
 display: flex;
 margin: 0 auto;
}
.trial_support_box{
 box-shadow: 2px 2px 4px #dcdcdc;
 margin-bottom:100px;
}
.bg_dot{
 background-color: #fff;
 background-image:radial-gradient(#a0a0a0 12%, transparent 12%);
 background-size: 10px 10px;
 margin:100px auto;
 width:100%;
 padding: 100px 0;
}
.trial_title {
 font-size:22px;
 font-weight:bold;
 text-align: center;
}
.trial_title span{
 font-size: 50px;
 color: #6899dd;
 font-weight: normal;
}
.trial_title span:after {
 content: "";
 display: inline-block;
 width: 2px;
 height: 37px;
 background-color: #6899dd;
 margin-left: 10px;
}
.trial_inner_box {
 width:31%;
 margin-right:2%;
 background:#fff;
 padding:50px 0;
}
.trial_inner_box:last-child {
 margin-right: 0;
}
.animate {
 opacity: 0;
 transform: translateY(10px);
 transition: opacity 0.5s;
}
.animate.show {
 opacity: 1;
 transform: translateY(0);
}
.animate.show:nth-of-type(1) {
 transition-delay: 0s;
}
.animate.show:nth-of-type(2) {
 transition-delay: 0.3s;
}
.animate.show:nth-of-type(3) {
 transition-delay: 0.6s;
}
.trial-form {
 margin:0 auto;
}
.trial-form {
 width:70%;
 margin:0 auto;
}

/* Contact 7 */
.mandatory {
 font-size:12px;
 color:#dc143c;
}
/* トライアルの流れ */
.trial_flow {
 width: 1080px;
 margin: 0 auto;
}
.trial_flow_step {
 font-size: 20px;
 font-weight: 600;
 color: #fc6a44;
 margin-bottom: 10px;
 text-align: left;
}
.trial_flow > li {
 position: relative;
 list-style-type: none;
 width: 70%;
 margin: 0 auto;
}
.trial_flow > li:not(:last-child) {
 margin-bottom: 40px;
}
.trial_flow > li:not(:first-child)::before {
 content: "";
 height: 85px;
 display: block;
 border-left: 4px dotted #e5e5e5;
 position: absolute;
 top: -40px;
 left: -webkit-calc(10% + 30px - 2px);
 left: calc(10% + 30px - 2px);
 z-index: 10;
}
.trial_flow > li dl {
 width: 100%;
 padding: 20px 30px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 border: 1px solid #fc6a44;
 border-radius: 10px;
 position: relative;
}
.trial_flow > li:not(:last-child) dl::before,
.trial_flow > li:not(:last-child) dl::after {
 content: "";
 border: solid transparent;
 position: absolute;
 top: 100%;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}
.trial_flow > li:not(:last-child) dl::before {
 border-width: 21px;
 border-top-color: #fc6a44;
}
.trial_flow > li:not(:last-child) dl::after {
 border-width: 20px;
 border-top-color: #fff;
}
.trial_flow > li dl dt {
 font-size: 20px;
 font-weight: 600;
 color: #fc6a44;
 -ms-flex-preferred-size: 20%;
 flex-basis: 20%;
 margin-right: 2vw;
 text-align: center;
}
.trial_flow > li dl dt .icon {
 font-size: 12px;
 color: #fff;
 background: rgb(255,135,28);
 background: -moz-linear-gradient(left, rgba(255,135,28,1) 0%, rgba(248,64,92,1) 100%);
 background: -webkit-linear-gradient(left, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff871c', endColorstr='#f8405c',GradientType=1 );
 padding: 5px 10px;
 margin-bottom: 10px;
 display: block;
 border-radius: 20px;
 position: relative;
 z-index: 100;
}
/*--------------------------------
資料ダウンロード
---------------------------------*/
/* 資料ダウンロード一覧 */
#download {
 width:1080px;
 margin:50px auto;
}
#download a{
 text-decoration:none;
}
#download h3{
 font-size:22px;
 margin-bottom: 10px;
}
.dl_box {
 width:1080px;
 margin:50px auto;
 display:flex;
}
.dl_box_inner {
 width : 30%;
 text-align: center;
 padding: 10px 20px;
 border: 1px solid #dcdcdc;
 margin-right: 5%;
}
.dl_box_inner:hover {
 transform:scale(1.2,1.2);
}
.dl_box_inner:last-child {
 margin-right: 0%;
}
.dl_box_inner img {
 width:100%;
 margin:0 auto;
 border: 1px solid #dcdcdc;
}
.document_contents {
 text-align: left;
}
#dl_okr {
 width:900px;
 margin:100px auto;
}
.dl_image {
 width:42%;
 float:left;
 text-align:center;
}
.dl_image img{
 width:90%;
 border:1px solid #dcdcdc;
}
.dl_form {
 float:right;
 width:54%;
}
.heading_box {
 padding:1.5em 1em;
 margin: 2em 0;
 background: #f0f7ff;
 border: dashed 2px #5b8bd0;/*点線*/
 text-align: left;
}
.heading_box p{
 font-size: 15px;
 margin-bottom: 10px;
}
.heading_box p:last-child{
 margin-bottom: 0;
}
/* ダウンロードステップ */
.dl_step {
 margin: 100px auto;
}
.dl_flow {
 width: 100%;
 margin: 50px auto;
 padding: 0;
}
.dl_flow p {
 text-align: left;
 margin-bottom: 10px;
}
.dl_flow_step {
 font-size: 20px;
 font-weight: 600;
 color: #fc6a44;
 margin-bottom: 10px;
 text-align: left;
}
.dl_flow > li {
 position: relative;
 list-style-type: none;
 width: 100%;
 margin: 0 auto;
}
.dl_flow > li:not(:last-child) {
 margin-bottom: 40px;
}
.dl_flow > li:not(:first-child)::before {
 content: "";
 height: 85px;
 display: block;
 border-left: 4px dotted #e5e5e5;
 position: absolute;
 top: -40px;
 left: -webkit-calc(10% + 30px - 2px);
 left: calc(4% + 30px - 2px);
 z-index: 10;
}
.dl_flow > li dl {
 width: 100%;
 padding: 20px 30px;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-align: center;
 -ms-flex-align: center;
 align-items: center;
 border: 1px solid #fc6a44;
 border-radius: 10px;
 position: relative;
}
.dl_flow > li:not(:last-child) dl::before,
.dl_flow > li:not(:last-child) dl::after {
 content: "";
 border: solid transparent;
 position: absolute;
 top: 100%;
 left: 50%;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}
.dl_flow > li:not(:last-child) dl::before {
 border-width: 21px;
 border-top-color: #fc6a44;
}
.dl_flow > li:not(:last-child) dl::after {
 border-width: 20px;
 border-top-color: #fff;
}
.dl_flow > li dl dt dd{
 font-size: 20px;
 font-weight: 600;
 color: #fc6a44;
 -ms-flex-preferred-size: 20%;
 flex-basis: 20%;
 margin-right: 2vw;
 text-align: center;
}
.dl_flow > li dl dt .icon {
 font-size: 12px;
 color: #fff;
 background: rgb(255,135,28);
 background: -moz-linear-gradient(left, rgba(255,135,28,1) 0%, rgba(248,64,92,1) 100%);
 background: -webkit-linear-gradient(left, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff871c', endColorstr='#f8405c',GradientType=1 );
 padding: 5px 10px;
 margin-bottom: 10px;
 display: block;
 border-radius: 20px;
 position: relative;
 z-index: 100;
}



/*--------------------------------
コンサルティングサポートページデザイン
---------------------------------*/
#support {
 width:1080px;
 margin:100px auto;
}
#support h2{
 border-left: 1px solid #333;
 margin: 40px -29px 20px;
 padding: 25px 30px;
 font-size: 26px;
}
#support h3{
 border-bottom: solid 1px #e7e7e7;
 position: relative;
 font-weight: normal;
 margin-top: 80px;
}
#support h3:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 1px #6899dd;
 bottom: -1px;
 width: 20%;
}
#support h4{
 color: #6899dd;/*文字色*/
 border-bottom: dashed 1px #6899dd;
 font-weight: normal;
 width:30%;
 margin-left:20px;
}
#support h4+p{
 margin-left:20px;
}
.support_img {
 box-shadow: none;
}
.support_img_right {
 float:right;
 width:45%;
 border-radius: 15px;
 box-shadow: 3px 3px 5px #999;
 margin:0px 0 50px 20px;
}
/* サポート内容 */
.support_caption {
 font-size:16px;
 border:1px solid #6899dd;
 padding:1px 20px;
 width:300px;
 margin:0 auto 20px;
 text-align:center;
}
.support_title {
 border-bottom:1px solid #6899dd;
 margin:12px auto;
 text-align:center;
 width:80%;
 font-weight:bold;
}
.support_text {
 margin:0;
 color:#333;
 text-align:left;
 font-size:11px;
 margin-left:5px;
}
.support_content_box {
 width: 1080px;
 margin: 0 auto;
}
.support_content_before {
 position: relative;
 width:16%;
 background: #fff;
 border: 1px solid #9f9f9f;
 display:inline-block;
 text-align:center;
 font-size:11px;
 height:50px;
 color:#6899dd;
 line-height:1.5em;
 margin-right:16px;
 margin-bottom:25px;
}
.support_content_before:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 border-width: 25px 0 25px 18px;
 z-index: 10;
}
.support_content_before:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-2px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #9f9f9f;
 border-width: 26px 0 26px 18px;
}
.support_content_after {
 position: relative;
 width:16%;
 background: #f5fbff;
 border: 1px solid #6899dd;
 display:inline-block;
 text-align:center;
 font-size:11px;
 height:50px;
 color:#6899dd;
 line-height:1.5em;
 margin-right:16px;
 margin-bottom:25px;
}
.support_content_after:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #f5fbff;
 border-width: 25px 0 25px 18px;
 z-index: 10;
}
.support_content_after:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-2px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 26px 0 26px 18px;
}
.support_content_settlement {
 position: relative;
 width:45%;
 background: #f5fbff;
 border: 1px solid #6899dd;
 display:inline-block;
 text-align:center;
 font-size:11px;
 height:50px;
 color:#6899dd;
 line-height:1.5em;
 margin-bottom:25px;
}
.support_content_settlement:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #f5fbff;
 border-width: 25px 0 25px 18px;
 z-index: 10;
}
.support_content_settlement:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-2px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 26px 0 26px 18px;
}
/* 導入前後矢印 */
.arrow_before {
 position: relative;
 width:34%;
 background: #fff;
 border: 1px solid #6899dd;
 float:left;
 text-align:center;
 font-size:11px;
 height:20px;
 color:#6899dd;
 line-height:1.5em;
 clear:both;
}
.arrow_before:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-0px;
 right:-10px;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 border-width: 9px 0 9px 10px;
 z-index: 10;
}
.arrow_before:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-10px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 10px 0 10px 10px;
}
.arrow_after {
 position: relative;
 width:63%;
 background: #6899dd;
 float:right;
 margin-right:20px;
 color:#ffffff;
 text-align:center;
 font-size:11px;
 height:20px;
 line-height:1.5em;
}
.arrow_after:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:0px;
 right:-10px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 10px 0 10px 10px;
}
/* ステップフロー */
.stepflow {
 display: block;
 list-style: none;
 padding: 0 0 50px;
 position: relative;
 width: 100%
}
.stepflow a:hover,.stepflow a:active,.stepflow a:focus {
 text-decoration: none
}
.stepflow li {
 display: block;
 float: left;
 text-align: center;
 padding-left: 0
}
.before_introduction {
 width:8.5%;
}
.after_introduction {
 width:16%;
}
.stepflow li:before {
 border-top: 1px solid #211616;
 content: "";
 display: block;
 overflow: hidden;
 position: relative;
 width: 100%;
 z-index: 1
}
.stepflow li:first-child:before {
 max-width: 100%;
 border-top: 1px solid #211616;
 display: block;
 overflow: hidden;
 position: relative;
 width: 100%;
 z-index: 1
}
.stepflow li:last-child:before {
 max-width: 100%;
}
.step1 {　
 font-size:16px;
 color: #B2B5B9;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 top:-13px;
 right:50%;
}
.step2 {
 font-size:18px;
 line-height:0px;
 color: #f8405c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step3 {
 font-size:20px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step4 {
 font-size:22px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step5 {
 font-size:24px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step6 {
 font-size:24px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
 top:2px;
}
.stepflow li .title {
 color: #333;
 display: block;
 font-size: 13px;
 line-height: 15px;
 max-width: 100%;
 position: relative;
 table-layout: fixed;
 text-align: center;
 top: 20px;
 word-wrap: break-word;
 z-index: 104;
 float:right;
}

/* システムサポート内容 */
.support_content {
 position: relative;
 width:60%;
 background: #fff;
 border: 1px solid #6899dd;
 padding: 1em;
 float:right;
 margin:0px 50px 100px 0;
 height:83px;
}
.support_content:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-0px;
 right:-40px;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 border-width: 41px 0 41px 40px;
 z-index: 10;
}
.support_content:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-41px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 42px 0 42px 40px;
}
.support_content_icon {
 float:left;
 font-size:16px;
 color:#6899dd;
 font-weight:bold;
 width:42%;
 line-height:3em;
}
.support_content_icon img{
 float:left;
 margin-right:15px;
}
.support_content_p {
 float:right;
 width:55%;
 font-size:11px;
 line-height:1.5em;
}
.support_qa_box {
 width: 100%;
 margin: 100px auto 50px;
 padding: 100px 0;
 box-shadow:2px 2px 4px #dcdcdc;
}
.support_qa_box_inner {
 width: 50%;
 margin: 50px auto;
 background: #fff;
 padding: 50px;
 box-shadow:2px 2px 4px #dcdcdc;
}
.support_qa_box h5 {
 text-align: center;
}
.support_q{
 font-size: 16px;
 margin-bottom: 10px;
 margin-left: 100px;
}
.support_q:before {
 font-family: "Font Awesome 5 Free";
 content: "\f059";
 font-weight: 900;
 color: #6899dd;
 padding-right: 20px;
}
.support_a{ 
 margin-left: 55px;
 margin-bottom: 30px;
}
/*--------------------------------
コンサルティングサポートお問合せボタン
---------------------------------*/
.support_btn{
 position: relative;
 border: 1px solid #ff871c;
 margin-left: auto;
 margin-right: auto;
 width: 500px;
 height: 48px;
 line-height: 48px;
 display: flex;
 text-align: center;
 background: #fff;
 font-size: 20px;
 margin-top: 100px;
 text-decoration: none;
}
.support_btn_text{
 width: 100%;
 height: 100%;
 color: #ff871c;
 z-index: 10;
}
.support_btn_text:before{
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 width: 0;
 display: block;
 background: #ff871c;
 z-index: -1;
 transition: .2s;
}
.support_btn_text:hover{
 color: #fff;
}
.support_btn_text:hover:before{
 width: 100%;
}
.mr_20 {
 margin-right:20px
}

/*--------------------------------
料金プラン
---------------------------------*/
#plan {
 width:100%;
}
#plan .inner{
 width:1200px;
 margin: 100px auto;
 background: #fff;
}
#plan_image {
 background: 
 linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,0.5) 100%);
 overflow: hidden;
 margin-top: 50px;
}
#plan_image .inner{
 width:1200px;
 margin: 100px auto;
 background: #fff;
 border-radius: 50px;
}
.about_plan_box_inner {
 width:80%;
 margin:0 auto;
 display:flex;
 padding: 100px;
 justify-content: space-evenly;
}
.about_plan_flex_box {
 width : 45%;
 text-align:center;
}
.trial_flex_box_plus {
 width : calc(100% / 3) ;
 text-align:center;
}
.about_plan_initialcost {
 width:300px;
 height:300px;
 background:#fff;
 border:solid 1px #FF9845;
 margin:0 auto;
}
.about_plan_initialcost p{
 font-size: 22px;
 margin: 60px auto 0;
 line-height: 3em;
 color:#FF9845;
}
.about_plan_initialcost span{
 font-size: 120px;
 font-weight: bold;
 margin-left: 20px;
}
.plus {
 font-size:100px;
 line-height: 300px;
 color: #ff871c;
}
.about_plan_price {
 width:300px;
 height:300px;
 background:#FF9845;
 color:#fff;
 margin:0 auto;
}
.about_plan_monthly{
 font-size: 22px;
 padding-top: 60px;
 line-height: 2.5em;
}
.about_plan_monthly span{
 font-size: 85px;
 font-weight: bold;
 margin-left: 20px;
}
#plan h3{
 border-bottom: solid 1px #e7e7e7;
 position: relative;
 font-weight: normal;
 margin-top: 80px;
}
#plan h3:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 1px #6899dd;
 bottom: -1px;
 width: 20%;
}
.plan_flex1{
 display: flex;
 justify-content: space-between;
 width:70%;
 margin:100px auto;
}
.plan_flex2{
 display: flex;
 justify-content: space-between;
 margin:50px 0;
}
.plan_contents {
 width:48%;
 border:1px solid #dcdcdc;
 box-shadow: 2px 2px 4px #dcdcdc;
 text-align:center;
}
.plan_contents_title {
 font-size:22px;
 margin:20px auto;
}
.system_fee {
 background:#ff871c;
 height:200px;
 padding:20px;
}
.system_fee_title {
 font-size:30px;
 font-weight:bold;
}
.system_fee_title_span {
 font-size:18px;
 font-weight:normal;
}
.system_fee p {
 color:#fff;
}
.system_fee_btn{
 width:70%;
 height:50px;
 background:#ff871c;
 border-radius:30px;
 margin:50px auto;
 color:#fff;
 text-decoration:none;
}
a .system_fee_btn{
 text-decoration:none;
}
.system_fee_btn:before{
 content: "\f1d8";
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 margin-right: 10px;
 color: #fff;
 line-height:50px;
}
.system_fee_btn:hover{
 opacity:0.5;
}
.consulting_fee {
 background:#6899dd;
 height:200px;
 padding:20px;
}
.consulting_fee p {
 color:#fff;
}
.consulting_fee_title {
 font-size:30px;
 font-weight:bold;
}
.consulting_fee_btn {
 width:70%;
 height:50px;
 background:#6899dd;
 border-radius:30px;
 margin:50px auto;
 color:#fff;
 text-decoration:none;
}
.consulting_fee_btn:before{
 content: "\f1d8";
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 margin-right: 10px;
 color: #fff;
 line-height:50px;
}
.consulting_fee_btn:hover {
 opacity:0.5;
}
#per_user {
 text-decoration: none;
}
.per_user_link {
 color:#fbfbfb;
 text-decoration:underline;
}
.per_user_link:hover {
 color:#fbfbfb;
 opacity: 0.5;
}
.plan_item {
 width:19%;
 border:1px solid #dcdcdc;
 box-shadow: 2px 2px 4px #dcdcdc;
 text-align:center;
 background:#fff;
}
.plan_item:hover {
 width:19%;
 border:1px solid #dcdcdc;
 box-shadow: 2px 2px 4px #dcdcdc;
 text-align:center;
 transform: scale(1.2);
 transition-duration: 0.3s;
}
.plan_title {
 position: relative;
 color:#4683C1;
 margin:20px 0;
 font-size:20px;
 font-weight:bold;
 text-align:center;
}
.plan_title:before {
 position: absolute;
 bottom: -3px;
 left: calc(50% - 30px);
 width: 60px;
 height: 2px;
 content: '';
 border-radius: 3px;
 background: #4683C1;
}
.monthly_price {
 margin:0;
}
.monthly {
 font-size:16px;
}
.plan_price {
 font-size:24px;
 font-weight:bold;
}
.unit_price {
 color:#c0c0c0;
}
#plan table{
 border-collapse:collapse;
 margin:0 auto 50px;
}
#plan table th{
 color:#6899dd;
 border-bottom:2px solid #6899dd!important;
}
#plan table td{
 border-bottom:1px dashed #999;
}
#plan table tr:last-child{
 border-bottom:2px solid #6899dd!important;
}
#plan table th:last-child{
 border-bottom:2px solid #6899dd!important;
}
#plan table td,th{
 padding:10px 10px 10px 20px;
}
#plan .table_title{
 width:25%;
}
#plan .link_btn {
 padding: 5px 20px;
 border: 1px solid #2E7B9C;
 background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(46,123,156,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 color: #2E7B9C;
 float: right;
 font-weight: normal;
}
#plan .link_btn:hover {
 background-position: -100% 0;
 color: #fff;
}
.plan_btn{
 position: relative;
 border: 1px solid #6899dd;
 margin-left: auto;
 margin-right: auto;
 width: 500px;
 height: 48px;
 line-height: 48px;
 display: flex;
 text-align: center;
 background: #fff;
 font-size: 20px;
 margin-top: 100px;
 text-decoration: none;
}
.plan_btn_text{
 width: 100%;
 height: 100%;
 color: #6899dd;
 z-index: 10;
}
.plan_btn_text:before{
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 width: 0;
 display: block;
 background: #6899dd;
 z-index: -1;
 transition: .2s;
}
.plan_btn_text:hover{
 color: #fff;
}
.plan_btn_text:hover:before{
 width: 100%;
}

/*--------------------------------
よくある質問
---------------------------------*/
/* よくある質問 */
@media screen and (min-width:768px){
#faq {
 width:1080px;
 margin:0 auto;
}
#faq .inner{
 width: 1080px;
 margin: 0 auto;
}
#faq h3{
 border-bottom: solid 1px #e7e7e7;
 position: relative;
 font-weight: normal;
 margin-top: 80px;
}
#faq h3:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 1px #6899dd;
 bottom: -1px;
 width: 20%;
}

.page_links {
 width: 800px;
 margin:100px auto 50px;
 display: flex;
 justify-content: space-between;
}
#faq_function,#faq_fee,#faq_security,#faq_others {
 margin-top: 100px;
}
/*== ページ内リンクの設定　*/
.btnfaq{
 /*線の基点とするためrelativeを指定*/
 position:relative;
 /*ボタンの形状*/ 
 color: #343839;
 padding: 10px 30px;
 display:inline-block;
 text-decoration: none;
 outline: none;
 margin-top: 10px;
}
/*テキストの設定*/
.btnfaq span{
 /*テキストを前面に出すためz-indexの値を高く設定*/
 position:relative;
 z-index: 2;
 vertical-align: middle;
}
.btnfaq:hover span{
 color: #fff;
 vertical-align: middle;
}
/*線の設定*/
.btnfaq::after {
 content:'';
 /*絶対配置で線の位置を決める*/
 position:absolute;
 z-index:1;
 bottom:0;
 left:0;
 /*線の形状*/
 background:#6e9fdd;
 width:100%;
 height:3px;
 /*アニメーションの指定*/
 transition:all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.btnfaq:hover::after {
 height:100%;
}
.btnfaq{
 /*線の基点とするためrelativeを指定*/
 position:relative;
 /*ボタンの形状*/ 
 color: #343839;
 padding: 10px 30px;
 display:inline-block;
 text-decoration: none;
 outline: none;
 margin-top: 10px;
}
/*テキストの設定*/
.btnfaq span{
  /*テキストを前面に出すためz-indexの値を高く設定*/
 position:relative;
 z-index: 2;
 vertical-align: middle;
}
.btnfaq:hover span{
 color: #fff;
 vertical-align: middle;
}
/*線の設定*/
.btnfaq::after {
 content:'';
 /*絶対配置で線の位置を決める*/
 position:absolute;
 z-index:1;
 bottom:0;
 left:0;
 /*線の形状*/
 background:#6e9fdd;
 width:100%;
 height:3px;
 /*アニメーションの指定*/
 transition:all 0.3s ease-in-out;
}
/*線が伸びて背景に*/
.btnfaq:hover::after {
 height:100%;
}
.p_question {
 font-size: 18px;
 padding: 10px;
}

/* アコーディオン */
#faq p {
 color: #333;
 text-align: left;
 font-family: 'hm_light', sans-serif;
 font-size: 16px;
 line-height: 1.45;
 position: relative;
 overflow: hidden;
 max-height: 250px;
 will-change: max-height;
 contain: layout;
 display: inline-block;
 opacity: 1;
 transform: translate(0, 0);
 margin-top: 5px;
 margin-bottom: 0px;
 padding: 10px 50px 10px 50px;
 transition: .3s opacity, .6s max-height;
 hyphens: auto;
 z-index: 2;
}
#faq h4 {
 font-size: 18px;
 padding: 30px 0 0 30px;
 margin: 0;
 border: none;
}
#faq ul {
 list-style: none;
 perspective: 900;
 padding: 0;
 margin: 0;
}
#faq ul li {
 position: relative;
 overflow: hidden;
 padding: 0;
 margin: 0;
 /*padding-bottom: 4px;*/
 /*padding-top: 18px;*/
 background: #fff;
 box-shadow: 0 3px 10px -2px rgba(0,0,0,0.1);
 -webkit-tap-highlight-color: transparent;
}
#faq ul li + li {
 margin-top: 15px;
}
#faq ul li:last-of-type {
 padding-bottom: 0;
}
#faq ul li i {
 position: absolute;
 transform: translate(-6px, 0);
 margin-top: 36px;
 right: 15px;
}
#faq ul li i:before, ul li i:after {
 content: "";
 position: absolute;
 background-color: #6e9fdd;
 width: 3px;
 height: 9px;
}
#faq ul li i:before {
 transform: translate(-2px, 0) rotate(45deg);
}
#faq ul li i:after {
 transform: translate(2px, 0) rotate(-45deg);
}
#faq ul li input[type=checkbox] {
 position: absolute;
 cursor: pointer;
 width: 100%;
 height: 100%;
 z-index: 1;
 opacity: 0;
 touch-action: manipulation;
}
#faq ul li input[type=checkbox]:checked ~ h4 {
 color: #000;
}
#faq ul li input[type=checkbox]:checked ~ p {
 /*margin-top: 0;*/
 max-height: 0;
 transition: .3s;
 opacity: 0;
 /*transform: translate(0, 50%);*/
}
#faq ul li input[type=checkbox]:checked ~ i:before {
 transform: translate(2px, 0) rotate(45deg);
}
#faq ul li input[type=checkbox]:checked ~ i:after {
 transform: translate(-2px, 0) rotate(-45deg);
}
hr.faq_hr{
 border-bottom: 0.5px solid #dcdcdc!important;
 width: 97.5%;
 margin: 9px auto;
 padding-bottom: 0px;
 border-top: none;
 display:block;
}
}
/*スマートフォン*/
@media screen and (max-width:768px){
 #faq .inner{
 width: 90%;
 margin: 0 auto;
 }
 #faq h3{
  border-bottom: solid 1px #e7e7e7;
  position: relative;
  font-weight: normal;
  margin-top: 80px;
 }
 #faq h3:after{
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 1px #6899dd;
  bottom: -1px;
  width: 20%;
 }
  #faq h4 {
  margin: 0;
 }
 #faq_function,#faq_fee,#faq_security,#faq_others {
  margin-top: 100px;
 }
/*== ページ内リンクの設定　*/
 .page_links {
  width: 90%;
}

 .btnfaq{
  /*線の基点とするためrelativeを指定*/
  position:relative;
  /*ボタンの形状*/ 
  color: #343839;
  padding: 10px 30px;
  display:inline-block;
  text-decoration: none;
  outline: none;
  margin-top: 10px;
 }
  #faq ul {
  list-style: none;
 }
  #faq ul li input[type=checkbox] {
  display: none;
 }
}
/*--------------------------------
会社概要ページ
---------------------------------*/
#company {
 margin: 50px auto;
 width:50%;
}
#company h2{
 font-size: 30px;
 margin-top: 100px;
}
#company table{
 width: 100%;
 border-spacing: 0;
}
#company table th{
 border-bottom: solid 1px #6899dd;
 padding: 10px 30px;
 width: 30%;
}
#company table td{
 border-bottom: solid 1px #e7e7e7;;
 text-align: left;
 padding: 10px 20px;
}
#company table td p {
 margin:0;
}
/*スマートフォン*/
@media screen and (max-width:768px){
　
}

/*--------------------------------
	個人情報保護方針（プライバシーポリシー）ページ
---------------------------------*/
#privacypolicy {
 width: 1080px;
 margin:0 auto;
 }
.privacypolicy_sign {
 margin: 50px 0;
 text-align: right; 
 }
.ol_box {
 margin: 0px auto;
 text-align: left;
 background-color: #f0f8ff;
 padding: 10px 10px;
 width: 90%;
}
.ol_box2 {
 margin: 20px auto;
 text-align: left;
 background-color: #f5f5f5;
 padding: 10px 10px;
 width: 90%;
}
.responsible_box {
 font-size: 16px;
 float: right;
 margin-top: 50px;
}
#privacypolicy p {
 font-size: 16px;
 margin-left: 40px;
 text-align: left;
}
#privacypolicy h3{
 border-bottom: solid 1px #e7e7e7;
 position: relative;
 font-weight: normal;
 margin-top: 80px;
}
#privacypolicy h3:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 1px #6899dd;
 bottom: -1px;
 width: 20%;
}
#privacypolicy h4{
 color: #6899dd;/*文字色*/
 border-bottom: dashed 1px #6899dd;
 font-weight: normal;
 width:95%;
 margin:40px 0 0 20px;
 font-size:22px;
}
#privacypolicy h4+p{
 margin-left:20px;
}
/*--------------------------------
利用規約　terms_of_service
---------------------------------*/
/* 利用規約 */
#terms_of_service {
 width:100%;
}
#terms_of_service .inner {
 width: 1200px;
 margin: 0 auto;
}
#terms_of_service h2 {
 text-align: center;
}
#terms_of_service h3 {
 font-size: 18px;
 font-weight: bold;
 margin: 30px 0 10px;
 border: none;
}
#terms_of_service h3:after {
 display: none;
}
#terms_of_service h4 {
 font-size: 16px;
 font-weight: bold;
 margin: 15px 0 0 20px;
 border: none;
}
#terms_of_service .table_of_contents {
 display: flex;
 margin-bottom: 100px;
 justify-content: space-around;
}
#terms_of_service .table_of_contents .box{
 width: 33%;
}
#terms_of_service .table_of_contents h4{
 margin: 5px 0 5px 20px;
}
#terms_of_service ol {
 margin: 0 0 10px 20px;
}
#terms_of_service p {
 margin: 0 0 0 20px;
}
ol.list_child{
 padding:0 0 0 2em;
 margin:0;
}
ol.list_child li{
 list-style-type:none;
 list-style-position:inside;
 counter-increment: cnt;
 margin-left: 12px;
 text-indent: -24px;
}
ol.list_child li:before{
 display: marker;
 content: "(" counter(cnt) ") ";
}
#terms_of_service .pdf {
 margin: 50px 0 100px;
 padding: 5px;
 position: relative;
 display: inline-block;
 transition: .3s;
 color: #6e9fdd;
 float: inline-end;
}
#terms_of_service .pdf::after {
 position: absolute;
 bottom: 0;
 left: 0;
 content: '';
 width: 0;
 height: 1px;
 background-color: #6e9fdd;
 transition: .3s;
}
#terms_of_service .pdf:hover::after {
 width: 100%;
}
/*--------------------------------
カルーセルスライダーのリンクを無効化
---------------------------------*/
.fc-icon-area .wp-posts-carousel-image a , .uscompany-icon-area .wp-posts-carousel-image a , .publishing-media-area .wp-posts-carousel-image a {
	pointer-events: none;
}
/*--------------------------------
サンクスページ
---------------------------------*/
#thanks {
 width:750px;
 margin: 100px auto;
}

/*--------------------------------
お問い合わせ
---------------------------------*/
#contact {
 width:100%;
}
.contact_box {
 width:50%;
 margin:50px auto;
}


/************************************
** Contact form7 レイアウト
************************************/
#cf-tbl{

}
#cf-tbl table{
 width: 100%;
 border-collapse: collapse;
 border: solid #CCC;
 border-width: 1px;
 color: #444;
 margin: 0 auto;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
 padding: 0.5em;
 text-align: left;
 vertical-align: top;
 border: solid #CCC;
 border-width: 1px;
 vertical-align: middle;
}
#cf-tbl table tr th{
 width: 35%;
 background: #eee;
}
span.wpcf7-list-item {
 display: block;
}
@media screen and (max-width:768px){
#cf-tbl{
 width: 100%;
}
#cf-tbl table,
#cf-tbl table tbody,
#cf-tbl table tr,
#cf-tbl table tr th,
#cf-tbl table tr td{
 display: block;
}
#cf-tbl table{
width: 100%;
border-width: 0 0 1px 0;
}
#cf-tbl table tr th,
#cf-tbl table tr td{
width: 100%;
padding: 3% 5%;
}
#cf-tbl table tr td{
border-width: 0px 1px 0px 1px;
}
}
/*「必須」文字デザイン*/
.required{
font-size:.8em;
padding: 5px;
background: #f8405c;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}
/*「任意」文字デザイン*/
.optional{
font-size:.8em;
padding: 5px;
background: #6899dd;
color: #fff;
border-radius: 3px;
margin-right: 5px;
}
/* 入力項目を見やすく */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
 width: 100%;
 padding: 8px 15px;
 margin-right: 10px;
 margin-top: 10px;
 border: 1px solid #d0d5d8;
 border-radius: 3px;
 background-color: #eff1f5;
}
textarea.wpcf7-form-control.wpcf7-textarea {
 height: 200px;
}
/* 「送信する」ボタン */
#cf7-btn {
 display: block;
 padding: 10px;
 width: 300px;
 height:50px;
 background:#4682b4;
 color: #fff;
 font-size: 18px;
 font-weight: 700;
 border-radius: 2px;
 margin: 50px auto 0;
}
input[type=submit] {
 width:100%;
 background: none!important;
 line-height:1em;
 padding: 0!important;
}
.privacy_agreement {
 margin-left:32px;
}
.kiyaku {
 width: 100%;
 height: 5em;
 border: solid 1px #000;
 padding: 1em;
 overflow: auto;
 margin-top: 30px;
}

@media screen and (max-width:768px){
#cf7-btn {
 width: 250px;
}
}
#cf7-btn:hover {
 background: #4cb547;
}
/* エラーメッセージを見やすく */
span.wpcf7-not-valid-tip,
.wpcf7-response-output.wpcf7-validation-errors {
 color: red;
 font-weight: 600;
}

/*--------------------------------
スマホ
---------------------------------*/
@media screen and(max-width: 768px) {
 fixed_banner {
 display: none;
 }
 }
@media only screen and (max-width: 768px) {
.footer-top-inner {
 width:98%;
 margin:0 auto; 
}
#content {
 margin:50px auto;
 width:100%;
}
.footer_middle {
 width:98%;
 margin:0 auto;
 text-align:center;
}
.footer_middle span {
 margin-right:50px;
}
.footer_middle span:after {
 content:"";
 display:inline-block;
 width:1px;
 height:20px;
 background-color:#a0a0a0;
 position:absolute;
 top:3px;
 margin-left:20px;
}
.footer_middle span:after:last-child {
 content:"";
 display:none;
 width:1px;
 height:20px;
 background-color:#a0a0a0;
 position:absolute;
 top:3px;
 margin-left:20px;
}
.copyright {
 width:98%;
 margin:0 auto;
}
.copyright img {
 float:left;
}
.copyright p{
 float:right;
 margin-top:40px;
}
.button-primary:before {
 font-family: "Font Awesome 5 Free";
 content: '\f0e0';
 font-weight: 900;
 margin-right:10px;
}
/* トップページ */
#top_page {
 width:100%;
}
#top_page h2 {
 border-left: 1px solid #333;
 padding: 25px 30px;
 font-size: 26px;
}
#top_page h3 {
 font-size: 20px;
 clear: both;
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 margin-bottom: 10px;
}
#top_page h4 {
 position: relative;
 padding: 1rem;
 border-bottom: 1px solid #6899dd;
}
#top_page h4:before {
 position: absolute;
 bottom: -14px;
 left: 1em;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0 12px;
 border-style: solid;
 border-color: #6899dd transparent transparent transparent;
}
#top_page h4:after {
 position: absolute;
 bottom: -13px;
 left: 1em;
 width: 0;
 height: 0;
 content: '';
 border-width: 14px 12px 0 12px;
 border-style: solid;
 border-color: #fff transparent transparent transparent;
}
.link_dl_btn {
 text-align:center;
}
.link_center {
 margin:50px auto 0;
 text-align: center;
}
#top_page .link_dl {
 padding: 10px 30px;
 border: 1px solid #f8405c;
 background-image: linear-gradient(to right, rgba(255,255,255,255) 50%, rgba(215,66,92,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 color: #f8405c;
 font-weight: normal;
 margin:0 auto;
}
#top_page .link_dl:hover {
 background-position: -100% 0;
 color: #fff;
}
#top_page .link_btn {
 padding: 5px 20px;
 border: 1px solid #2E7B9C;
 background-image: linear-gradient(to right, rgba(255,255,255,255) 50%, rgba(46,123,156,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 color: #2E7B9C;
 float: none;
 font-weight: normal;
 margin: 0 auto;
}
#top_page .link_btn:hover {
 background-position: -100% 0;
 color: #fff;
}
.info_about_okr {
 width:98%;
 margin:50px auto;
}
p.top_about {
 width:90%;
 margin:0 auto;
 text-align:left;
}
.about_okr {
 width:100%;
 background: linear-gradient(-90deg, #dcdcdc, #fff);
 padding:50px 0;
 overflow:hidden;
 margin:50px 0;
}
.about_okr_inner {
 width:96%;
 margin:0 auto;
}
.about_okr_p {
 width:94%;
 margin: 0 auto;
}
.about_okr_p p{
 margin-bottom:10px;
}
.about_okr_initial {
 border-bottom:2px solid #de5b7e;
}
.about_okr_pbox {
 width: 94%;
}
.about_okr_inner img {
 display:block;
 box-shadow: 20px 20px 0 #fff;
 float: none;
 width: 94%;
}
.about_merit {
 width:94%;
 margin:50px auto;
 overflow:hidden;
 padding-bottom: 50px;
}
.about_merit p{
 margin-bottom:10px;
}
.about_merit img {
 display:block;
 width:94%;
 float:none;
 box-shadow: 20px 20px 0 #fff;
}
.about_merit_pbox {
 float:none;
 width:94%;
 margin: 0 auto;
}
.about_function {
 width:100%;
 clear:both;
 margin:50px 0;
 background:#e0efff;
 overflow: hidden;
 padding: 50px 0;
}
.about_function_inner {
 width:94%;
 margin:0 auto;
 padding:50px 0;
}
.about_function_pbox p{
 margin-bottom:10px;
}
.about_function_pbox {
 width: 100%;
}
.about_function_inner img {
 display:block;
 width:100%;
 box-shadow: 20px 20px 0 #fff;
 margin-bottom: 30px;
}

/*.about_function_flex {
 display: flex;
}
.about_function_inner_box {
 width: calc(100% / 3);
}
.about_function_inner_box {
 margin-right:25px
}
.about_function_inner_box:last-child {
 margin-right:0px
}*/

.about_plan {
 width:98%;
 margin:100px auto;
 overflow:hidden;
}
.blog_article {
 width:98%;
 margin:100px auto;
}
.wpcu_block_title {
 border-left: 1px solid #000;
 padding: 25px 30px;
 font-size: 26px!important;
}
/*--------------------------------
導入メリットページ(スマホ)
---------------------------------*/
#merit {
 width:100%;
}
.merit_info {
 width:100%;
 background:#be75a9;
 overflow:hidden;
 padding:50px 0;
 margin:50px 0;
}
.merit_info h3 {
 color:#fff;
 font-size: 20px;
}
.merit_info_box {
 width:100%;
 margin:0 auto;
 text-align: center;
}
.merit_info_box img {
 float:none;
 margin: 0 auto;
 width:90%;
 box-shadow:20px 20px 0 #fff;
}
.merit_info_text {
 float:none;
 width:94%;
 margin: 0 auto;
 text-align: left;
}
.merit_info_text p{
 color:#fff;
}
.merit_contents {
 width:94%;
 margin:0 auto;
}

.merit_contents h2{
}
.merit_contents h3 {
 font-size: 18px;
 clear: both;
 margin-top: 20px;
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 line-height: 34px;
 padding: 15px 0px;
}
.merit_contents_box_l {
 float:none;
 width:100%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 50px;
}
.merit_contents_box_l img {
 width: 100px;
 float: left;
 margin-right: 20px;
}
.merit_contents_box_r {
 float:none;
 width:100%;
 border: 1px solid #dcdcdc;
 padding: 20px;
 margin-bottom: 50px;
}
.merit_contents_box_r img{
 width: 100px;
 float: left;
 margin-right: 20px;
}
/*--------------------------------
料金プラン(スマホ)
---------------------------------*/
#plan {
 width:100%;
 margin: 0 auto;
}
#plan h3{
 border-bottom: solid 1px #e7e7e7;
 position: relative;
 font-weight: normal;
 margin-top: 80px;
}
#plan h3:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 1px #6899dd;
 bottom: -1px;
 width: 20%;
}
.plan_flex1{
 display: block;
 width:94%;
 margin:50px auto;
}
.plan_flex2{
 display: block;
 margin:50px auto;
 width:94%;
}
.plan_contents {
 width:100%;
 border:1px solid #dcdcdc;
 box-shadow: 2px 2px 4px #dcdcdc;
 text-align:center;
 margin-bottom: 50px;
}
.plan_contents_title {
 font-size:22px;
 margin:20px auto;
}
.system_fee {
 background:#ff871c;
 height:200px;
 padding:20px;
}
.system_fee_title {
 font-size:30px;
 font-weight:bold;
}
.system_fee_title_span {
 font-size:18px;
 font-weight:normal;
}
.system_fee p {
 color:#fff;
}
.system_fee_btn{
 width:90%;
 height:50px;
 background:#ff871c;
 border-radius:30px;
 margin:30px auto;
 color:#fff;
 text-decoration:none;
}
a .system_fee_btn{
 text-decoration:none;
}
.system_fee_btn:before{
 content: "\f1d8";
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 margin-right: 10px;
 color: #fff;
 line-height:50px;
}
.system_fee_btn:hover{
 opacity:0.5;
}
.consulting_fee {
 background:#6899dd;
 height:200px;
 padding:20px;
}
.consulting_fee p {
 color:#fff;
}
.consulting_fee_title {
 font-size:30px;
 font-weight:bold;
}
.consulting_fee_btn {
 width:90%;
 height:50px;
 background:#6899dd;
 border-radius:30px;
 margin:30px auto;
 color:#fff;
 text-decoration:none;
}
.consulting_fee_btn:before{
 content: "\f1d8";
 font-family: 'Font Awesome 5 Free';
 font-weight: 900;
 margin-right: 10px;
 color: #fff;
 line-height:50px;
}
.consulting_fee_btn:hover {
 opacity:0.5;
}
#per_user {
 text-decoration: none;
}
.per_user_link {
 color:#fbfbfb;
 text-decoration:underline;
}
.per_user_link:hover {
 color:#fbfbfb;
 opacity: 0.5;
}
.plan_item {
 width:100%;
 border:1px solid #dcdcdc;
 box-shadow: 2px 2px 4px #dcdcdc;
 text-align:center;
 background:#fff;
 margin-bottom: 30px;
}
.plan_item:hover {
 width:100%;
 border:1px solid #dcdcdc;
 box-shadow: 2px 2px 4px #dcdcdc;
 text-align:center;
 transform: scale(1.1);
 transition-duration: 0.3s;
}
.plan_title {
 position: relative;
 color:#4683C1;
 margin:20px 0;
 font-size:20px;
 font-weight:bold;
 text-align:center;
}
.plan_title:before {
 position: absolute;
 bottom: -3px;
 left: calc(50% - 30px);
 width: 60px;
 height: 2px;
 content: '';
 border-radius: 3px;
 background: #4683C1;
}
.monthly_price {
 margin:0;
}
.monthly {
 font-size:16px;
}
.plan_price {
 font-size:24px;
 font-weight:bold;
}
.unit_price {
 color:#c0c0c0;
}
#plan table{
 border-collapse:collapse;
 margin:0 auto 50px;
}
#plan table th{
 color:#6899dd;
}
#plan table td{
 border-bottom:1px dashed #999;
}
#plan table th,tr:last-child td{
 border-bottom:2px solid #6899dd!important;
}
#plan table td,th{
 padding:10px 10px 10px 20px;
}
#plan .table_title{
 width:25%;
}
#plan .link_btn {
 padding: 5px 20px;
 border: 1px solid #2E7B9C;
 background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(46,123,156,1) 50%);
 background-position: 0 0;
 background-size: 200% auto;
 transition: .3s;
 color: #2E7B9C;
 float: right;
 font-weight: normal;
}
#plan .link_btn:hover {
 background-position: -100% 0;
 color: #fff;
}
/*--------------------------------
コンサルティングサポートページデザイン(スマホ)
---------------------------------*/
#support {
 width:100%;
 margin:100px auto;
}
#support h2{
 border-left: 1px solid #333;
 margin: 40px -29px 20px;
 padding: 25px 30px;
 font-size: 26px;
}
#support h3{
 border-bottom: solid 1px #e7e7e7;
 position: relative;
 font-weight: normal;
 margin-top: 80px;
}
#support h3:after{
 position: absolute;
 content: " ";
 display: block;
 border-bottom: solid 1px #6899dd;
 bottom: -1px;
 width: 20%;
}
#support h4{
 color: #6899dd;/*文字色*/
 border-bottom: dashed 1px #6899dd;
 font-weight: normal;
 width:90%;
 margin-left:20px;
}
#support h4+p{
 margin-left:20px;
}
.support_img {
 box-shadow: none;
}
.support_img_right {
 float:right;
 width:45%;
 border-radius: 15px;
 padding-left:20px;
 box-shadow: 3px 3px 5px #999;
 margin:50px 0;
}
/* サポート内容 */
.support_caption {
 font-size:16px;
 border:1px solid #6899dd;
 padding:1px 20px;
 width:200px;
 margin:0 auto 20px;
 text-align:center;
}
.support_title {
 border-bottom:1px solid #6899dd;
 margin:12px auto;
 text-align:center;
 width:80%;
 font-weight:bold;
}
.support_text {
 margin:0;
 color:#333;
 text-align:left;
 font-size:11px;
 margin-left:5px;
}
.support_content_before {
 position: relative;
 width:16%;
 background: #fff;
 border: 1px solid #9f9f9f;
 display:inline-block;
 text-align:center;
 font-size:11px;
 height:50px;
 color:#6899dd;
 line-height:1.5em;
 margin-right:10px;
 margin-bottom:25px;
}
.support_content_before:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 border-width: 25px 0 25px 18px;
 z-index: 10;
}
.support_content_before:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-2px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #9f9f9f;
 border-width: 26px 0 26px 18px;
}
.support_content_after {
 position: relative;
 width:16%;
 background: #f5fbff;
 border: 1px solid #6899dd;
 display:inline-block;
 text-align:center;
 font-size:11px;
 height:50px;
 color:#6899dd;
 line-height:1.5em;
 margin-right:16px;
 margin-bottom:25px;
}
.support_content_after:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #f5fbff;
 border-width: 25px 0 25px 18px;
 z-index: 10;
}
.support_content_after:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-2px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 26px 0 26px 18px;
}
.support_content_settlement {
 position: relative;
 width:36%;
 background: #f5fbff;
 border: 1px solid #6899dd;
 display:inline-block;
 text-align:center;
 font-size:11px;
 height:50px;
 color:#6899dd;
 line-height:1.5em;
 margin-bottom:25px;
}
.support_content_settlement:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #f5fbff;
 border-width: 25px 0 25px 18px;
 z-index: 10;
}
.support_content_settlement:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-2px;
 right:-18px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 26px 0 26px 18px;
}
/* 導入前後矢印 */
.arrow_before {
 position: relative;
 width:34%;
 background: #fff;
 border: 1px solid #6899dd;
 float:left;
 text-align:center;
 font-size:11px;
 height:20px;
 color:#6899dd;
 line-height:1.5em;
 clear:both;
}
.arrow_before:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-0px;
 right:-10px;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 border-width: 9px 0 9px 10px;
 z-index: 10;
}
.arrow_before:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-10px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 10px 0 10px 10px;
}
.arrow_after {
 position: relative;
 width:58%;
 background: #6899dd;
 float:right;
 margin-right:20px;
 color:#ffffff;
 text-align:center;
 font-size:11px;
 height:20px;
 line-height:1.5em;
}
.arrow_after:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:0px;
 right:-10px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 10px 0 10px 10px;
}
/* ステップフロー */
.stepflow {
 width:100%;
}
.stepflow {
 display: block;
 list-style: none;
 padding: 0;
 position: relative;
 width: 100%
}
.stepflow a:hover,.stepflow a:active,.stepflow a:focus {
 text-decoration: none
}
.stepflow li {
 display: block;
 float: left;
 text-align: center;
 padding-left: 0
}
.before_introduction {
 width:8.5%;
}
.after_introduction {
 width:16%;
}
.stepflow li:before {
 border-top: 1px solid #211616;
 content: "";
 display: block;
 overflow: hidden;
 position: relative;
 width: 100%;
 z-index: 1
}
.stepflow li:first-child:before {
 max-width: 100%;
 border-top: 1px solid #211616;
 display: block;
 overflow: hidden;
 position: relative;
 width: 100%;
 z-index: 1
}
.stepflow li:last-child:before {
 max-width: 100%;
}
.step1 {　
 font-size:16px;
 color: #B2B5B9;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 top:-13px;
 right:50%;
}
.step2 {
 font-size:18px;
 line-height:0px;
 color: #f8405c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step3 {
 font-size:20px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step4 {
 font-size:22px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step5 {
 font-size:24px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
}
.step6 {
 font-size:24px;
 line-height:0px;
 color: #ff871c;
 display: inline;
 position: relative;
 z-index: 2;
 transition: all .1s linear 0s;
 float:right;
 margin-right:-20px;
 top:2px;
}
.stepflow li .title {
 color: #333;
 display: block;
 font-size: 13px;
 line-height: 15px;
 max-width: 100%;
 position: relative;
 table-layout: fixed;
 text-align: center;
 top: 20px;
 word-wrap: break-word;
 z-index: 104;
 float:right;
}

/* システムサポート内容 */
.support_content {
 position: relative;
 width:60%;
 background: #fff;
 border: 1px solid #6899dd;
 padding: 1em;
 float:right;
 margin:50px 50px 100px 0;
 height:83px;
}
.support_content:before{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-0px;
 right:-40px;
 border-style: solid;
 border-color: transparent transparent transparent #fff;
 border-width: 41px 0 41px 40px;
 z-index: 10;
}
.support_content:after{
 content: "";
 position: absolute;
 width: 0;
 height: 0;
 margin:auto;
 top:-1px;
 right:-41px;
 border-style: solid;
 border-color: transparent transparent transparent #6899dd;
 border-width: 42px 0 42px 40px;
}
.support_content_icon {
 float:left;
 font-size:16px;
 color:#6899dd;
 font-weight:bold;
 width:42%;
 line-height:3em;
}
.support_content_icon img{
 float:left;
 margin-right:15px;
}
.support_content_p {
 float:right;
 width:55%;
 font-size:11px;
 line-height:1.5em;
}
/*--------------------------------
トライアルページ
---------------------------------*/
#trial{
 width:100%;
 overflow:hidden;
}
.trial_bg{
 background-image:none;
 width: 100%;
}
.trial_inner{
 width:94%;
 margin:0 auto;
 overflow:hidden;
}
.trial_title {
 font-size:26px;
 font-weight:bold;
 text-align: center;
}
#trial h2 {
 background:#6899dd;
 padding:10px;
 margin:50px auto;
 color:#fff;
 font-size:18px;
 text-align:center;
 width:100%;
}
.trial_support_box{
 width:100%;
 box-shadow: 2px 2px 4px #dcdcdc;
 margin-bottom:100px;
}
.bg_dot{
 background-color: #fff;
 background-image:radial-gradient(#a0a0a0 10%, transparent 10%);
 background-size: 5px 5px;
 margin:100px auto;
 width:100%;
}
.trial_support_box_inner {
 width:100%;
 margin:0 auto;
 display:flex;
}
.trial_flex_box {
 width : 45%;
 text-align:center;
}
.trial_flex_box_plus {
 width : 10%;
 text-align:center;
}
.traial_support {
 width:150px;
 height:150px;
 background:#fff;
 border:solid 1px #4683C1;
 margin:0 auto;
 color:#4683C1;
}
.trial_content {
 font-size:45px;
 font-weight:bold;
 line-height:1.3em;
 padding:10px;
}
.trial_content span {
 font-size:18px;
}
.plus {
 font-size:60px;
 line-height: 150px;
}
.traial_term {
 width:150px;
 height:150px;
 background:#4683C1;
 color:#fff;
 margin:0 auto;
}
.trial_p {
 text-align:left;
 margin:50px auto 0;
 width:100%;
 border-top:dotted 3px #dcdcdc;
 border-bottom:dotted 3px #dcdcdc;
 padding:20px 0;
}
.trial_inner_box {
 width:100%;
 margin:50px auto;
 background:#fff;
 padding:50px;
}
.trial_recommendation {
 
}
.trial_recommendation:before {
 font-family: "Font Awesome 5 Free";
 content: '\f14a';
 font-weight: 900;
 margin-right:10px;
 color:#4683C1;
}
.trial-form {
 width:100%;
 margin:0 auto;
}

/*--------------------------------
よくある質問
---------------------------------*/
/* よくある質問 */
#faq {
 width:100%;
 margin:0 auto;
}
.page_links {
 margin:50px auto;
}
.page_links a{
 margin:10px auto;
 padding:5px 20px;
 border:1px solid #6899dd;
 border-radius:5px;
 width: 80%;
 display: block;
}
/* Contact 7 */
.mandatory {
 font-size:12px;
 color:#dc143c;
}
/*--------------------------------
機能ページ
---------------------------------*/
#function {
 width: %;
 margin: 0 auto;
}
#function h3 {
 font-size: 20px;
 clear: both;
 margin-top: 20px;
 border-image: linear-gradient(to right, #6899dd, #be75a9, #f8405c, #be75a9, #ff871c) 1/0 0 2px;
 border-style: solid;
 line-height: 34px;
 padding: 0 20px 20px;
}
#function .content_box_1 {
 margin: 150px auto 100px;
 clear: both;
 overflow: hidden;
}
#function .content_box_1:last-child {
 margin: 100px 0;
}
#function .content_box_2 {
 margin: 100px 0;
 clear: both;
}
#function .content_box_1 img {
 float: none;
 width: 40%;
}
#function .content_box_2 img {
 float: none;
 width: 40%;
}
.content_text_right {
 float: none;
 width: 60%;
}
.content_text_left {
 float: none;
 width: 60%;
}
/*--------------------------------
利用規約 (スマホ)　terms_of_service
---------------------------------*/
/* 利用規約 */
#terms_of_service {
 width:100%;
}
#terms_of_service .inner {
 width: 90%;
 margin: 0 auto;
}
#terms_of_service h2 {
 text-align: center;
}
#terms_of_service h3 {
 font-size: 18px;
 font-weight: bold;
 margin: 30px 0 10px;
 border: none;
}
#terms_of_service h3:after {
 display: none;
}
#terms_of_service h4 {
 font-size: 16px;
 font-weight: bold;
 margin: 15px 0 0 20px;
 border: none;
}
#terms_of_service .table_of_contents {
 display: contents;
 margin-bottom: 50px;
}
#terms_of_service .table_of_contents .box{
 width: 100%;
}
#terms_of_service .table_of_contents h4{
 margin: 5px 0 5px 20px;
}
#terms_of_service ol {
 margin: 0 0 10px 20px;
}
#terms_of_service p {
 margin: 0 0 0 20px;
}
ol.list_child{
 padding:0 0 0 2em;
 margin:0;
}
ol.list_child li{
 list-style-type:none;
 list-style-position:inside;
 counter-increment: cnt;
 margin-left: -30px;
 text-indent: -22px;
}
ol.list_child li:before{
 display: marker;
 content: "(" counter(cnt) ") ";
}
}
 /* banner 閉じるバナー
 -----------------------------------------*/
/*フローティングバナー*/
.banner {
  display: none;
  position: fixed;
  margin: 15px 0;
  z-index: 99998;
  bottom : 100px;
  right : 15px;
  width: 230px;
  height: 230px;
  background: linear-gradient(to right, rgba(255,135,28,1) 0%,rgba(248,64,92,1) 100%);
 }
 .banner_close {
  float: right;
 }
 .banner_body {
  text-align: center;
  clear: both;
 }
 .usually {
  color: #fff;
  margin: 0px auto;
 }
 .banner_body .present {
  font-size: 30px;
  color: #fff;
  margin: 0;
  font-weight: bold;
 }
 .extension {
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  color: #fff;
  width: 90%;
  margin: 0 auto;
 }
 .hashtag {
  color:#6e9fdd;
  border-radius: 15px;
  padding: 3px 0 2px;
  background: #fff;
  width: 90%;
  margin: 10px auto;
 }