@charset 'UTF-8';
/*================================================
 *  一般・共通設定
 ================================================*/
#formcolourid {
max-width:100%
}
 * {
  box-sizing: border-box;
}

html {
    font-size: 62.5%;
}
body {
    font-size: 1.6em;
    color:#333;
    background-color: #f3f3f3;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    margin:0;
    padding:0;
    border:0;
    outline:0;
    vertical-align:baseline;
    line-height:1.5;
    word-break:break-all;
    font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
}

div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, input, textarea {
    margin:0;
    padding:0;
    border:none;
    font-size:100%;
    font-weight:normal;
    font-style:normal;
    vertical-align:baseline;
    background:transparent;
    line-height:1.5em;
}

img {
    vertical-align:bottom;
}

article, aside, details, figcaption, figure, footer, header, menu, nav, section, div, address, iframe, canvas, hr, textarea {
    display:block;
    line-height:1;
}

iframe {
    max-width:100% !important;
}

a, label {
    cursor:pointer;
}

blockquote {
    padding:0;
    margin:0;
    display:block;
}
#formcolourid {
width:100%
}
address, em {
    font-style:normal;
}

hr {
    border:0;
    margin:0;
    padding:0;
}

ul, ol, li {
    list-style:none;
}

textarea {
    resize:vertical;
    overflow:hidden;
    border:none;
}

input, button, select {
    vertical-align:middle;
    border-radius:0;
    border:none;
    background:transparent;
    margin:0;
    padding:0;
    cursor:pointer;
}

table {
    border-collapse:collapse;
}

*:before, *:after {
    padding:0;
    margin:0;
    line-height:1;
}
h1 , h2 , h3 , h4 {
    color:#000;
}
a {
    color:#ff7f00;
}
a:link , a:visited {
    color:#ff7f00;
}

* {
    box-sizing:border-box;
}

html {
    font-size:62.5%;
}

body {
    font-size:16px;
    font-size:1.6rem;
}

/* IE10以上 */

img {
    max-width:100%;
    height:auto;
}

a {
    color:inherit;
    text-decoration:none;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

a:hover {
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    opacity: 0.8;
}

.text-centerd {
    text-align:center;
}

.text-right {
    text-align:right;
}

.view-pc {
    display:block;
}
.view-pcA {
    display:block;
}
.view-sp {
    display:none;
}

.slide-menu {
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}

.spNav {
    display:none;
}
.clearfix:after, .header__menu_webCustomer:after, .header_txt:after {
  clear: both;
}
.header__logo img {
    margin-right: 10px;
    width:160px;
}
.header__logo.heartcore img {
    margin-right: 0px;
}

.headertop_txt {
    color: #666;
    font-size: 1.3rem;
}
.header__logo {
    font-size: 8px;
}
.header__logo span {
    line-height: 3;
    font-size: 8px;
}


.header__spnav, .header__spnav span {
    display:inline-block;
    -webkit-transition:all 0.4s;
    transition:all 0.4s;
    box-sizing:border-box;
}

.header__spnav {
    display:none;
    background-color:#ff7f00;
}

.header__spnav span {
    position:absolute;
    left:0;
    width:21px;
    height:2px;
    background-color:#fff;
}

.header__spnav span:nth-of-type(1) {
    top:14px;
    left:12px;
}

.header__spnav span:nth-of-type(2) {
    top:21px;
    left:12px;
}

.header__spnav span:nth-of-type(3) {
    bottom:14px;
    left:12px;
}

.header__spnav.is-active span:nth-of-type(1) {
    -webkit-transform:translateY(8px) rotate(-45deg);
    transform:translateY(8px) rotate(-45deg);
    left:11px;
}

.header__spnav.is-active span:nth-of-type(2) {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.header__spnav.is-active span:nth-of-type(3) {
    -webkit-transform:translateY(-7px) rotate(45deg);
    transform:translateY(-7px) rotate(45deg);
    left:11px;
}

.spNav__menu--lev2 {
    display:none;
}

.spNav__menu--lev3 {
    display:none;
    padding-top:10px;
}

.spNav__link {
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_arrow.png) no-repeat 96% 50%;
    background-size:5px auto;
}

.spNav__link:hover {
    background-color:#dc2731;
}

.acc-menu {
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_plus.png) no-repeat 96% 50%;
    background-size:10px auto;
}

.acc-menu:hover {
    background-color:#dc2731;
}

.acc-menu.is-active {
    background:#910204 url(http://www.heartcorecloud.com/cloud/images/common/ico_minus.png) no-repeat 96% 50%;
    background-size:10px auto;
}

.acc-menu.is-active.acc-menu--nest.is-active {
    background-color:#dc2731;
}

.acc-menu.is-active:hover {
    background-color:#910204;
}

.acc-menu--nest.is-active {
    background-color:#dc2731;
}

.header {
    width:100%;
    position:relative;
    -webkit-transition:all 0.5s linear;
    transition:all 0.5s linear;
}

.header.is-fixed {
    top:0;
    position:fixed;
    height:70px;
    z-index:7777;
    -webkit-transition:all 0.5s linear;
    transition:all 0.5s linear;
}

.header.is-fixed .header__topBox {
    display:none;
}

.navHeader {
    padding: 3px calc(50% - 650px);
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
        display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    position:relative;
}

.header.is-fixed .gnav__link {
    color:#333;
    text-shadow:none;
    -webkit-transition:all 0.4s linear;
    transition:all 0.4s linear;
    position:relative;
    padding-right:20px;
}

.header.is-fixed .gnav__link:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.header.is-second {
    z-index:7777;
}

.header.is-second .gnav__link {
    color:#333;
    text-shadow:none;
    -webkit-transition:all 0.4s linear;
    transition:all 0.4s linear;
    position:relative;
    padding-right:20px;
}

.header.is-second .gnav__link:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.header__topBox {
    padding:0 calc(50% - 650px);
    height:44px;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    border-bottom:1px solid #d6d6d6;
    background-color:#f4f4f4;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    position:relative;
    z-index:10;
}

.header__description {
    padding:0 20px;
}

.header__menu {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    margin-left:auto;
    height:34px;
    white-space:nowrap;
}

.header__menu li {
    height:34px;
    line-height:33px;
    border-left:1px solid #d6d6d6;
    padding: 0 10px;
}

.header__menu li:last-child {
    border-right:1px solid #d6d6d6;
}

.header__menu li.ico-partner a:before, .header__menu li.ico-customer a:before {
    left:98%;
}

.header__menu a {
    color:inherit;
    text-decoration:none;
    display:inline-block;
    padding:0 10px;
}

.header__menu a:before {
    left:100%;
    box-sizing:border-box;
    width:4px;
    height:4px;
    border:4px solid transparent;
    border-left:4px solid #333;
}
.header_txtarea {
    display: flex;
}
.headertop_txt {
    width: 90%;
}
.header__mainBox {
    padding: 2px calc(50% - 650px) 0px;
    z-index:10;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    position: relative;
    background-color: #f3f3f3;
    opacity: 0.8;
}

.header.is-fixed .dropdown, .header.is-fixed .dropdown.is-active {
    top:51px;
}

.header.is-second .dropdown.l-partner, .header.is-second .dropdown.l-customer {
    top:43px;
}

nav {
    position: absolute;
    right: 0;
}

h2.h2_title {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 1.0;
}


.gnav__list:after {
    margin-top:10px;
    content:'';
    height:0;
    width:0;
    padding-top:5px;
    background-color:#ff7f00;
    display:block;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.gnav__list:hover:after {
    width:100%;
    height:5px;
    padding-top:0;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.gnav__list.is-current:after, .gnav__list.is-active:after {
    width:100%;
    height:5px;
    padding-top:0;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.gnav__list:nth-child(2) .gnav__link:before, .gnav__list:nth-child(4) .gnav__link:before {
    margin-top:-2px;
    right:2px;
    -webkit-transform:rotate(90deg);
            transform:rotate(90deg);
}

.gnav__list:nth-child(2) .gnav__link:after, .gnav__list:nth-child(4) .gnav__link:after {
    display:none;
}

.gnav__link {
    color:inherit;
    color:#fff;
    text-decoration:none;
    text-shadow:#333 1px 1px 5px;
    font-size:16px;
    font-size:1.6rem;
    font-weight:bold;
    padding-right:20px;
    position:relative;
}

.gnav__link:before {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #ff7f00;
}

.footer {
    width:100%;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-flow:column;
        -ms-flex-flow:column;
            flex-flow:column;
    padding: 0px calc(50% - 650px);
}
.footer__menu {
    margin-left: 15px;
}
.footer__mainBox {
    padding:20px calc(50% - 650px);
    background: url(/sakidori/images/footer_logo-sakidori.png) no-repeat right 20px bottom 20px #333333;
    background-size: 10%;
}

.footer__mainBoxInner {
    position:relative;
    padding-left: 30px;
}

.footer__menuGroup {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
        -ms-flex-pack:justify;
            justify-content:space-between;
    padding-bottom:20px;
}

.footer__menuBox {
    width:170px;
    margin-right:30px;
}

.footer__menuBox:last-child {
    margin-right:0;
}

.footer__menuList {
  margin-bottom: 12px;
  line-height: 1.2;
  font-size: 1.3rem;
}
.footer__menuList a {
    color: #fff;
}
.footer__menuLink {
    color:inherit;
}

.footer__menuLink:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.footer__menuTitle {
    font-size:15px;
    font-size:1.5rem;
    padding-bottom:20px;
    color: #fff;
}

.footer__menuTitle a {
    color:inherit;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.footer__menuTitle a:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.footer__social {
    margin-left:auto;
    max-width:390px;
    max-height:365px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    overflow:hidden;
}

.footer__socialBox {
    width:50%;
}

.footer__socialBox iframe {
    width:100%;
}

.facebook-wrapper {
    max-width:500%;
    margin:0 auto;
}

.facebook-wrapper > .fb-page {
    width:100%;
}

.facebook-wrapper > .fb-page > span, .facebook-wrapper iframe {
    width:100% !important;
}

.footer__social--sp {
    display:none;
}

.footer__bottomBox {
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
    align-items:center;
    display: flex;
    height: 100px;
    color:#333;
    background-color:#fff;
    font-size: 1.6rem;
    padding: 0 20px;
}
.footer__bottomBox div {
    width: 20%;
    margin-right: 20px;
}
#footer_address {
    width: 80%;
    text-align: left;
}
.copyright {
    background-color: #ccc;
}
.footer_logo_HC {
    width: 100%;
    margin-right: 10px;
}
.footer__subNav {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    border-right:1px solid #fff;
}
.footer__subNav:first-child {
    border-right:none;
}
.footer__subNavList {
    border-left:1px solid #ff7f00;
}
.footer__subNavLink {
    color:#ff7f00;
    display:inline-block;
    padding:0 20px;
}

.footer__subNavLink:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.footer__logo {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    position:absolute;
    bottom:0;
}

.footer__logo img {
    width:140px;
    height:auto;
}

.footer__logo div {
    margin-right:35px;
    padding-right:30px;
    border-right:2px solid #ddd;
}

.footer__logo p {
    font-size:14px;
    font-size:1.4rem;
}

.footer__copyright {
    display: block;
    text-align: center;
}
.footer_trademark {
    font-size: 0.6rem;
    color: #fff;
}
.footer_trademark_02 {
    font-size: 0.6rem;
    color: #333;
    margin-bottom: 5px;
}
.contents {
    width:100%;
    margin:0;
}

.contents_inner {
    width:1040px;
    margin:0 auto;
    zoom:1;
}

.contents_inner:before, .contents_inner:after {
    content:'';
    display:block;
}

.contents_inner:after {
    clear:both;
}

.contents-section {
    padding: 20px calc(50% - 650px);
    background-color: #fff;
    position:relative;
    z-index:10;
    margin-bottom:30px;
}
.contents-section--contact , .contents-section--service {
    padding: 0px calc(50% - 650px);
    position:relative;
}

.contents-section_top {
    padding:20px calc(50% - 650px);
    background-color:#fff;
    position:relative;
    z-index:10;
    margin-bottom:30px;
}
.contents-section_semina {
    padding:20px calc(50% - 650px);
    background-color:#fff;
    position:relative;
    z-index:10;
}
.article_area {
    background-color:#fff;
}
.contents__text {
    font-size:18px;
    font-size:1.8rem;
    line-height:1.6;
    margin-bottom:40px;
}

.section-block {
    margin-bottom:30px;
    padding-bottom:25px;
}

.section-block p {
    line-height:1.6;
    font-size:16px;
    font-size:1.6rem;
}
.article_area {
    padding: 0 20px;
}
.txt_centerarea {
    text-align: center;
    margin-bottom: 10px;
}
.area_box {
    color:#ff7f00;
    padding-left: 100px;
    padding-right: 30px;
}
.area_box a, .area_box3 a{
    font-size: 1.8rem;
    line-height: 1.3;
}
.area_box2 {
    width: 50%;
    margin: 20px;
    border: 1px solid #ddd;
    text-align: center;
}
.area_box2 a {
    padding: 20px 40px;
    display: block;
}
.area_box2 > span {
    position: relative;
    display: inline-block;
    }
.area_box2 > span:before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    width: 0;
    height: 0;
    margin-top: -8px;
    border: 8px solid transparent;
    border-left: 8px solid #ff7f00;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.area_box2 > span:hover:before {
    right:-5px;
    transition:all 0.2s linear;
}
.area_box2:hover {
    opacity: 0.8;
}
.area_box3 {
    color:#ff7f00;
}
.area_box3 a:hover {
    text-decoration: none;
}
.btn_area.companyProfile > span:before {
    border-left: 8px solid #ff7f00;
}
.txt-right {
      text-align: right;
}
.right {
      text-align: right;
      margin-left: auto;
      padding-bottom: 5px;
}
.left{
      text-align: left;
      margin-right: auto;
      padding-bottom: 5px;
}
.bold{
    font-weight: bold;
}

.newmark {
    position: absolute;
    font-family: 'Lato', sans-serif;
    top: 0.7em;
    right: 0.7em;
    background: #ff7f00;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    display: block;
    padding: 0.3em 0.6em;
    line-height: 1.2;
    box-shadow: 2px 2px 0 rgba(51, 51, 51, 0.3);
}

.labelName {
    position: absolute;
    font-family: 'Lato', sans-serif;
    top: -0.2em;
    left: -0.2em;
    background-color: #009d2c;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    display: block;
    padding: 0.3em 0.6em;
    line-height: 1.2;
    box-shadow: 2px 2px 0 rgba(51, 51, 51, 0.3);
}
.labelName.download {
    top: 1em;
    left: -0.1em;
}

.box-column ul{
  width:100%;
}
.box-column .Box {
  width:45%;
  margin-right: 5%;
  margin-bottom:20px;
}

.box-column .Box2 {
  width:49%;
  margin-bottom:20px;
  display: inline-block;
  vertical-align: top;
}
.box-column .Box3 {
  width:32%;
  margin-bottom:20px;
  display: inline-block;
  vertical-align: top;
}
.box-column .Box4 {
  width:25%;
  margin-bottom:20px;
  display: inline-block;
  vertical-align: top;
}
.box-column .Box5{
  width:25%;
  margin-bottom:20px;
  display: inline-block;
  vertical-align: top;
}
.box-column .Box4 img{
  margin-bottom:5px;
  height:auto;
}
.box-column .Box5 img{
  margin-bottom:5px;
  height:auto;
}
.box-column .Box3 img{
  margin-bottom:5px;
  height:auto;
}
.case_list {
  list-style-type: none;
}
.case_list li {
  border-bottom: 1px solid #EEE;
  padding: 20px 10px;
}
.case_list li:after {
  clear: both;
  display: block;
  content: '';
}
.case_list li:first-child {
  padding-top: 0;
}
.case_list li p.img {
  width: 170px;
  float: left;
  padding-top: 10px;
  padding-bottom: 0 !important;
}
.case_list li .text {
  width: 540px;
  float: right;
  padding-top: 10px;
}
.case_list li .link {
  padding-bottom: 0 !important;
}
.comment_box:after {
  clear: both;
  display: block;
  content: '';
}
.comment_box .img {
  float: right;
  width: 27%;
  margin: 0 0 15px 15px;
}
.comment_box .text {
  width: 70%;
  float: left;
}
.comment_box .img2 {
  float: right;
  width: 37%;
  margin: 0 0 5px 0px;
}
.comment_box .text2 {
  width: 60%;
  float: left;
}
.bnr_area {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 10px;
}

/*上への矢印__20170215*/
.link_up {
    position:relative;
    color:inherit;
}
.link_up:after {
    display:inline-block;
    position:relative;
    content:'';
    top:-2px;
    width:0;
    height:0;
    margin-top:-5px;
    margin-left:7px;
    border:4px solid transparent;
    border-bottom:4px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.link_up:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*下への矢印__20170215*/
.link_down {
    position:relative;
    color:inherit;
}
.link_down:after {
    display:inline-block;
    position:relative;
    content:'';
    top:0px;
    width:0;
    height:0;
    margin-top:-5px;
    margin-left:7px;
    border:4px solid transparent;
    border-top:4px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}
.link_down:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*スクロール__20170215*/
.scroll {
  width: 100%;
  text-align: center;
  height: 300px;
  overflow-y: scroll;
  -moz-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  border: 1px solid #EEE;
  margin-bottom: 30px;
  background-color: #f7f8f9;
}
/*スマートフォンポートレイト用__20170215*/
.scroll img.w480 {
  width: 320px;
  height: auto;
}
/*スマートフォンポートレイト用__20170215*/
.scroll img.w320 {
  width: 320px;
  height: auto;
}
/*HeartCoreのパフォーマンス__20170216*/

.perfomance_link_circle {
  text-align: center;
}
.perfomance_link_circle li {
  text-align: center;
  margin: 20px 1% 0;
  display: inline-block;
}
.perfomance_link_circle li a {
    display: block;
  width: 200px;
  height: 90px;
  padding-top: 20px;
  margin: 0 auto;
  text-align: center;
  color: #FFF;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.perfomance_link_circle li a:hover {
  -ms-filter: "alpha( opacity=70 )";
  filter: alpha(opacity=70);
  opacity: 0.7;
  text-decoration: none;
}
.perfomance_link_circle li a {
  background: #ff7f00;
}
.link_white{
  position: relative;
}
.link_white:after {
  display: inline-block;
  position: relative;
  content: '';
  top: -2px;
  width: 0;
  height: 0;
  margin-top: -5px;
  margin-left: 7px;
  border: 4px solid transparent;
  border-left: 4px solid #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

/*スクロール高さ400__20170216*/
.scroll_h400{
  height: 400px;
  overflow: scroll;
  border: 1px solid #ff7f00;
  position: relative;
  -moz-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  -ms-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  -o-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
  box-shadow: 5px 5px 0 0px rgba(0, 0, 0, 0.05);
}

/*cadeの行間__20170216*/
code{
    line-height: 1.6em;
}
 pre, code {
  white-space: pre;
  /* CSS 2.0 */
  white-space: pre-wrap;
  /* CSS 2.1 */
  white-space: pre-line;
  /* CSS 3.0 */
  white-space: -pre-wrap;
  /* Opera 4-6 */
  white-space: -o-pre-wrap;
  /* Opera 7 */
  white-space: -moz-pre-wrap;
  /* Mozilla */
  white-space: -hp-pre-wrap;
  /* HP Printers */
  word-wrap: break-word;
  /* IE 5+ */
}

/*グレーボックス内のｐマージン__20170228*/
.lightGrayBox .lightGrayBox__txt {
    padding:0;
}
/*アンカーの位置を修正__20170228*/
    span.anchorlink {
       position: relative;
       top: -100px;
       display: block;
    }
/*タブのボタンのリンク範囲拡大__20170308*/
.tab a{
       display: block;
       width:100%;
       padding:20px;
    }
.name{
       margin-bottom: 20px;
}
.Annotation{
       font-size: 8px;
       font-size: 0.8rem;
        line-height: 1.3em;
}
span.sup{
       font-size: 50%;
       vertical-align: top;
       position: relative;
}
.view-p02{
  display: block;
}




/* =================================================================
* TOP
================================================================= */
.area_box .label_a {
    position: absolute;
    font-family: 'Lato', sans-serif;
    left: 1em;
    background: #ff7f00;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    display: block;
    padding: 0.3em 0.6em;
    line-height: 1.2;
}
.area_box > a:before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 5px;
    width: 0;
    height: 0;
    margin-top: -8px;
    border: 8px solid transparent;
    border-left: 8px solid #ff7f00;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.area_box > a:hover:before {
    right: 0px;
    transition:all 0.2s linear;
}
.btn_area {
    text-align: center;
    background: #ff7f00;
    color: #fff;
    font-size: 2.0rem;
}
.btn_area.companyProfile {
    text-align: center;
    background: #fff;
}
.btn_area.companyProfile a {
    font-size: 2.0rem;
    color: #333;
}
.btn_area > span {
    position: relative;
    display: inline-block;
    }
.btn_area > span:before, .btn_area2 > span:before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 0px;
    width: 0;
    height: 0;
    margin-top: -8px;
    border: 8px solid transparent;
    border-left: 8px solid #fff;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.btn_area.companyProfile > span:before {
    border-left: 8px solid #333;
}
.btn_area a {
    display: block;
    padding: 10px 180px;
    line-height: 2.5;
    color: #fff;
}
.btn_area.contact a , .btn_area.companyProfile a {
  display: block;
  padding: 10px 70px;
  line-height: 2.5;
}
.btn_area > span:hover:before {
    right:-10px;
    transition:all 0.2s linear;
}
.btn_area:hover {
    opacity: 0.8;
}
.btn_area.contact {
    width: 30%;
    margin-right: 10px;
}

.btn_area.companyProfile {
    width: 25%;
}
.button .button--contact {
    color: #fff;
}
.info {
    overflow-y: scroll;
    height: 240px;
    border: 1px solid #bbb;
    padding: 10px;
}
.info__list {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
    padding-left: 20px;
    font-size: 1.3rem;
}
.info__date {
    width:13%;
}
.info__text {
    width:70%;
    margin: 0;
    line-height: 1.3;
    margin-left: 10px;
}
.info__text a , .info__text a:link, .info__text a:visited {
    color: inherit;
}
.info__link {
    color: inherit;
}
.article-box_thumb {
 flex-basis:23%;
 order:1;
 margin-right: 20px;
}
.article-box_detail {
 flex-basis:75%;
 order:2;
}
.article-box__title {
 font-size: 18px;
 font-size: 1.8rem;
 font-weight: bold;
 margin-bottom: 10px;
 line-height: 1.3em;
}
.article-box__lead {
 margin-bottom: 20px;
 font-size: 14px;
 font-size: 1.4rem;
 line-height: 1.3em;
}
.article-box__cat {
 color: #fff;
 padding: 2px 15px;
 text-align: center;
 float:left;
}
.article-box__date {
 font-size: 19px;
 font-size: 1.9rem;
 float: right;
 padding-top:2px;
}
.blog_pagelinks {
 width: 100%;
 text-align: center;
 margin: 20px auto;
}
.blog_pagelinks .WCMpaged a {
 margin-right: 10px;
 border: 1px solid #ccc;
 padding: 5px 10px;
}
.blog_pagelinks a.WCMselected {
 color: #fff;
 background-color: #333;
}

.blog_illust img {
    max-width: 100%;
}
.blog_illust__cap {
margin-top: 10px;
}
.blog-container {
    background-color: #fff;
    padding: 50px 30px;
}
.blog-container h3 {
font-weight: bold;
margin: 40px 0 10px;
font-size: 18px;
font-size: 1.8rem;
text-align: left;
}
.blog-container h4 {
    font-weight: normal;
    margin: 20px 15px 5px;
    font-size: 18px;
    font-size: 1.8rem;
    text-align: left;
}
.blog-container h4:before {
    content: '';
    width: 4px;
    height: 4px;
    display: inline-block;
    border-radius: 100%;
    background: #333;
    position: relative;
    left: -10px;
    top: -3px;
}
.blog-container blockquote {
    background-color: #f5f5f5;
    background-image: url(/sakidori/topics/images/quote.png), url(/sakidori/topics/images/quote_2.png);
    background-repeat: no-repeat;
    background-position: 10px 10px, right 10px bottom 10px;
    padding: 50px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.blog-container blockquote p {
    margin-bottom: 15px;
    line-height: 1.8em;
}
.blog_sub {
line-height: 2.0em;
}
.blog_sub p {
text-indent: 1em;
margin-bottom: 1em;
    line-height: 1.6em;

}
.blog_sub p:last-child {
margin-bottom: 0em;
}
.blog_Serif {
    line-height: 2.0em;
}
.blog_Serif p{
    text-indent: -5em;
    padding-left: 5em;
    margin-bottom: 1em;
}
.blog_Serif p.indent{
    padding-left: 5em;
    text-indent: 0em;
    margin-bottom: 1em;
}
.blog_Serif.three p {
    text-indent: -3em;
    padding-left: 3em;
    margin-bottom: 1em;
}
.blog_last {
background-color: #eaeaea;
padding: 20px 30px;
margin: 50px 0;
}
.blog_last__head {
font-size: 14pt;
font-weight: bold;
margin-bottom: 10px;
}
.blog_last__body {
line-height: 1.5em;
}
.blog_last__body p {
margin-bottom: 1em;
}
.blog_last__body p:last-child {
margin-bottom: 0px;
}
.blog_relatives {
border-top:1px solid #ccc;
border-bottom:1px solid #ccc;
padding:20px 0;
margin:40px 0;"
}
.blog_relatives_flexbox {
display: flex;
}
.blog_relatives_thumb {
    flex-basis: 32%;
    margin: 0 5px;
    background-color: #eeeeee;
    padding: 5px;
}
.blog_img_80 {
    width: 80%;
    margin: 0 auto;
}
.waku {
    border: 1px solid #333;
    padding: 5px 10px;
    display: block;
    text-align: center;
    width: 50%;
    margin: 5px auto;
}
.blog_relatives_thumb p {
font-size: 10pt;
margin-top: 10px;
}
.blog_listed {
 margin-bottom: 20px;
 text-align: center;
}
.blog_list01 {
 margin-bottom: 1em;
 list-style-type: disc;
}
.blog_list01 li{
 list-style-type: disc;
 margin-left: 2em;
 line-height: 2em;
}
.blog_list02 {
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em 0.5em 30px 0.5em;
}
.blog_list02 li{
  position: relative;
  padding-left: 30px;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
  word-break: normal;
  line-break: strict;
}

.blog_list02 li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #ff7f00;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.blog_list02 p {
    text-indent: -1em;
    margin-left: 3em;
}
.blog_list01 .blog_list03 li{
    list-style-type: none;
    position: relative;
    margin-left: 1em;
}
.blog_list03 li::after {
  display: block;
  content: '';
  position: absolute;
  top: .5em;
  left: -1em;
  width: 6px;
  height: 6px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.blog_list04 {
	margin-bottom: 1em;
}
.blog_list04 li {
	margin-left: 7em;
	line-height: 2em;
	text-indent: -7em;
}
/*===============================================================
    effects
===============================================================*/
.fab {
    border-radius:50%;
    margin:0;
    padding:20px;
}

.material {
    position:relative;
    color:white;
    margin:20px auto;
    height:400px;
    width:500px;
    background:#f45673;
}

.ripple {
    overflow:hidden;
    position:relative;
    cursor:pointer;
    outline:none;
}

.ripple a:focus {
    outline:none;
}

.ripple-effect {
    position:absolute;
    border-radius:50%;
    width:50px;
    height:50px;
    background:white;
    -webkit-animation:ripple-animation 2s;
            animation:ripple-animation 2s;
}

@-webkit-keyframes ripple-animation {
    from {
        -webkit-transform:scale(1);
                transform:scale(1);
        opacity:0.4;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }
    to {
        -webkit-transform:scale(100);
                transform:scale(100);
        opacity:0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

@keyframes ripple-animation {
    from {
        -webkit-transform:scale(1);
                transform:scale(1);
        opacity:0.4;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    }
    to {
        -webkit-transform:scale(100);
                transform:scale(100);
        opacity:0;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }
}

/*===============================================================
    title styles
===============================================================*/
.titleGroup {
    position:relative;
}

.tit-section01 {
    font-size:25px;
    font-size:2.5rem;
    text-align:center;
    margin-bottom:14px;
    color: #fff;
}

.tit-section02 {
    font-size:24px;
    font-size:2.4rem;
    font-weight:bold;
    text-align:center;
    margin-bottom:30px;
    color:#ff7f00;
    line-height:1.4;
}

.tit-section03 {
    font-size:40px;
    font-size:4.0rem;
    font-weight:bold;
    text-align:center;
    margin-bottom:40px;
    line-height:1.4;
}

.tit-section04 {
    font-size: 23px;
    font-size: 2.3rem;
    font-weight: normal;
    margin-bottom: 0px;
    color: #fff;
    line-height: 2.2;
}

.tit-section-single {
    font-size:36px;
    font-size:3.6rem;
    line-height:1.6;
    text-align:center;
    font-weight:bold;
    margin-bottom:40px;
}


.tit-copy01 {
    font-size:30px;
    font-size:3.0rem;
    font-weight:bold;
    margin-bottom:14px;
    line-height:1.6;
}

.tit-dropdown01 {
    font-size:30px;
    font-size:3.0rem;
    margin-bottom:25px;
    line-height:1.6;
}

.tit-copy01--centered {
    font-size:30px;
    font-size:3.0rem;
    font-weight:bold;
    margin-bottom:14px;
    text-align:center;
    line-height:1.6;
}

.tit-copy02 {
    font-size:20px;
    font-size:2.0rem;
    font-weight:bold;
    margin-bottom:8px;
    line-height:1.6;
}

.tit-copy03 {
    font-size:20px;
    font-size:2.0rem;
    font-weight:bold;
    margin-bottom:8px;
    line-height:1.6;
    color:#d50010;
}
.tit01 {
    font-size: 20px;
    font-size: 2.0rem;
    margin-bottom: 30px;
    padding-left: 20px;
    border-left: 10px solid #ff7f00;
    line-height:1.5;
}
.tit-heading01 {
    font-size:24px;
    font-size:2.4rem;
    margin-bottom:25px;
    padding-bottom:12px;
    border-bottom:3px solid #ff7f00;
    line-height:1.3;
}

.tit-heading02 {
    font-size:20px;
    font-size:2.0rem;
    margin-bottom:25px;
    padding-bottom:12px;
    color:#ff7f00;
    border-bottom:1px solid #ff7f00;
    line-height:1.3;
}

.tit-heading03 {
    font-size:18px;
    font-size:1.8rem;
    margin-bottom:20px;
    padding-left:15px;
    border-left:4px solid #ff7f00;
    line-height:1.3;
}

.tit-red01 {
    color:#ff7f00;
    font-weight:bold;
    font-size:16px;
    font-size:1.6rem;
    margin-bottom:10px;
}

.title-copy {
    text-align:center;
    color:#ff7f00;
    font-size:24px;
    font-size:2.4rem;
    line-height:1.6;
    padding:20px 0 30px;
}

.circle-title {
    font-size:24px;
    font-size:2.4rem;
    line-height:1.4;
    text-align:center;
    margin-bottom:50px;
}

.category-title {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.6;
    margin-bottom:20px;
}

.category-title--01 {
    color:#ca1d06;
}

.category-title--02 {
    color:#e4832a;
}

.category-title--03 {
    color:#008c23;
}

.category-title--04 {
    color:#48a2df;
}

.category-title-sub {
    font-size:26px;
    font-size:2.6rem;
    line-height:1.4;
    margin-bottom:25px;
}

.band-title {
    font-size:40px;
    font-size:4.0rem;
    line-height:1.6;
    text-align:center;
    font-weight:bold;
}

.type-section-title {
    font-size:44px;
    font-size:4.4rem;
    line-height:1.6;
    margin-bottom:30px;
}

.tit-image {
    margin-bottom:30px;
}

/*===============================================================
    text styles
===============================================================*/
.typ-section01 {
    font-size:15px;
    font-size:1.5rem;
    text-align:center;
    margin-bottom:60px;
    line-height:1.5;
}

.typ-section02 {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.6;
    text-align:center;
    margin-bottom:30px;
}

.typ-section03 {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.6;
}

.typ-section04 {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.6;
    text-align:center;
    margin-bottom:80px;
}

.typ-section-heading {
    font-size:28px;
    font-size:2.8rem;
    line-height:1.8;
    text-align:center;
    margin-bottom:50px;
}

.typ-section-main {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.6;
}

@media (min-width: 768px) and (max-width: 1000px){
  .typ-section-main {
    font-size:13px;
    font-size:1.3rem;
 }
}

.txt-16 {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.5;
}

.txt-ex-small {
    font-size:8px;
    font-size:0.8rem;
    line-height:1.2;
}

.txt-red {
    color:#ff7f00;
}

.txt-group {
    margin-bottom:30px;
}

.more {
    position:absolute;
    top:50%;
    right:0;
    padding-right:25px;
    font-size:15px;
    font-size:1.5rem;
}

.more a {
    color:inherit;
    text-decoration:none;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.more a:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:5px;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.more a:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.more a:hover:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.external {
    padding:2px 24px 2px 0;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_external.png) no-repeat 100% 50%;
}

.external--w {
    padding:2px 24px 2px 0;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_external-w.png) no-repeat 98% 50%;
    background-size:14px auto;
}

.pdf {
    padding:2px 24px 2px 0;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_pdf.png) no-repeat 100% 50%;
}

.attention {
    color:#ff7f00;
}

small {
    font-size:14px;
    font-size:1.4rem;
}

strong {
    font-weight:bold;
}

.red {
    color:#ff7f00;
}

.notes {
    margin-bottom:30px;
}

.notes p {
    padding-bottom:15px;
}

.big_img {
    text-align:center;
}

.category__text {
    font-size:16px;
    font-size:1.6rem;
    line-height:1.6;
    margin-bottom:20px;
}

.step-number {
    font-size:34px;
    font-size:3.4rem;
    line-height:1.2;
    color:#ff7f00;
    padding-left:60px;
    display:inline-block;
    font-weight:bold;
}

.step-number-01 {
    background:url(http://www.heartcorecloud.com/cloud/images/heartcore_cxm/ico-step-01.png) no-repeat 0 50%;
}

.step-number-02 {
    background:url(http://www.heartcorecloud.com/cloud/images/heartcore_cxm/ico-step-02.png) no-repeat 0 50%;
}

.step-number-03 {
    background:url(http://www.heartcorecloud.com/cloud/images/heartcore_cxm/ico-step-03.png) no-repeat 0 50%;
}

.under-bar {
    width:50px;
    height:1px;
    display:block;
    margin:25px 50.45% 35px 49.55%;
    border-top:3px solid #ff7f00;
}

.attention-txt {
    color:#bf191f;
    font-size:16px;
    font-size:1.6rem;
}

.contact-text {
    margin-bottom:30px;
}

.contact-text a {
    color:inherit;
}

/*===============================================================
    button styles
===============================================================*/
.button {
    display:inline-block;
    font-size:16px;
    font-size:1.6rem;
    text-decoration:none;
}

.button--square {
    color:#ca1d06;
    width:340px;
    height:60px;
    line-height:56px;
    border:2px solid #ff7f00;
    text-align:center;
}

.button--square > span {
    position:relative;
    display:inline-block;
    padding-right:25px;
}

.button--square > span:before {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:5px;
    width:0;
    height:0;
    margin-top:-4px;
    border:4px solid transparent;
    border-left:4px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--square > span:hover:before {
    right:0;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--square-small {
    color:#ca1d06;
    padding:14px 20px;
    border:2px solid #ff7f00;
    text-align:center;
}

.button--square-small > span {
    position:relative;
    display:inline-block;
    padding-right:25px;
}

.button--square-small > span:before {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:5px;
    width:0;
    height:0;
    margin-top:-4px;
    border:4px solid transparent;
    border-left:4px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--square-small > span:hover:before {
    right:0;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--square-xsmall {
    color:#ca1d06;
    padding:7px 12px;
    font-size:13px;
    font-size:1.3rem;
    border:2px solid #ff7f00;
    text-align:center;
}

.button--square-xsmall > span {
    position:relative;
    display:inline-block;
    padding-right:15px;
}

.button--square-xsmall > span:before {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:0;
    height:0;
    margin-top:-4px;
    border:4px solid transparent;
    border-left:4px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--contact {
    color:#ca1d06;
    width:100%;
    max-width:310px;
    height:90px;
    line-height:86px;
    border-radius:3px;
    text-align:left;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--contact > span {
    position:relative;
    display:block;
    padding-left:16px;
    padding-right:25px;
    font-size:18px;
    font-size:1.8rem;
    font-weight:bold;
}

.button--contact > span:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:15px;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--contact > span:hover:after {
    right:10px;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    border-left:8px solid #fff;
}

.button--contact:hover {
    color:#fff;
    background-color:#ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}



.button--all, .button--event, .button--seminer {
    font-size:15px;
    font-size:1.5rem;
    border-radius:3px;
    background-color:#fff;
    box-shadow:1px 1px 2px 0 rgba(120, 120, 120, 0.6) inset;
    width:160px;
    height:35px;
    line-height:35px;
    display:inline-block;
    text-align:center;
    color:inherit;
}

.button--all.is-active {
    color:#fff;
    background-color:#ca1d06;
}

.button--all:hover {
    color:#fff;
    background-color:#ca1d06;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.button--event.is-active {
    color:#fff;
    background-color:#3476b8;
}

.button--event:hover {
    color:#fff;
    background-color:#3476b8;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.button--seminer.is-active {
    color:#fff;
    background-color:#e67f22;
}

.button--seminer:hover {
    color:#fff;
    background-color:#e67f22;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.button--entry {
    color:#c52b31;
    font-size:20px;
    font-size:2.0rem;
    border-radius:3px;
    background-color:#fff;
    border:2px solid #c52b31;
    width:314px;
    height:94px;
    line-height:90px;
    display:inline-block;
    text-align:center;
    position:relative;
    vertical-align:top;
}

.button--entry span {
    padding-right:40px;
    font-weight:bold;
}

.button--entry span:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:15px;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:6px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--entry:hover {
    color:#fff;
    background-color:#ca1d06;
}

.button--entry:hover:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:15px;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:6px solid #fff;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.button--end {
    color:#fff;
    font-size:20px;
    font-size:2.0rem;
    background-color:#777;
    width:314px;
    height:94px;
    line-height:90px;
    display:inline-block;
    text-align:center;
}

.pagetop {
    position:fixed;
    right:20px;
    bottom:-300px;
    z-index:100;
    -webkit-transition:all 0.4s linear;
    transition:all 0.4s linear;
}

.pagetop img {
    width:60px;
    height:60px;
}

.pagetop.is-active {
    -webkit-transition:all 0.4s linear;
    transition:all 0.4s linear;
    bottom:20px;
}

/*===============================================================
    label styles
===============================================================*/
/*=========================================
    NEWS label
=========================================*/
.label__news {
    border:1px solid #121212;
}

.label__topics {
    color:#e60113;
    border:1px solid #e60113;
}

/*===============================================================
    banner
===============================================================*/
.bnr {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

.bnr__list {
    width:15%;
    text-align:center;
}

.bnr__link {
    display:inline-block;
}

.bnr__link:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*===============================================================
    ico styles
===============================================================*/
.arrow {
    position:relative;
    display:inline-block;
    padding:0 26px 0 10px;
    vertical-align:middle;
    text-decoration:none;
}

.arrow:before, .arrow:after {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    margin:auto;
    content:'';
    vertical-align:middle;
}

/*===============================================================
    box styles
===============================================================*/
.contactGroup {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin-top: 20px;
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    background-color: #797979;
    padding: 20px 0;
}

.contactBox {
    width:31%;
    margin-right:2%;
    text-align:center;
    font-size:15px;
    font-size:1.5rem;
}

.contactBox a {
    color:#fff;
    display:block;
}

.contactBox:nth-child(3) {
    margin-right:0;
}

.contactBox:not(:last-child) {
    margin-bottom:15px;
}

.contactBox:last-child {
    margin-right:0;
}

.contactBox__tel {
    width:100%;
    max-width:310px;
    height:90px;
    text-align:left;
    border:2px solid #c01a21;
    border-radius:5px;
    display:-webkit-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

.contactBox__address {
    font-size:30px;
    font-size:3rem;
    font-weight:bold;
    margin-bottom:5px;
}

.contactBox__text {
    font-size:15px;
    font-size:1.5rem;
}

.contactBox__timeInfo {
    margin-left:16px;
    padding-left:36px;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_phone.png) no-repeat 0 50%;
    background-size:24px auto;
}

.circleGroup {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    margin-top:40px;
}

.circleGroup.view-sp {
    display:none;
}

.box-circle {
    width:100%;
    height:100%;
    max-width:230px;
    max-height:230px;
    margin:0 26px;
}

.box-circle > img {
    border:3px solid #2b80b9;
    border-radius:50%;
}

.imageBox {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin-bottom:90px;
}

.imageBox__last {
    margin-bottom: 0;
}

.imageBox .imageBox__textArea {
    width:44%;
}

.imageBox .imageBox__imageArea {
    margin-left:auto;
    margin-right: 0;
    width:52%;
}
section:nth-of-type(odd) .imageBox__imageArea {
    text-align:right;
}
.imageBox .imageBox__imageArea img.mw80 {
    max-width:80%;
}
.imageBox .imageBox__imageArea img.mw90 {
    max-width:90%;
}
.imageBox .imageBox__imageArea.graphArea {
    position:relative;
}

.imageBox .imageBox__imageArea .graphArea__image {
    width:100%;
    max-width:540px;
    padding-top:220px;
    display:block;
}

.imageBox.l-reverse {
    -webkit-flex-flow:row-reverse;
        -ms-flex-flow:row-reverse;
            flex-flow:row-reverse;
}

.imageBox.l-reverse .imageBox__textArea {
    width:44%;
}

.imageBox.l-reverse .imageBox__imageArea {
    margin-left:0;
    margin-right:auto;
}

.centerBox {
    margin-bottom:90px;
}

.centerBox .contents__text {
    text-align:center;
}
.rubyBox {
    border:1px solid #ca1e07;
    padding:32px 26px;
}

.rubyBox__title {
    font-size:18px;
    font-size:1.8rem;
    font-weight:bold;
    margin-bottom:1em;
}

.rubyBox__lists {
    line-height:1.5;
}

.rubyBox-column2 {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
    margin-bottom:20px;
}

.rubyBox-column2 .rubyBox {
    width:49%;
    margin-bottom:20px;
}

.lightGrayBox {
    font-size:16px;
    font-size:1.6rem;
    color:#333;
    border:10px solid #f4f4f4;
    padding:32px 26px;
    margin-bottom:20px;
}

.lightGrayBox__title {
    font-size:18px;
    font-size:1.8rem;
    font-weight:bold;
    margin-bottom:1em;
}

.lightGrayBox__txt {
    line-height:1.5;
}
.lightGrayBox__txtGroup {
    margin:30px 0 20px;
    line-height:1.5;
}

.definitionBox__title {
    font-size:18px;
    font-size:1.8rem;
    text-align:center;
    font-weight:bold;
    color:#fff;
    background-color:#ff7f00;
    padding:20px;
}

.definitionBox__wrap {
    border:2px solid #ff7f00;
    padding:35px;
}

.definitionBox__group {
    margin-top:30px;
}

.definitionBox__group:first-child {
    margin-top:0;
}

.phase {
    margin-bottom:20px;
}

.phase p {
    padding-bottom:10px;
    font-size:16px;
    font-size:1.6rem;
}

.phase .more-details {
    text-align:right;
}

.phase .more-details--soft a {
    width:41%;
}

.phase .more-details--manual a {
    width:51%;
}

.phase .more-details--online a {
    width:41%;
}

.box {
    width:100%;
    padding:30px;
    margin-bottom:30px;
}

.circle-area {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-justify-content:space-around;
        -ms-flex-pack:distribute;
            justify-content:space-around;
    margin-bottom:110px;
}

.circle__block {
    text-align:center;
    padding:0 15px;
}

.circle {
    margin-bottom:30px;
}

.circle-step-01 {
    padding-right:60px;
    background:url(http://www.heartcorecloud.com/cloud/images/heartcore_cxm/ico_triangle.png) no-repeat 100% 40%;
}

.circle-step-03 {
    padding-left:60px;
    background:url(http://www.heartcorecloud.com/cloud/images/heartcore_cxm/ico_triangle.png) no-repeat 0 40%;
}

.circle-area--around {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-justify-content:space-around;
        -ms-flex-pack:distribute;
            justify-content:space-around;
}

.circle-area--around .circle__block--tool {
    text-align:center;
    padding:0;
}

.available {
    position:relative;
}

.available .button--square-xsmall {
    position:absolute;
}

.available .available_btn1 {
    top:120px;
    left:140px;
}

.available .available_btn2 {
    top:225px;
    left:580px;
}

.available .available_btn3 {
    top:320px;
    left:100px;
}

/*===============================================================
    wappen styles
===============================================================*/
.wappen {
    color:#fff;
    padding:5px 26px;
    text-align:center;
    display:inline-block;
}

.wappen--blue {
    background-color:#3476b8;
}

.wappen--orange {
    background-color:#e67f22;
}

.wappen--red {
    display:inline-block;
    background-color:#ca1d06;
    padding:5px 10px;
    width: 8%;
}

.wappen--red-line {
    display:inline-block;
    color:#ca1d06;
    border:1px solid #ca1d06;
    padding:5px 10px;
}

.wappen--gray {
    display:inline-block;
    color:#fff;
    background-color:#777;
    padding:5px 10px;
}

.wappen--news {
    background-color:#1abc9c;
}

.wappen--topics {
    background-color:#ff7f00;
}

/*===============================================================
    form
===============================================================*/
.search-input {
    background-color:#eee;
    border-radius:5px;
    height:60px;
    font-size:18px;
    font-size:1.8rem;
    width:100%;
    max-width:calc(100% - 100px);
    margin-left:20px;
    padding:10px 20px;
}

.button-search {
    width:60px;
    height:60px;
    border-radius:5px;
    background:#e60012 url(http://www.heartcorecloud.com/cloud/images/common/ico_zoom-white.png) no-repeat 50% 50%;
    background-size:32px auto;
    margin-left:10px;
}

/*===============================================================
    link styles
===============================================================*/
.link {
    position:relative;
    color:inherit;
}

.link:after {
    display:inline-block;
    position:relative;
    content:'';
    top:-2px;
    width:0;
    height:0;
    margin-top:-5px;
    margin-left:7px;
    border:4px solid transparent;
    border-left:4px solid #ff7f00;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.link:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.link--same {
    padding-right:26px;
    position:relative;
    color:inherit;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_same.png) no-repeat 100% 50%;
}

.link--same:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.link--external {
    padding-right:23px;
    position:relative;
    color:inherit;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_external.png) no-repeat 100% 50%;
}

.link--external:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.link--mail {
    margin-right:3px;
    padding-right:18px;
    position:relative;
    color:inherit;
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_mail-s.png) no-repeat 100% 50%;
}

.link--mail:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

/*===============================================================
    is (state)
===============================================================*/
.is-active {
    display:block !important;
}

.is-relative {
    position:relative;
}

.is-absolute {
    position:absolute;
}

/*===============================================================
    news ticker
===============================================================*/
.news-ticker {
    background-color:#f7f5f2;
    padding:0 calc(50% - 650px) 0;
}

.news-ticker__group {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    padding:0;
}

.news-ticker__title {
    color:#fff;
    background-color:#ff7f00;
    padding:20px 25px;
    font-size:15px;
    font-size:1.5rem;
}

.news-ticker__title a {
    color:#fff;
}

.news-ticker__text {
    padding:16px 20px 16px 25px;
    background:url(http://www.heartcorecloud.com/cloud/images/index/bg_news-arrow.gif) no-repeat 0 50%;
    line-height:1.5;
}

.news-ticker__text a {
    color:#333;
    text-decoration:none;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.news-ticker__text a:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.news-ticker__text > p {
    display:none;
}

/*===============================================================
    shortcut menu
===============================================================*/
.shortcut-menu {
    width:460px;
    background-color:rgba(255, 255, 255, 0.7);
    padding:12px 10px 12px 20px;
    display:inline-block;
    position:relative;
    left:0;
    top:0;
}

.shortcut-menu__list {
    position:relative;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.shortcut-menu__list.n01 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu01.png) no-repeat 0 50%;
    background-size:40px 40px;
}

.shortcut-menu__list.n02 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu02.png) no-repeat 0 50%;
    background-size:40px 40px;
}

.shortcut-menu__list.n03 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu03.png) no-repeat 0 50%;
    background-size:40px 40px;
}

.shortcut-menu__list.n04 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu04.png) no-repeat 0 50%;
    background-size:40px 40px;
}

.shortcut-menu__list.n05 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu05.png) no-repeat 0 50%;
    background-size:40px 40px;
}

.shortcut-menu__list.n06 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu06.png) no-repeat 0 50%;
    background-size:40px 40px;
}

.shortcut-menu__list.n07 {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_menu07.png) no-repeat 0 50%;
    background-size:40px 40px;
}
/*--------------新規追加 20170515-----------------*/
.shortcut-menu__list.mysql {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_mysqitop.png) no-repeat 0 50%;
    background-size:40px 40px;
}
.shortcut-menu__list.mariadb {
    background:url(http://www.heartcorecloud.com/cloud/images/index/ico_mariadbtop.png) no-repeat 0 50%;
    background-size:40px 40px;
}
/*-------------------------------*/
.shortcut-menu__list:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:10px;
    width:0;
    height:0;
    margin-top:-4px;
    border:4px solid transparent;
    border-left:6px solid #999;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.shortcut-menu__list:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.shortcut-menu__list:hover:after {
    display:block;
    content:'';
    position:absolute;
    top:50%;
    right:5px;
    width:0;
    height:0;
    margin-top:-4px;
    border:4px solid transparent;
    border-left:6px solid #999;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.shortcut-menu__link {
    color:#333;
    text-decoration:none;
    font-size:15px;
    font-size:1.5rem;
    padding:18px 40px 18px 50px;
    display:block;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.shortcut-menu__link:hover {
    text-decoration:none;
}

/*===============================================================
    news styles
===============================================================*/

.news__list {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    margin-bottom:36px;
}

.news__link {
    color:inherit;
}

.news__link:hover {
    opacity:0.5;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

.news__date {
    margin-right:0.75em;
    /*width:75px;トップのニュース日付調整_20170221 */
        width:95px;
    white-space:nowrap;
}

.news__label {
    display:inline-block;
    text-align:center;
    width:102px;
    height:25px;
    display:-webkit-inline-box;
    display:-webkit-inline-flex;
    display:-ms-inline-flexbox;
    display:inline-flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    margin-right:0.75em;
}

.news__text {
    line-height:1.6;
}

.news-wrap {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-flow:column;
        -ms-flex-flow:column;
            flex-flow:column;
    margin-top:-40px;
}

.news-item {
    border-bottom:1px solid #d9d9d9;
    position:relative;
    display:inline-block;
}

.news-item:after {
    content:'';
    width:20px;
    height:20px;
    border:0;
    border-top:solid 2px #cecece;
    border-right:solid 2px #cecece;
    -webkit-transform:rotate(45deg);
    transform:rotate(45deg);
    position:absolute;
    top:50%;
    right:20px;
    margin-top:-10px;
}

.news__title {
    font-size:22px;
    font-size:2.2rem;
    line-height:1.4;
    color:#ff7f00;
    margin-bottom:28px;
}

/*===============================================================
    main visual
===============================================================*/
.main-visual {
    width:100%;
    height:100%;
    position:relative;
}

.main-visual__inner {
    position:relative;
    padding:160px calc(50% - 650px) 0;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}

.main-visual__image {
    background:url(http://www.heartcorecloud.com/cloud/images/index/main_visual.png) no-repeat 50% 0;
    background-size:cover;
    width:100%;
    margin-top:-158px;
    padding-bottom:58px;
}

.main-visual__btnGroup {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}

.main-visual__contactBox {
    width:48%;
    margin-right:2%;
}

.main-visual__copy {
    color:#fff;
    font-size:37px;
    font-size:3.7rem;
    font-weight:bold;
    margin-top:75px;
    margin-bottom:20px;
    text-shadow:#333 1px 1px 5px;
}

.main-visual__text {
    color:#fff;
    font-size:22px;
    font-size:2.2rem;
    margin-bottom:45px;
    text-shadow:#333 1px 1px 5px;
}

.main-copy {
    padding:0 40px;
    width:100%;
}

/*===============================================================
    pagination styles
===============================================================*/
.pagination {
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    margin:20px 0;
    padding:5px 12px;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}

.pagination__list {
    margin:0 5px;
    width:36px;
    height:36px;
    text-align:center;
}

.pagination__list:first-child {
    margin-right:15px;
}

.pagination__list:first-child .pagination__link {
    border:none;
}

.pagination__list:first-child .pagination__link:hover {
    border:none;
    color:#d75544;
    background:#fff;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.pagination__list:last-child {
    margin-left:15px;
}

.pagination__list:last-child .pagination__link {
    border:none;
}

.pagination__list:last-child .pagination__link:hover {
    border:none;
    color:#d75544;
    background:#fff;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.pagination__list > span {
    color:inherit;
    text-align:center;
    line-height:36px;
    display:block;
}

.pagination__list > span:hover {
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.pagination__link {
    color:#d75544;
    background-color:#fff;
    text-align:center;
    width:36px;
    height:36px;
    line-height:36px;
    display:block;
    border:1px solid #ddd;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.pagination__link.is-active {
    color:#fff;
    background-color:#ff7f00;
    border:1px solid #ff7f00;
}

.pagination__link:hover {
    color:#fff;
    background-color:#ff7f00;
    border:1px solid #ff7f00;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

/*===============================================================
    separate
===============================================================*/
.separate {
    margin-bottom:40px;
    padding:0 15px;
    box-sizing:border-box;
}

.separate__body {
    width:100%;
}

.separate__body li {
    font-size:18px;
    font-size:1.8rem;
    padding-left:42px;
    padding-bottom:30px;
}

.separate__img {
    width: 100%;
}

.separate__body--left {
    margin-top:150px;
}

.separate__body--right {
    margin-top:45px;
}

.separate__title {
    font-size:18px;
    font-size:1.8rem;
    font-weight:bold;
    background-color:#f7f5f2;
    text-align:center;
    padding:10px 0;
    margin-bottom:36px;
}

.separate--tool {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

.separate--tool .separate__body {
    width:100%;
}


.separate--step {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
        -ms-flex-pack:justify;
            justify-content:space-between;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
}

.separate--step .separate__body-01 {
    width:53%;
}

.separate--step .separate__body-02 {
    width:58%;
}

/*===============================================================
    section-contents
===============================================================*/
.section-contents-01 {
    margin-bottom:60px;
}

.section-contents-02 {
    margin-bottom:140px;
}

.section-contents-03 {
    margin-bottom:80px;
}

.section-bg--gray {
    background-color:#f4f4f4;
}

.section-bg--gray-02 {
    background:#fbfbfb;
}

.section-bg--gray-03 {
    background:url(http://www.heartcorecloud.com/cloud/images/ai_campaign/bg_gray.gif);
}

.section {
    padding:60px 0;
}

.section-space--bottom {
    margin-bottom:136px;
}

.section-space--bottom-02 {
    margin-bottom:100px;
}

.section-space--bottom-03 {
    margin-bottom:80px;
}

.section-space--bottom-04 {
    margin-bottom:110px;
}

.section-space--bottom-05 {
    margin-bottom:60px;
}

/* =================================================================
* second
================================================================= */
/*===============================================================
    breadcrumb
===============================================================*/
.breadcrumb {
    padding:20px calc(50% - 650px) 20px;
}

.breadcrumb--bg-glay {
    padding:30px calc(50% - 650px) 20px;
}

.breadcrumb__lists {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    font-size:14px;
    font-size:1.4rem;
    -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
            flex-wrap:wrap;
}

.breadcrumb__list {
    padding:2px 0;
}

.breadcrumb__list:after {
    content:'>';
    padding:0 12px;
}

.breadcrumb__list:first-child {
    background:url(http://www.heartcorecloud.com/cloud/images/common/ico_breadcrumb.png) no-repeat 0 50%;
    padding-left:20px;
}

.breadcrumb__list:last-child:after {
    display:none;
}

.breadcrumb__link {
    color:#bf191f;
}

/*===============================================================
    category visual
===============================================================*/
.category-visual--sakidori {
    padding: 0 calc(50% - 650px);
    background-size:cover;
    width:100%;
    height:100%;
    position:relative;
    color:#fff;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    margin-bottom: 20px;
}
.category-visual--sakidori .top ul{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
}
.category-visual--sakidori .top ul li{
    width: 630px;
    height: 240px;
    overflow: hidden;
    position: relative;
}
.category-visual--sakidori .top ul li:first-child {
    margin-right: 40px;
    text-align: left;
}
.category-visual--sakidori .top ul li a {
    text-decoration: none;
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
}
.category-visual--sakidori .top ul li a:link, .category-visual--sakidori .top ul li a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}
.category-visual--sakidori .top ul li .pickup-label {
    position: absolute;
    font-family: 'Lato', sans-serif;
    top: 0.7em;
    right: 0.7em;
    background: #ff7f00;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    display: block;
    padding: 0.3em 0.6em;
    line-height: 1.2;
    box-shadow: 2px 2px 0 rgba(51, 51, 51, 0.3);
}

.category-visual--sakidori .top ul li .caption-wrap {
    color: #fff;
    font-size: 1.3rem;
    position: absolute;
    width: 100%;
    height: 100px;
    z-index: 2;
    bottom: 0;
    background: none;
}
.category-visual--sakidori .top ul li .caption {
  font-size: 1.3rem;
  padding: 0 1.5em;
  position: absolute;
  bottom: 5px;
}
.category-visual--sakidori .top ul li .caption .date {
  font-size: 0.8rem;
  margin-bottom: 3px;
}
.category-visual--sakidori .top ul li .caption .cat-name {
  padding: 0.1em 0.6em;
  font-size: 0.8rem;
  margin-left: 0.8em;
  border: 1px solid;
}
.category-visual--sakidori .top ul li .caption .entry-title {
    font-size: 2rem;
  margin: 0.15em 0;
  color: #fff;
}
.category-visual--sakidori .top ul li a:after {
  content: '';
  display: block;
  width: 100%;
  height: 9em;
  background: linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,1) 65%,rgba(0,0,0,1) 100%);
  position: absolute;
  bottom: 0;
  opacity: .55;
  z-index: 1;
}

.category-visua--topics {
  background: url(/sakidori/images/category-visual--sakidori.png) no-repeat 50% 0;
  background-size: cover;
  width: 100%;
  height: 170px;
  flex-direction: column;
  position: relative;
  text-align: center;
  font-size: 4.0rem;
    -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.category-visual--title {
  font-size: 50px;
  font-size: 5.0rem;
  margin: 40px 0 20px 0;
}

@media (min-width: 768px) and (max-width: 1000px){
      .category-visual--title {
        font-size:40px;
        font-size:4.0rem;
     }
}

.category-visual--sub-title {
  text-align: left;
  font-size: 45px;
  font-size: 4.5rem;
  margin-bottom: 20px;
  line-height: 1.1;
}

.category-visual-inner {
    padding:10px 0 10px 150px;
    color:#fff;
    margin:0 15px;
}

.category-visual-inner .typ-section01 {
    text-align:left;
    margin-bottom:0;
}
@media (max-width: 767px){
    .header__logo img {
      width: 80%;
    }
    .blog-container h1 {
      font-size: 25px;
      font-size: 2.5rem
    }
    .headertop_txt {
        width: 90%;
    }
    .category-visual--sakidori .top ul li{
        width: 630px;
        height: 210px;
        overflow: hidden;
        position: relative;
    }
    .category-visual--sakidori .top ul li .caption {
        padding: 0 10px;
        bottom: 0;
    }
    .category-visual--sakidori .top ul li .caption .entry-title {
        font-size: 1.6rem;
    }
}

/*===============================================================
    list styles
===============================================================*/
.list {
    margin-bottom:40px;
}

.list--disc > li {
    line-height:1.6;
    margin-left:1em;
    margin-bottom:10px;
    text-indent:-1em;
}

.list--disc > li:before {
    content:'';
    width:4px;
    height:4px;
    border-radius:50%;
    background-color:#666;
    display:inline-block;
    margin-right:8px;
    vertical-align:middle;
}

.list--disc .sub-list > li {
    margin-left:0.7em;
    margin-top:10px;
    text-indent:-0.7em;
}

.list--disc .sub-list > li:before {
    content:'';
    width:3px;
    height:3px;
    border-radius:50%;
    background-color:#666;
    display:inline-block;
    margin-right:8px;
    vertical-align:middle;
}

.download-list li {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:justify;
    -webkit-justify-content:space-between;
        -ms-flex-pack:justify;
            justify-content:space-between;
    padding:30px;
}


.download-list li:not(:last-child) {
    border-bottom:1px solid #eee;
}

.contents-list {
    padding:30px 0;
}

.contents-list .list--disc > li:before {
    content:'';
    width:4px;
    height:4px;
    border-radius:50%;
    background-color:#666;
    display:inline-block;
    margin-right:8px;
    position:relative;
    top:-3px;
}

.contents-list .sub-list > li {
    margin-left:0.7em;
    text-indent:-0.7em;
}

.contents-list .sub-list > li:before {
    content:'';
    width:3px;
    height:3px;
    border-radius:50%;
    background-color:#666;
    display:inline-block;
    margin-right:8px;
    position:relative;
    top:-2px;
}

.contents-list .link-list {
    color:#333;
    font-size:16px;
    font-size:1.6rem;
}

.contents-list .link-list:hover {
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}

.contents-btn {
    text-align:right;
    padding-top:15px;
}

.input-list li {
    margin:0 0 10px;
    padding:0;
}

.input-list li:last-child {
    margin:0;
}

/*===============================================================
    table styles
===============================================================*/
.base-table th, .base-table td, .base-table3 th, .base-table3 td{
    padding:10px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
    line-height:1.5;
}

.base-table td:not(.product-table__head) {
    text-align:center;
}

.base-table thead th {
    color:#fff;
    text-align:center;
    background-color:#ff7f00;
    border:1px solid #d05358;
}

.base-table tbody td {
    width:23%;
}

.base-table.table--download tbody td {
    width:24%;
}

.base-table.table--seopanel thead th {
    text-align:left;
}

.base-table.table--seopanel tbody td {
    width:33.3333%;
    text-align:left;
}

.base-table__subHeading {
    background-color:#fdf0f0;
    text-align:center;
}

.base-table__head {
    text-align:left;
}

.base-table thead th {
    color:#fff;
    text-align:center;
    background-color:#ff7f00;
    border:1px solid #d05358;
}

/*左付き75%＿20170130*/
.base-table tbody .lay01 {
    width: 75%;
    text-align: left;
}
/*左付き＿20170131*/
.base-table tbody  .table__left {
    text-align:left;
}
/*左付き65%＿20170130*/
.base-table tbody .lay02{
    width: 65%;
    text-align: left;
}
/*左付き55%＿20170203作成*/
.base-table tbody .lay03{
    width: 55%;
    text-align: left;
}

.base-table th, .base-table td , .base-table2 th , .base-table2 td{
    padding:10px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
    line-height:1.5;
}
.base-table2, .base-table3{
    width:100%;
}
.base-table2 td {
    text-align:center;
}

.base-table2 thead th {
    color:#fff;
    text-align:center;
    background-color:#ff7f00;
    border:1px solid #d05358;
}

.base-table2 tbody td.w10 {
    width:10%;
}
.base-table2 tbody td.w15 {
    width:15%;
}
.base-table2  tbody td.w20 {
    width:20%;
}
.base-table2  tbody td.w30 {
    width:30%;
}
.base-table2  tbody td.w70 {
    width:70%;
}
.base-table2  tbody td.w80 {
    width:80%;
}
.base-table2  tbody td.w85 {
    width:85%;
}
.base-table2 tbody th {
    text-align:left;
}
.base-table2 tbody td.left {
    text-align:left;
}
.base-table3 {
    margin-bottom: 30px;
}
.base-table3 thead th {
    text-align:center;
    border-right:1px solid #eee;
}
.base-table3 td{
    padding:10px;
    border-left:1px solid #eee;
}
.base-table3 thead th.w15  {
    width: 15%;
}
.base-table3 thead th:last-child {
    border-right: none;
}
.base-table3 thead th.color {
    color:#fff;
    text-align:center;
    background-color:#ff7f00;
    border:1px solid #fff;
}
.base-table3 tbody  .table__left {
 text-align:left;
}

.mprice-table-wrapper {
    margin: 0 auto;
  }
  .mprice-table {
    width: 85%;
    margin: 0 auto;
  }
  .mprice-table thead th {
    padding: 20px 0;
    background-color: #56a797;
    color:#fff;
    text-align: center;
    vertical-align: middle;
    font-size: 16pt;
  }
  .mprice-table tbody th {
    padding: 20px 30px;
    text-align: left;
    vertical-align: middle;
    font-size: 12pt;
    border-bottom: 1px solid #ddd;
  }
  .mprice-table tbody td {
    padding: 20px 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 12pt;
    width: 50%;
    border-bottom: 1px solid #ddd;
  }
  .mprice-table tbody tr:nth-of-type(even) {
    background-color: #e2fae1;
  }
  .mprice-note {
    width: 85%;
    margin: 10px auto 30px;
  }



.mprice-table-wrapper {
  margin: 0 auto;
}
.mprice-table {
  width: 85%;
  margin: 0 auto;
}
.mprice-table thead th {
  padding: 20px 0;
  background-color: #56a797;
  color:#fff;
  text-align: center;
  vertical-align: middle;
  font-size: 16pt;
}
.mprice-table tbody th {
  padding: 20px 30px;
  text-align: left;
  vertical-align: middle;
  font-size: 12pt;
  border-bottom: 1px solid #ddd;
}
.mprice-table tbody td {
  padding: 20px 10px;
  text-align: center;
  vertical-align: middle;
  font-size: 12pt;
  width: 50%;
  border-bottom: 1px solid #ddd;
}
.mprice-table tbody tr:nth-of-type(even) {
  background-color: #e2fae1;
}
.mprice-note {
  width: 85%;
  margin: 10px auto 30px;
}


/*導入事例ロゴスペース__20170328*/
.bnr__list {
  width: 16.6%;
}
/*テキストセンター揃え＿20170207*/
.txt-center{
  text-align: center;
}

.table-support {
    width:100%;
    border-top:1px solid #eee;
}

.table-support th {
    padding:10px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
    min-width:100px;
    word-wrap:break-word;
    word-break:break-all;
    text-align:left;
}

.table-support td {
    padding:10px;
    border-bottom:1px solid #eee;
    background-color:#fff;
    vertical-align:middle;
    word-wrap:break-word;
    word-break:break-all;
    text-align:left;
    line-height:1.6;
}

.table-support .sub_title {
    min-width:150px;
}

.table-contact {
    width:100%;
    margin:10px 0 30px;
    font-size:16px;
    font-size:1.6rem;
    border-top:1px solid #eee;
}

.table-contact th {
    padding:15px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
    text-align:left;
    width:300px;
}

.table-contact th span {
    font-size:1.0 rem;
    font-size:1.0 rem;
    color:#ff7f00;
}

.table-contact td {
    padding:15px;
    border-bottom:1px solid #eee;
    background-color:#fff;
    vertical-align:middle;
    text-align:left;
}

.table-contact input[type=text], .table-contact input[type=email], .table-contact input[type=tel], .table-contact textarea {
    width:100%;
    border:1px solid #ddd;
    padding:8px;
    outline:none;
}

.table-contact input[type=text]:focus, .table-contact input[type=email]:focus, .table-contact input[type=tel]:focus, .table-contact textarea:focus {
    border:1px solid #ff7f00;
}

.table-contact input[type=checkbox], .table-contact input[type=radio] {

    background:#fff;
    border:1px solid #ddd;
}

.table-contact select {
    width:100%;
    height:3em;
    border:1px solid #ddd;
    font-size:16px;
    font-size:1.6rem;
    outline:none;
    padding:5px 10px;
}

.table-contact select:focus {
    border:1px solid #ff7f00;
}

.event-table {
    width:100%;
    font-size:16px;
    font-size:1.6rem;
    margin-bottom:50px;
}

.event-table th, .event-table td {
    padding:10px;
    border-bottom:1px solid #eee;
    vertical-align:middle;
    line-height:1.5;
}

.table1 {
    width:100%;
    margin-bottom:30px;
}

.table1 th {
    text-align:center;
    background-color:#ff7f00;
    color:#fff;
    font-size:18px;
    font-size:1.8rem;
    font-weight:bold;
    padding:20px;
}

.table1 td {
    text-align:center;
    padding:20px 10px;
    border-bottom:1px solid #eee;
}

.table2 {
    width:100%;
    margin-bottom:30px;
}

.table2 th {
    text-align:center;
    background-color:#ff7f00;
    color:#fff;
    font-size:14px;
    font-size:1.4rem;
    font-weight:bold;
    padding:20px 10px;
    vertical-align:middle;
}

.table2 th.sub_title {
    font-size:14px;
    font-size:1.4rem;
    min-width:100px;
}

.table2 th.sub_title1 {
    font-size:12px;
    font-size:1.2rem;
    line-height:1.2;
}

.table2 td {
    text-align:center;
    padding:20px 10px;
    border-bottom:1px solid #eee;
}

.table2 td.sub_title5 {
    vertical-align:middle;
    font-size:12px;
    font-size:1.2rem;
}

.table2 td.sub_title6 {
    vertical-align:middle;
    font-size:12px;
    font-size:1.2rem;
    text-align:left;
}

/*===============================================================
    tab styles
===============================================================*/
.tabs {
    margin-bottom:30px;
}

.tab {
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    border-bottom:4px solid #ff7f00;
}

.tab__list {
    width:50%;
    margin-right:10px;
    border:1px solid #d6d6d6;
    text-align:center;
    cursor:pointer;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.tab__list:hover {
    color:#fff;
    background-color:#ff7f00;
    border:1px solid #ff7f00;
    opacity:0.7;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.tab__list.is-active {
    color:#fff;
    background-color:#ff7f00;
    border:1px solid #ff7f00;
}

.tab__list.is-active:hover {
    opacity:1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

.tab__list:last-child {
    margin-right:0;
}

.tab-content {
    padding:20px;
    display:none;
}

/*===============================================================
    sub menu
===============================================================*/
.sub-menu {
    background-color:#ff7f00;
}

.sub-menu ul {
    margin:0;
    padding:20px calc(50% - 650px);
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    font-size:16px;
    font-size:1.6rem;
}

.sub-menu li {
    margin-right:35px;
}

.sub-menu li.is-active a:after {
    content:'';
    height:3px;
    width:100%;
    display:block;
    background-color:#fff;
    margin-top:4px;
}

.sub-menu a {
    color:#fff;
}

.sub-menu a:after {
    content:'';
    height:3px;
    width:0;
    display:block;
    background-color:#fff;
    margin-top:4px;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.sub-menu a:hover:after {
    content:'';
    height:3px;
    width:100%;
    display:block;
    background-color:#fff;
    margin-top:4px;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.sub-menu span {
    position:relative;
    display:block;
    padding-right:15px;
}

.sub-menu span:after {
    display:block;
    content:'';
    position:absolute;
    top:calc(50% - 4px);
    right:0;
    width:0;
    height:0;
    margin-top:-2px;
    border:3px solid transparent;
    border-left:5px solid #fff;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.sub-menu__category {
    display:none;
    color:#fff;
    padding:20px;
    position:relative;
}

.sub-menu__category:after {
    display:block;
    content:'';
    position:absolute;
    top:28px;
    right:20px;
    width:0;
    height:0;
    margin-top:-5px;
    border:5px solid transparent;
    border-left:8px solid #fff;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    -webkit-transform:rotate(90deg);
            transform:rotate(90deg);
}

/* =================================================================
* pages
================================================================= */
.main_visual {
    width:100%;
    margin-top:30px;
}

.main_visual_inner {
    width:1000px;
    margin:0 auto;
}

.main_visual_inner > img {
    width:100%;
    height:auto;
}

#cup {
    text-align:right;
    position:absolute;
    width:120px;
    left:212px;
    top:-5px;
    font-size:106px;
    font-family:arial;
    font-weight:bold;
    color:#e67f22;
    z-index:99;
}

.countUp__txt {
    font-size:26px;
    font-size:2.6rem;
    color:#666;
    position:absolute;
    /*left:60px; 文言スペース調整_20170227*/
        left:80px;
    top:30px;
}

.countUp__percent {
    position:absolute;
    color:#e67f22;
    left:340px;
    top:5px;
    font-size:34px;
    font-size:34px;
    font-size:3.4rem;
}

.countUp__percent span {
    font-size:46px;
    font-size:4.6rem;
}

#cup2 {
    text-align:right;
    position:absolute;
    width:130px;
    left:60px;
    top:20px;
    font-size:110px;
    font-family:arial;
    font-weight:bold;
    color:#e67f22;
    z-index:99;
}

#cup3 {
    text-align:right;
    width:120px;
    font-size:106px;
    font-family:arial;
    font-weight:bold;
    color:#e67f22;
    z-index:99;
}

.imageBox__graph {
    position:relative;
    top:196px;
    left:10px;
}

.imageBox__graph img:not(:first-child) {
    position:absolute;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.imageBox__graph01 {
    position:absolute;
    bottom:0;
}

.imageBox__graph02 {
    bottom:8px;
    left:15px;
    width:131px;
}

.imageBox__graph03 {
    bottom:43px;
    left:143px;
    width:131px;
}

.imageBox__graph04 {
    bottom:54px;
    width:129px;
    left:272px;
}

.imageBox__graph05 {
    bottom:99px;
    left:398px;
    width:132px;
}

.chart {
    position:relative;
    display:inline-block;
    color:#999;
    font-size:20px;
    text-align:center;
}

.chart figcaption {
    padding:50px 25px;
    width:100px;
    height:50px;
    border:20px solid #f0f0f0;
    border-radius:100px;
    line-height:50px;
}

/* END Container styles */
/* Colors for the circles and positions for the graphics */
.css {
    top:55px;
    left:48px;
}

.css + svg .outer {
    stroke:#0d84ce;
}

.javascript {
    max-width:90px;
    max-height:90px;
    top:45px;
    left:45px;
}

.javascript + svg .outer {
    stroke:#f0e040;
}

.node {
    width:200px;
    height:200px;
    top:45px;
    left:45px;
}

.node + svg .outer {
    stroke:#83cd29;
}

.chart svg {
    position:absolute;
    top:0;
    left:0;
}

.outer {
    fill:transparent;
    stroke:#333;
    stroke-width:20;
    stroke-dasharray:534;
    -webkit-transition:stroke-dashoffset 1s;
    transition:stroke-dashoffset 1s;
    -webkit-animation-play-state:running;
    /* firefox bug fix - won't rotate at 90deg angles */
    -moz-transform:rotate(-89deg) translateX(-190px);
}

.chart:hover .outer {
    stroke-dashoffset:534 !important;
    -webkit-animation-play-state:paused;
}

/* END Circle colors and graphic positions */
/* Set the initial values for the animation */
.chart[data-percent='100'] .outer {
    stroke-dashoffset:0;
    -webkit-animation:show100 2s;
    animation:show100 2s;
}

.chart[data-percent='75'] .outer {
    stroke-dashoffset:133;
    -webkit-animation:show75 2s;
    animation:show75 2s;
}

.chart[data-percent='50'] .outer {
    stroke-dashoffset:267;
    -webkit-animation:show50 2s;
    animation:show50 2s;
}

.chart[data-percent='25'] .outer {
    stroke-dashoffset:401;
    -webkit-animation:show25 2s;
    animation:show25 2s;
}

/* END set initial animation values */
/* Keyframes for the initial animation */
@-webkit-keyframes show100 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:0;
    }
}

@keyframes show100 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:0;
    }
}

@-webkit-keyframes show75 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:134;
    }
}

@keyframes show75 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:124;
    }
}

@-webkit-keyframes show50 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:267;
    }
}

@keyframes show50 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:267;
    }
}

@-webkit-keyframes show25 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:401;
    }
}

@keyframes show25 {
    from {
        stroke-dashoffset:537;
    }
    to {
        stroke-dashoffset:401;
    }
}

.chart__title {
    font-size:20px;
    font-size:2.0rem;
    font-weight:bold;
    color:#555;
}
.chart__num {
    font-size:56px;
    font-size:5.6rem;
    font-weight:bold;
    color:#e67f22;
    margin:8px 0;
}
.chart__num span {
    font-size:26px;
    font-size:2.6rem;
}
#chart-num3 {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}
.chart__txt {
    font-size:15px;
    font-size:1.5rem;
}
.contents--second {
    padding:0 calc(50% - 650px);
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-flex-basis:auto;
        -ms-flex-preferred-size:auto;
            flex-basis:auto;
    width:100%;
}

.side-column {
    -webkit-flex-basis: 300px;
    -ms-flex-preferred-size: 300px;
    flex-basis: 280px;
    -webkit-box-ordinal-group: 1;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
    margin-left: 30px;
    background-color: #fff;
    padding: 10px;
    margin-bottom: 30px;
}
.side-column__title {
    background-color: #f3f3f3;
    text-align:center;
    color:#333;
    font-size:16px;
    font-size:1.6rem;
    padding: 10px;
}
.side-column__title > h3 {
    position:relative;
}
.side-column__list {
    position:relative;
    margin-bottom:1px;
}
.side_list {
    border-top: 1px solid #ddd;
}
.side_list .cf {
    border-bottom: 1px solid #ddd;
    margin: 0;
    padding: 0;
    font-size: 1.2rem;
}

.side_list .cf:before ,.side_list .cf a:before {
    content: "";
    display: table;
}
.side_list .cf a {
    display: block;
    padding: 0.5em 1.2em 0.5em 0.3em;
    margin: 0;
    position: relative;
    line-height: 1.1;
    color: #333;
}

.side_list li .eyecatch {
    max-width: 30%;
    float: left;
    margin-bottom: 5px;
    margin-right: 5px;
    border: 1px solid #eee;
}

.side_list .cf a:after {
    color: #ff7f00;
    position: absolute;
    border: 0px;
    width: 5px;
    height: 5px;
    top: 32px;
    right: 6px;
    border-top: 1px solid #ff7f00;
    border-right: 1px solid #ff7f00;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
    margin: auto;
}
.side_list .cf a:hover:after {
    right: 8px;
}

.side_list li span, .side_list li span.date {
  padding: 0 0.3em;
  font-size: 0.8em;
  margin: 0.4em 0 0;
  display: block;
}

#blogsearch {
    height: 34px;
    line-height: 33px;
}

#blogsearch .searchbox {
    width: 100%;
    height: 40px;
    background: url(/blog/images/hc_blog_searchIcon.png) no-repeat 7px 12px;
    border-radius: 3px;
    border: 1px solid #CCC;
    padding: 2px 2px 2px 26px;
}

@media (max-width: 767px){
 #blogsearch .searchbox {
    width: 100%;
    background-color: #fff;
 }
}


.side-column__list:hover:before {
    right:2px;
}

.side-column__link {
    color:inherit;
    display:block;
    padding:18px 10px;
}

.side-column__link.is-active {
    color:#ff7f00;
    background-color:#f4f4f4;
}

.side-column__link:hover {
    color:#ff7f00;
    background-color:#f4f4f4;
}
h4.widgettitle {
  text-align: center;
  background-color: #999;
  padding: 5px 0;
  color: #fff;
}


.side-ico--plus {
    display:inline-block;
    width:2px;
    height:10px;
    background-color:#fff;
    position:relative;
}

.side-ico--minus {
    display:inline-block;
    width:10px;
    height:2px;
    background-color:#ca1e07;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    position:relative;
}
.main-contents {
    -webkit-box-ordinal-group:2;
    -webkit-order:1;
        -ms-flex-order:1;
            order:1;
    width:calc(100% - 300px);
    font-size:16px;
    font-size:1.6rem;
}
.main-contents-single {
    width:100%;
    font-size:16px;
    font-size:1.6rem;
    padding: 20px 0;
}

.main-contents--single {
    width:100%;
    padding:0 calc(50% - 650px);
    background-color: #fff;
}

.side-column__title .side__state {
    width:26px;
    height:26px;
    border-radius:3px;
    text-align:center;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -webkit-align-items:center;
        -ms-flex-align:center;
            align-items:center;
    -webkit-box-pack:center;
    -webkit-justify-content:center;
        -ms-flex-pack:center;
            justify-content:center;
    position:absolute;
    top:0;
    right:-10px;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
}

.side-column__title .side__ico {
    display:inline-block;
    width:2px;
    height:10px;
    background-color:#ca1e07;
    position:relative;
}

.side-column__title .side__ico:before {
    position:absolute;
    left:-4px;
    top:4px;
    content:'';
    width:10px;
    height:2px;
    background-color:#ca1e07;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
}

.side-column__title.is-active .side__ico {
    display:inline-block;
    width:2px;
    height:10px;
    background-color:#ca1e07;
    position:relative;
}

.side-column__title.is-active .side__ico:before {
    position:absolute;
    left:-4px;
    top:4px;
    content:'';
    width:10px;
    height:2px;
    background-color:#fff;
    -webkit-transition:all 0.2s linear;
    transition:all 0.2s linear;
    -webkit-transform:rotate(180deg);
            transform:rotate(180deg);
}

.main-monitor {
    position:relative;
    width:790px;
    max-width:100%;
    height:55vw;
    max-height:452px;
    margin:0 auto;
    background:url(http://www.heartcorecloud.com/cloud/images/img-pc-note.jpg) no-repeat 50% 0;
    background-size:contain;
}

.main-monitor .dispImg {
    position:relative;
    z-index:1;
    overflow:visible;
    top:6.5%;
}

.main-monitor .dispImg .slideImg {
    position:absolute;
    z-index:2;
    top:5%;
    left:17.5%;
    width:65%;
    height:auto;
}

.separate__img {
    position:relative;
    width:52.6%;
    height:100%;
    background-size:contain;
}
@-moz-document url-prefix() {
     .separate__img {
        height:600px;
     }
}

.separate__img .dispScreenImg img {
    width:100%;
}
@-moz-document url-prefix() {
     .separate__img.l-disp {
        height:600px;
     }
}

.separate__img.l-disp .dispScreenImg {
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    position:absolute;
    z-index:2;
    top:5.5%;
    left:7%;
    width:89%;
}

.separate__img.l-disp .dispScreenImg img {
    width:100%;
}

.graph-area {
    margin-bottom:40px;
}

.graph {
    position:relative;
}

.graph > div:not(.graph_n08):not(.graph_arrow):not(.arrow_wrap) {
    width:6%;
    height:0;
    position:absolute;
    bottom:10.4%;
    z-index:100;
}

.bg_graph {
    max-width:100%;
    height:auto;
}

.arrow_wrap {
    overflow:hidden;
    position:absolute;
    width:89%;
    max-width:100%;
    height:77%;
    top:0;
    right:0;
}

.graph1 {
    left:12%;
    background-color:#f9e8e8;
}

.graph2 {
    left:22.8%;
    background-color:#f2d1d2;
}

.graph3 {
    left:33.7%;
    background-color:#ecbabc;
}

.graph4 {
    left:44.5%;
    background-color:#e6a3a6;
}

.graph5 {
    left:55.4%;
    background-color:#df8c8f;
}

.graph6 {
    left:66.2%;
    background-color:#d97579;
}

.graph7 {
    left:77%;
    background-color:#cd474d;
}

.graph8 {
    left:88%;
    background-color:#ff7f00;
}

.graph_n01, .graph_n02, .graph_n03, .graph_n04, .graph_n05, .graph_n06, .graph_n07, .graph_n08 {
    position:absolute;
    opacity:0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

.graph_n01 {
    left:12%;
    top:73%;
}

.graph_n02 {
    left:22.8%;
    top:65%;
}

.graph_n03 {
    left:33.7%;
    top:56%;
}

.graph_n04 {
    left:44.5%;
    top:46%;
}

.graph_n05 {
    left:55.4%;
    top:37%;
}

.graph_n06 {
    left:66.2%;
    top:28%;
}

.graph_n07 {
    left:77%;
    top:18.5%;
}

.graph_n08 {
    width:13%;
    left:84.5%;
    top:0;
    z-index:20;
}
.graph_arrow {
    position:absolute;
    left:-700px;
    top:350px;
    width:80%;
    height:auto;
    z-index:10;
}
.button3 {
    display: block;
    text-decoration: none;
    margin-top: 10px;
    text-align: center;
}
.button3 .btn {
    color: #fff;
    border: 1px solid #ff7f00;
    background: #ff7f00;
    vertical-align: middle;
    margin: 0;
    padding: 5px 0px;
    font-size: 1.8rem;
    text-align: center;
}
.button3 .btn a {
    color: #fff;
    padding: 5px 40px;
}
.button3 .btn:hover, .button3 .btn:hover a{
    background-color: #fff;
    color: #ff7f00;
}
.button--square > span {
    padding-right: 0px;
}

@media (max-width: 920px){
  .button3.button--square {
    width:90%;
    margin:20px;
 }
}

.button3.button--square a {
  display: block;
  padding: 20px 75px;
}
.button3.button--square > span:before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  right: 0px;
  width: 0;
  height: 0;
  margin-top: -8px;
  border: 8px solid transparent;
  border-left: 8px solid #fff;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.white-btn .button3.button--square > span:before {
  border-left: 8px solid #ff7f00;
}

.button3.button--square > span:hover:before {
  right:-5px;
  transition:all 0.2s linear;
}
.button3.button--square:hover {
  opacity: 0.8;
}
.button3.other_area {
    border: 1px solid #ff7f00;
    padding: 20px;
    margin-top: 20px;
}

/*================================================
 *  ダウンロード download
 ================================================*/
.download_area {
    display: flex;
    border-bottom: 1px solid #999;
    padding: 20px;
    margin: 0 20px;
}
.download_area:last-child {
    border-bottom: 1px solid #999;
}
.download_cat {
    color: #fff;
    padding: 4px 15px;
    text-align: center;
    float: left;
    line-height: 1.2;
    font-size: 1.2rem;
    position: absolute;
    top: -3em;
    left: -3em;
}
.download_cat.green{
      background-color: #009d2c;
}

.button_box {
    width: 40%;
}
.txt_area {
    width: 60%;
    margin : auto;
}
.txt_area .txt {
    line-height: 2rem;
}
.cardtype__article.downlod_box {
    height: 250px;
    padding: 20px 0 40px;
    text-align: center;
}
.cardtype__article.downlod_box .cardtype__img02 {
    margin-top: 5px;
}
.article-box {
    display: flex;
    height: 260px;
    margin-bottom: 20px;
}
.article_area.topics {
    height: 100%;
}
.article_area.topics .article-box {
     flex-wrap:wrap;
     height: 100%;
}
.article_area.topics .cardtype__article {
      width: 32%;
    height: 230px;
    margin: 0 0 30px 10px;
}
.article_area.topics .cardtype__article:nth-child(3n) {
    margin-right: 0;
}
.article_area.downlod_area {
     margin-bottom: 100px;
}
.article_area.downlod_area .article-box {
      margin-bottom: 30px;
}

.button_box .btn {
    color: #fff;
    border: 1px solid #ff7f00;
    background: #ff7f00;
    vertical-align: middle;
    margin: 0;
    padding: 10px 30px;
    width: 90%;
    font-size: 1.8rem;
    text-align: center;
}
.button_box > span {
    position: relative;
    display: inline-block;
    }
.button_box > span:before {
    display: block;
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    margin-top: -8px;
    border: 8px solid transparent;
    border-left: 8px solid #fff;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.button_box a {
    display: block;
    padding: 10px;
    color: #fff;
}
.button_box a.button03 {
    padding: 0px 70px;
    line-height: 2.5;
}
.button_box > span:hover:before {
    right:0px;
    transition:all 0.2s linear;
}
.button_box:hover {
    opacity: 0.8;
}
.Publicity_area {
    display: flex;
}
/*_____________________*/

@media all and (-ms-high-contrast: none){
    body{
        font-family:Verdana, Meiryo, sans-serif;
    }
}

@media (max-width: 767px){
    .view-pc{
        display:none;
    }
    .view-sp{
        display:block;
    }
    .gnav, .gnav__tel{
        display:none;
    }
    .spNav{
        background-color:#ff7f00;
        position:fixed;
        display:block;
        overflow:scroll;
        top:0;
        right:100%;
        z-index:-1;
        width:70%;
        height:100%;
        -webkit-overflow-scrolling:touch;
        -webkit-transform:translateZ(0px);
    }
    .spNav.is-active{
        right:0;
    }
    .spNav a{
        text-decoration:none;
    }
    .spNav__inner{
        position:static;
        height:100%;
        padding:8% 5%;
    }
    .spNav__en{
        border:1px solid #fff;
        margin-bottom:25px;
        font-size:1.2rem;
        text-align:center;
    }
    .spNav__en a{
        display:block;
        color:#fff;
        padding:10px 0;
    }
    .spNav__title{
        color:#fff;
        font-size:1.2rem;
        font-weight:bold;
        border-bottom:2px solid #fff;
        padding-bottom:15px;
    }
    .spNav__menu{
        margin-bottom:15px;
        display: block;
    }
    .spNav__list{
        font-size:1.2rem;
        border-bottom:1px solid #fff;
    }
    .spNav__list a{
        color:#fff;
        display:block;
    }
    .spNav__list > a{
        padding:13px 5px;
    }
    .spNav__menu--lev2 li{
        font-size:1.1rem;
    }
    .spNav__menu--lev2 li > a{
        padding:12px 0 12px 15px;
    }
    .spNav__menu--lev2 > ul li:last-child{
        border-bottom:none;
    }
    .spNav__menu--lev3{
        padding:0;
    }
    .spNav__menu--lev3 li{
        font-size:1.1rem;
    }
    .spNav__menu--lev3 li > a{
        padding:8px 0 8px 25px;
    }
    .spNav__tel{
        margin-bottom:15px;
    }
    .spNav__tel a{
        color:#ff7f00;
        display:block;
        padding:14px 0;
        background-color:#fff;
        font-weight:bold;
        font-size:2.0rem;
        text-align:center;
    }
    .spNav__tel a span{
        background:url(http://www.heartcorecloud.com/cloud/images/common/ico_tel.png) no-repeat 0 50%;
        background-size:15px auto;
        padding-left:20px;
    }
    .spNav__ico01{
        background:url(http://www.heartcorecloud.com/cloud/images/common/ico_partner-w.png) no-repeat 0 50%;
        background-size:15px auto;
        padding-left:20px;
    }
    .spNav__ico02{
        background:url(http://www.heartcorecloud.com/cloud/images/common/ico_customer-w.png) no-repeat 0 50%;
        background-size:15px auto;
        padding-left:20px;
    }
    .btn__sns{
        display:-webkit-flex;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        font-size:1.1rem;
    }
    .btn__sns a{
        color:#fff;
    }
    .btn__sns > div{
        width:50%;
        padding:13px 0;
    }
    .btn__sns--fb{
        background-color:#4267b2;
        text-align:center;
    }
    .btn__sns--fb a span{
        background:url(http://www.heartcorecloud.com/cloud/images/common/ico_facebook-w.png) no-repeat 0 50%;
        background-size:8px auto;
        padding-left:15px;
    }
    .btn__sns--tw{
        background-color:#1b95e0;
        text-align:center;
    }
    .btn__sns--tw a span{
        background:url(http://www.heartcorecloud.com/cloud/images/common/ico_twitter-w.png) no-repeat 0 50%;
        background-size:16px auto;
        padding-left:24px;
    }
    .header__search{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
    }
    .header__spnav{
        display:block;
        position:absolute;
        width:45px;
        height:45px;
        padding:5px;
        top:0;
        right:0;
        z-index:8888;
    }
    .header{
        position:fixed;
        height:46px;
        border-bottom:1px solid #ccc;
        z-index:7777;
    }
    .header.is-fixed{
        height:46px;
        border-bottom:1px solid #ccc;
    }
    .header.is-fixed .header__mainBox{
        padding:10px;
    }
    .header.is-second{
        height:46px;
        border-bottom:1px solid #ccc;
    }
    .header.is-second .header__mainBox{
        padding: 3px;
    }
    .header__topBox{
        display:none;
    }
    .header__mainBox{
        height:45px;
        padding:10px;
        background-color:rgba(255, 255, 255, 0.9);
        padding:0 20px;
    }
    .footer{
        display:block;
    }
    .footer__mainBox{
        display: none;
    }
    .footer__menuGroup{
        display:none;
    }
    .footer__subNav{
        padding:0 10px;
        -webkit-flex-wrap:wrap;
            -ms-flex-wrap:wrap;
                flex-wrap:wrap;
        -webkit-box-pack:center;
        -webkit-justify-content:center;
            -ms-flex-pack:center;
                justify-content:center;
    }
    .footer__subNavList{
        border-right:1px solid #333;
        margin:10px 0;
    }
    .footer__subNavList:first-child{
        border-left:1px solid #333;
    }
    .footer__subNavLink{
        color:#ff7f00;
    }
    .footer__logo{
        display:block;
        position:static;
        text-align:center;
        width:100%;
    }
    .footer__logo div{
        margin-right:0;
    }
    .footer__logo p{
        font-size:1.2rem;
        margin:15px 0;
    }
    .footer__copyright{
        width:100%;
        font-size: 1.3rem;
        margin:0;
        text-align:center;
        display:block;
        vertical-align:bottom;
    }
    .footer__bottomBox{
        display:block;
        background-color:#fff;
        height:auto;
        padding:20px 0 0 0;
    }
    .footer__bottomBox div{
        width: 100%;
        text-align: center;
    }
    .contents{
        margin:0;
        box-shadow:1px 1px 8px #333;
        margin-top: 45px;
    }
    .contents-section, .contents-section--company, .contents-section--record {
        padding:10px 20px;
    }
    .contents-section--service{
        padding: 20px;
    }
    .contents-section--company{
        padding:35px 20px;
    }
    .contents-section--record{
        padding:30px 20px;
    }
    .section-block{
        margin-bottom:10px;
        padding-bottom:5px;
    }
    .section-block p{
        font-size:1.3rem;
    }
    .dropdown--search{
        top:46px;
    }
    .tit-section01{
        font-size:2.4rem;
        line-height:1.4;
    }
    .tit-section02{
        font-size:2rem;
    }
    .tit-section03{
        font-size:2.4rem;
        margin-bottom:20px;
    }
    .tit-section-single{
        font-size:6vw;
        margin-bottom:20px;
    }
    .tit-copy01{
        font-size:2.4rem;
        text-align:center;
        line-height:1.4;
        margin-top: 20px;
    }
    .tit-dropdown01{
        text-align:center;
        line-height:1.4;
    }
    .tit-copy01--centered{
        font-size:2.4rem;
        line-height:1.4;
    }
    .tit-heading01{
        font-size:1.5rem;
        padding-bottom:7px;
        margin-bottom:16px;
        border-bottom:2px solid #ff7f00;
        line-height:1.2;
    }
    .tit-heading02{
        font-size:1.4rem;
        line-height:1.2;
        padding-bottom:9px;
        margin-bottom:16px;
    }
    .tit-heading03{
        font-size:1.4rem;
    }
    .title-copy{
        font-size:5.7vw;
        padding:0 0 15px;
    }
    .circle-title{
        font-size:1.6rem;
        margin-bottom:20px;
    }
    .category-title{
        margin-bottom:10px;
        text-align:center;
    }
    .category-title-sub{
        font-size:2.0rem;
        margin-bottom:15px;
    }
    .band-title{
        font-size:4.9vw;
        padding:0 10px;
    }
    .type-section-title{
        font-size:5vw;
        margin-bottom:20px;
    }
    .typ-section01{
        margin-bottom:32px;
        font-size:1.3rem;
    }
    .typ-section02{
        font-size:1.4rem;
        margin-bottom:20px;
    }
    .typ-section03{
        font-size:1.4rem;
        margin-bottom:20px;
    }
    .typ-section04{
        font-size:1.4rem;
        margin-bottom:20px;
    }
    .typ-section-heading{
        font-size:1.8rem;
        margin-bottom:20px;
    }
    .typ-section-main{
        font-size:1.4rem;
    }
    .txt-16{
        font-size:1.3rem;
    }
    .more{
        display:none;
    }
    .notes{
        margin-bottom:15px;
    }
    .notes p{
        margin-bottom:5px;
    }
    .category__text{
        font-size:1.4rem;
        margin-bottom:15px;
    }
    .step-number{
        font-size:1.7rem;
        padding-left:30px;
    }
    .step-number-01{
        background-size:22px 17px;
    }
    .step-number-02{
        background-size:24px 18px;
    }
    .step-number-03{
        background-size:20px 18px;
    }
    .under-bar{
        width:25px;
        border-top:2px solid #ff7f00;
        margin:10px 52.5% 15px 47.5%;
    }
    .attention-txt{
        font-size:1.3rem;
    }
    .button--square{
        width:100%;
        background-color:#fff;
    }
    .button--square-small{
        width:100%;
        background-color:#fff;
        padding:7px 10px;
    }
    .button--square-xsmall{
        background-color:#fff;
        padding:7px 10px;
    }
    .button--contact{
        max-width:100%;
        height:80px;
        line-height:76px;
    }
    .button--contact > span{
        line-height:40px;
    }
    .button--contact.l-inquiry:before{
        margin:25px 12px 0 14px;
    }
    .button--contact.l-demo:before{
        margin:20px 15px 0 18px;
    }
    .button--contact.l-faq:before{
        margin:22px 15px 0 18px;
    }
    .button--contact.l-mv-inquiry{
        height:40px;
    }
    .button--contact.l-mv-inquiry span{
        font-size:3vw;
    }
    .button--contact.l-mv-inquiry span:after{
        right:9px;
    }
    .button--contact.l-mv-inquiry:before ,.button--contact.l-mv-inquiry.lp:before{
        margin:10px 0 0 7px;
    }
    .button--contact.l-mv-demo{
        height:40px;
    }
    .button--contact.l-mv-demo span{
        font-size:3vw;
    }
    .button--contact.l-mv-demo span:after{
        right:9px;
    }
    .button--contact.l-mv-demo:before ,{
        margin:9px 0 0 7px;
    }
    .button--all, .button--event, .button--seminer{
        width:100%;
        font-size:1.1rem;
    }
    .button--entry{
        width:100%;
        height:60px;
        line-height:56px;
        font-size:1.6rem;
    }
    .button--end{
        width:100%;
        height:60px;
        line-height:56px;
        font-size:1.6rem;
    }
    .bnr__list{
        width:50%;
    }
    .bnr__list.slick-slide{
        min-height:65px;
        text-align:center;
    }
    .contactGroup{
        display: block;
        padding: 10px;
    }
    .tit-section04 {
        font-size: 2.0rem;
        text-align: center;
    }
    .btn_area.contact {
          width: 100%;
          margin-bottom: 20px;
    }
    .contactBox{
        width:100%;
        margin-right:0;
        margin-bottom:10px;
        height:80px;
    }
    .contactBox .button--contact > span{
        line-height:80px;
    }
    .contactBox__tel{
        height:80px;
        max-width:100%;
        margin-right:0;
    }
    .imageBox{
        display:block;
        margin-bottom:50px;
    }
    .imageBox .imageBox__textArea{
        width:100%;
    }
    .imageBox .imageBox__imageArea{
        width:100%!important;
        text-align:center!important;
    }
    .imageBox.l-reverse .imageBox__textArea{
        width:100%;
    }
    .centerBox{
        margin-bottom:30px;
    }
    .centerBox .contents__text{
        text-align:left;
    }
    .rubyBox{
        padding:16px 12px;
    }
    .rubyBox__title{
        font-size:1.4rem;
    }
    .rubyBox__list{
        font-size:1.3rem;
    }
    .rubyBox-column2{
        -webkit-flex-flow:column;
            -ms-flex-flow:column;
                flex-flow:column;
    }
    .rubyBox-column2 .rubyBox{
        width:100%;
        margin-bottom:10px;
    }
    .definitionBox__title{
        padding:15px;
    }
    .definitionBox__wrap{
        padding:20px;
    }
    .definitionBox__group{
        margin-top:15px;
    }
    .phase p{
        font-size:1.3rem;
    }
    .phase .more-details--soft a{
        width:100%;
    }
    .phase .more-details--manual a{
        width:100%;
    }
    .phase .more-details--online a{
        width:100%;
    }
    .box{
        padding:0;
        margin-bottom:10px;
    }
    .wappen{
        padding:5px 12px;
    }
    .main-visual{
        min-height:100%;
        height:auto;
        background:none;
        margin-top:0;
    }
    .main-visual__inner{
        padding:0;
        height:100%;
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-align:center;
        -webkit-align-items:center;
            -ms-flex-align:center;
                align-items:center;
    }
    .main-contents-single {
        padding: 0;
    }

    .section{
        padding:30px 0;
    }
    .section-space--bottom{
        margin-bottom:60px;
    }
    .breadcrumb{
        padding:20px;
    }
    .breadcrumb--single{
        padding:20px;
    }
    .breadcrumb--bg-glay{
        padding:20px;
    }
    .breadcrumb__list{
        margin-bottom:5px;
        line-height:1.2;
    }
    .category-visual{
        min-height:100%;
        height:auto;
        background:none;
        margin-top:0;
        display:none;
    }
    .category-visual--heartcore .category-visual--title span{
        border:1px solid #fff;
        padding:2px 5px;
        margin-left:10px;
    }
    .category-visual--heartcore{
        min-height:100%;
        height:200px;
        margin-bottom:10px;
    }
    .category-visual--digital{
        min-height:100%;
        height:300px;
        margin-bottom:10px;
    }
    .category-visual--digital .category-visual--heading{
        font-size:4vw;
        margin-bottom:10px;
    }
    .category-visual--digital .category-visual--title{
        font-size:6vw;
        padding:0 10px;
    }
    .section-visual--digital{
        min-height:100%;
        height:350px;
        margin-bottom:10px;
    }
    .section-visual{
        min-height:100%;
        margin-bottom:50px;
    }
    .section-visual--01{
        height:240px;
    }
    .category-visual--title{
        font-size:7vw;
        margin-bottom:10px;
    }
    .category-visual--sub-title{
        font-size:6vw;
        margin-bottom:10px;
        line-height:1.2;
        text-align:center;
    }
    .category-visual-inner{
        padding:70px 0 0 0;
    }
    .category-visual-inner .typ-section01{
        text-align:center;
    }
    .faq__heading > p{
        padding-right:6%;
        line-height:1.3;
    }
    .list li{
        font-size:1.3rem;
    }
    .download-list li{
        -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
        -webkit-flex-direction:column;
            -ms-flex-direction:column;
                flex-direction:column;
        padding:20px 0;
    }
    .download-list li .img{
        text-align:center;
        margin-bottom:15px;
    }
    .download-list li .text{
        width:100%;
        margin:0 auto;
    }
    .download_cat.green {
        top: 0em;
        left: 0em;
    }
    .contents-list .link-list{
        font-size:1.3rem;
    }
    .base-table.table--seopanel thead th{
        font-size:1.5rem;
    }
    .base-table.table--seopanel tbody{
        font-size:1.3rem;
    }
    .table-contact{
        font-size:1.3rem;
    }
    .table-contact thead th, .table-contact thead td, .table-contact tbody th, .table-contact tbody td{
        width:100%;
        display:block;
    }
    .sub-menu{
        font-size:1.2rem;
    }
    .sub-menu ul{
        display:none;
        -webkit-flex-flow:column;
            -ms-flex-flow:column;
                flex-flow:column;
        padding:0 20px 20px;
        font-size:1.2rem;
    }
    .sub-menu li{
        margin-right:0;
    }
    .sub-menu li{
        padding:10px 10px 10px 20px;
    }
    .sub-menu li:hover{
        background-color:#910204;
    }
    .sub-menu li:hover:after{
        visibility:hidden;
    }
    .sub-menu li.is-active{
        background-color:#910204;
    }
    .sub-menu li.is-active:after{
        visibility:hidden;
    }
    .sub-menu a:after{
        visibility:hidden;
        display:none;
    }
    .sub-menu a:hover:after{
        visibility:hidden;
        display:none;
    }
    .sub-menu span:after{
        margin-top:0;
    }
    .sub-menu__category{
        display:block;
    }
    .contents--second{
        -webkit-flex-flow:column;
            -ms-flex-flow:column;
                flex-flow:column;
        padding:0;
        display:block;
    }
    .main-contents{
        width:100%;
        -webkit-box-ordinal-group:1;
        -webkit-order:0;
            -ms-flex-order:0;
                order:0;
        padding:0 20px;
    }
    .main-contents--single{
        width:100%;
        padding:0 20px;
    }
    .separate__img{
        width:100%;
        padding-bottom:112%;
    }
}

@media (min-width: 769px) and (max-width: 1040px){
    .header.is-fixed .header__mainBox{
        padding:10px 20px;
    }
    .header.is-second .header__mainBox{
        padding:10px 20px;
    }
    .header__mainBox{
        padding:44px 20px;
    }
    .main-visual__inner{
        padding:160px 20px 0;
    }
    .breadcrumb{
        padding:20px;
    }
    .breadcrumb--single{
        padding:20px;
    }
    .breadcrumb--bg-glay{
        padding:20px;
    }
    .contents--second{
        padding:0 20px;
    }
}

@media (max-width: 930px) and (min-width: 601px){
    .gnav__tel{
        width:18vw;
    }
    .gnav__link{
        font-size:1.4vw;
    }
    .button--contact > span:after{
        right:5px;
    }
}

@media (min-width: 970px){
    .footer__mainBox{
        display:-webkit-box;
        display:-webkit-flex;
        display:-ms-flexbox;
        display:flex;
    }
}

@media (max-width: 970px) and (min-width: 601px){
    .footer__mainBox{
        padding:36px 20px;
    }
    .footer__menuGroup{
        margin-bottom:150px;
    }
    .footer__menuBox{
        width:50%;
    }
    .footer__social{
        max-width:100%;
    }
    .footer__bottomBox{
        -webkit-flex-wrap:wrap;
            -ms-flex-wrap:wrap;
                flex-wrap:wrap;
        -webkit-box-pack:center;
        -webkit-justify-content:center;
            -ms-flex-pack:center;
                justify-content:center;
    }
    .footer__logo{
        bottom:-100px;
    }
    .footer__copyright{
        margin-left:0;
    }
}

@media (max-width: 320px){
    .main-copy{
        padding:40px 10px;
    }
     .button3 {
      font-size: 1.7rem;
      }
    .button3.button--square {
          height: 60px;
    }
    .button3.button--square a {
          padding: 0px;
    }
}

@media (max-width: 600px){
    .faq-tel{
        width:100%;
        -webkit-flex-flow:column;
            -ms-flex-flow:column;
                flex-flow:column;
    }
    .faq-tel p{
        width:100%;
        margin:5px 0;
    }
    .btnarea-search {
          padding: 20px 0;
          margin: 0 10px;
    }
    .button3 , .contents-section--btnarea2 .button3{
      font-size: 20px;
    font-size: 2rem;
    }
    .button3.button--square {
          height: 70px;
          margin-top: 0px;
    }
    .button--square > span {
          padding-right: 0px;
    }
    .button3.button--square > span:before {
          right: -20px;
    }
    .button3.button--square a {
          display: block;
          padding: 20px 10px;
    }
    .btn_area > span:before, .btn_area2 > span:before {
        right: -20px;
    }
    .btn_area > span:hover:before {
        right:-25px;
        transition:all 0.2s linear;
    }
}
.effect i {
  height: 120px;
  padding: 20px;
  font-size: 100px;
  transition: .8s;
}
.effect div {
  margin: auto;
  transition: .8s;
  transition-delay: .8s;
}
.img_left {
  float: left;
  padding: 0 15px 15px 0;
}
.img_right {
  float: right;

}

@media (max-width: 1150px) and (min-width: 1040px){
     .main-visual__inner {
        padding: 120px 0px 10px 40px;
        }
        .video-hero{
            margin: 0;
        }
}
@media (max-width: 1040px) and (min-width: 769px){
        .header__mainBox {
        padding: 10px 20px 20px 20px;
        }
     .main-visual__inner {
        padding: 76px 0px 10px 20px;
        }
}
@media (max-width: 767px){
    .main-visual__inner{
        position: relative;
        padding: 130px calc(30% - 300px) 30px;
        }
    .main-visual__text {
          font-size: 1.6rem;
          text-align: center;
          margin-bottom: 20px;
        }
    .main-visual__copy{
        margin-top: 20px;
        }
    .main-copy{
        padding: 0 100px;
    }

        .button3 .btn {
                width: 80%;
                 margin-bottom:10px;
        }
}
@media (max-width: 500px){
        .main-visual__inner{
              padding: 30px 20px;
            }
            .main-visual__text {
            margin-bottom:10px;
            }
        .main-copy {
                padding: 0px 10px;
            }
}
@media (max-width: 500px){
       .view-p02{
         display: none;
    }
}


/*-----TOP--------------*/
.article-box {
 display: flex;
 height: 240px;
 margin-bottom: 20px;
}
.cardtype__article ,.case_study__article {
    width: 33%;
    margin-right: 10px;
    background-color: #f3f3f3;
    height: 240px;
    position: relative;
}
.cardtype__article:last-child {
    margin-right: 0;
}
.cardtype__article-info {
    padding: 10px;
    font-size: 1.3rem;
}
.cardtype__article-info h3 {
    font-size: 1.5rem;
}
.case_study__article {
    padding: 10px 0;
    text-align: center;
}
.case_study__article .case_study {
    width: 140px;
    text-align: center;
}
.case_study__article span {
    display: block;
    margin-top: 5px;
    font-size: 1.3rem;
}
.updated {
    font-size: 1.3rem;
    margin-bottom: 10px;
}
.updated span {
    padding: 0.1em 0.6em;
    font-size: 0.8rem;
    margin-left: 0.8em;
    background-color: #47ca56;
    color: #fff;
    font-weight: bold;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.flexbox {
    display: flex;
}
.contect {
    text-align: right;
    padding: 10px 0;
    position: relative;
    width: 200px;
}
.contect a {
    padding: 2px 20px;
    border: 1px solid #ff7f00;
}
.contect > a:before {
    display: block;
    content: '';
    position: absolute;
    right: 0px;
    width: 0;
    height: 0;
    margin-top: 2px;
    border: 5px solid transparent;
    border-left: 5px solid #ff7f00;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
}
.area_box > a:hover:before {
    right: 3px;
    transition:all 0.2s linear;
}
/*================================================
 *  トピックス
 ================================================*/
.cardtype__article.topics {
    width: 33%;
    margin-right: 40px;
    background-color: #eee;
    padding: 5px;
}
.cardtype__article.topics:last-child {
    margin-right: 0px;
}
.cardtype__article.topics:hover {
    background-color: #ff7f00;
    }
.cardtype__img {
    height: 140px;
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
    background-color: #fff;
}
.cardtype__img2 {
    height: 100px;
    overflow: hidden;
    position: relative;
}
.cardtype__img3 {
    overflow: hidden;
    position: relative;
    border: 1px solid #ddd;
}
.search.topics_search {
    width: 70%;
    margin-right: 40px;
}
.article-box.topics {
    margin-bottom: 40px;
}
.cardtype__article.topics .cardtype__img {
    margin: 5px 5px 0 5px;
}
.cardtype__img.topics:hover {

}
.topics_day {
    font-size: 1.2rem;
    margin-top: 5px;
    float: right;
    color: #666;
}
.search {
    width: 100%;
    margin-bottom: 30px;
}
.cp_ipselect {
    position: absolute;
    display: block;
    overflow: hidden;
    right: 20px;
    width: 26%;
    border-radius: 3px;
    border: 1px solid #ccc;
}
.cp_ipselect > i.toggle {
    position: absolute;
    z-index: 4;
    top: 1em;
    right: 1em;
    color: #333;
}
.cp_ipselect .cp_sl07_arrowup:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    pointer-events: none;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #ff7f00;
    border-left: 6px solid transparent;
    -webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
    transition: all 250ms cubic-bezier(.4,.25,.3,1);
}
.cp_ipselect .cp_sl07_arrowdown:before {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    pointer-events: none;
    border-top: 6px solid #ff7f00;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    -webkit-transition: all 250ms cubic-bezier(.4,.25,.3,1);
    transition: all 250ms cubic-bezier(.4,.25,.3,1);
}
.cp_ipselect .cp_sl07_title, .cp_ipselect .cp_sl07_selectlabel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 5px;
    line-height: 2;
    cursor: pointer;
    background: #fff;
    font-size: 1.3rem;
}
.cp_ipselect > input {
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
}
.cp_ipselect > input:checked ~ i.toggle.cp_sl07_arrowdown {
    display: none;
}
.cp_ipselect > input:checked ~ i.toggle.cp_sl07_arrowup {
    display: block;
}
.cp_ipselect > input:checked div.options label.option .cp_sl07_title {
    display: none !important;
}
.cp_ipselect > input:not(:checked) {
    z-index: 4;
}
.cp_ipselect > input:not(:checked) ~ label.option > span.cp_sl07_title {
    display: none;
}
.cp_ipselect > input:not(:checked) ~ i.toggle.cp_sl07_arrowup {
    display: none;
}
.cp_ipselect > input:not(:checked) ~ i.toggle.cp_sl07_arrowdown {
    display: block;
}
.cp_ipselect > span.cp_sl07_selectlabel {
    position: relative;
    z-index: 0;
    display: inline-block;
    width: 100%;
    border-top: 0;
    border: 1px solid #ccc;
}
.cp_ipselect label.option {
    z-index: 1;
    display: block;
    overflow: hidden;
    width: 100%;
    transition: all 1s ease-out;
}
.cp_ipselect label.option:last-child {
    }
.cp_ipselect label.option span.cp_sl07_title {
    position: relative;
    z-index: 2;
    transition: 0.3s ease-out;
}
.cp_ipselect label.option span.cp_sl07_title:hover {
    color: #333;
    background: #eee;
}
.cp_ipselect label.option input {
    display: none;
}
.cp_ipselect label.option input:checked ~ span.cp_sl07_title {
    position: absolute;
    z-index: 3;
    top: 0;
    display: block;
    width: 100%;
    color: inherit;
    border-top: 0;
    background: #fff;
    box-shadow: none;
}
.topics_pagelinks {
  width: 100%;
  text-align: center;
  margin: 40px auto 15px;
}
.topics_pagelinks a {
  color: #ff7f00;
}
.topics_.dejimaClip_pagelinks .WCMselected {
  background-color: #ccc;
}
.topics_pagelinks .WCMpaged a {
  color: #333;
  margin-right: 10px;
  border: 1px solid #ccc;
  padding: 5px 10px;
}
.topics_listed {
  margin-bottom: 20px;
  text-align: center;
}
.category_list-area {
    position: relative;
    background-color: #f3f3f3;
}
#topicscategory_list {
    position: absolute;
    right: 0;
    display: flex;
}
.topicscategory_list-head {
    margin-right: 10px;
    line-height: 2.0;
    font-size: 1.6rem;
}
#topicscategory_list_select{
    border: 1px solid #999999;
    font-size: 1.4rem;
    padding: 5px;
    width: 170px;
    border-radius: 5px;
    height: 30px;
    color: #333;
}
.topics-heading {
    margin-bottom: 30px;
}
.topics-heading h1 {
  border-left: 5px solid #ff7f00;
  padding-left: 10px;
  font-size: 1.8rem;
}

.topics_cap {
    margin: 10px 0;
    font-size: 2.0rem;
}
/*================================================
 *  活用事例 caseStudy
 ================================================*/
.cardtype__article.caseStudy {
    width: 31%;
    margin: 1%;
    background-color: #eee;
    padding: 20px 5px;
    height: 100%;
}
.cardtype__article.caseStudy:last-child {
    margin-right: 0px;
}
.cardtype__article.caseStudy .cardtype__img {
    height: 100%;
    text-align: center;
    border: none;
    background: none;
}
.cardtype__article.caseStudy .button3 .btn {
    padding: 0px;
}
.cardtype__article.caseStudy .button3 .btn a{
    padding: 5px 20px;
}
.caseStudy_img {
    width: 40%;
    height: 100%;
    overflow: hidden;
    position: relative;
    border: 1px solid #eee;
}
.article-box.caseStudy_box {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    margin-bottom: 50px;
}
.cap {
    display: block;
    text-align: center;
    margin-top: 5px;
    font-size: 1.3rem;
}
.cap.mini {
    font-size: 1.1rem;
}

.caseStudy .cap {
    font-size: 1.8rem;
}
.caseStudy .cap.mini {
    font-size: 1.6rem;
}
.caseStudy_column {
    padding: 50px;
    display: flex;
}
.caseStudy_column .caseStudy_imgarea {
    width: 10%;
    padding-right: 10px;
}
.caseStudy_column .caseStudy_imgarea img.alignnone {
    border: 1px solid #999;
    margin-bottom: 10px;
}

.caseStudy_column .caseStudy_imgarea.download {
    position: relative;
}
.caseStudy_column .text_area {
    width:  50%;
    padding: 0 30px;
}
.caseStudy_column .text_area.w30 {
    width:  37%;
    padding: 0 30px 0 0;
}
.caseStudy_column .text_area h1{
    font-size: 23px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.caseStudy_column .text_area h1 span {
    color: #ff7f00;
}
.caseStudy_column .text_area h2{
    color: #ff7f00;
    font-weight: bold;
    margin-bottom: 5px;
}
.caseStudy_column .text_area h3{
    font-size: 18px;
    margin-bottom: 10px;
}
.caseStudy_column .text_area p{
    text-indent: 1em;
    margin-bottom: 1em;
}
.caseStudy-form {
    width: 40%;
}
.caseStudy-form2 {
	width: 65%;
}
.caseStudy-form3 {
	width: 45%;
}
.caseStudy-form4 {
	width: 40%;
    border: 1px solid #ddd;
}
.link_btn_area {
	line-height: 2.0em;
	text-align: center;
}
.link_btn_area h2 {
    text-align: center;
    font-size: 18px;
}
.caseStudy_column #sectionDynamicFormShow {
    width: 650px;
}


@media (max-width:767px) {
    .link_btn_area {
	padding: 20px;
    }
    .link_btn_area .btn_area {
        width: 100%;       
    }
    .caseStudy_column {
        display: block;
        padding: 20px;
    }
    .caseStudy-form, .caseStudy-form2 {
        width: 100%;
    }
    .button3 .btn a {
          padding: 0px;
    }
}



@media (max-width:767px) {
    .button_box {
    width: 100%;
    }
    .txt_area {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }
    .button_box .btn {
        width: 100%;
    }
    .contents-section_reviews.flexbox {
        display: block;
    }
    .area_box2 {
        width: 100%;
        margin-left: 0;
    }
    .area_box2 a {
        padding: 20px;
    }
    .Publicity_area {
        display: block;
        padding: 0;
    }
    .contect {
        display: none;
    }
}
.anchor-link {
    margin-bottom: 40px;
    display: flex;
}
.anchor {
    text-align: center;
    width: 50%;
    border: 1px solid #ff7f00;
    margin-right: 10px;
}
.anchor-link li:last-child {
    margin-right: 0;
}
.anchor span {
    display: block;
    position: relative;
}
.anchor span:after {
  display: block;
  position: relative;
}
.anchor a {
    display: block;
    padding: 10px 20px;
}
.anchor span:after {
    color: #ff7f00;
    position: absolute;
    border: 0px;
    width: 6px;
    height: 6px;
    top: 40%;
    right: 30px;
    border-top: 2px solid #ff7f00;
    border-right: 2px solid #ff7f00;
    -webkit-transform: rotate(45deg);
    transform: rotate(135deg);
    content: "";
    margin: auto;
}
.anchor span:hover:after {
    top: 55%;
}

.main_title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 3.0rem;
    display: flex;
    align-items: center;
}
.main_title:before, .main_title:after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: #444;
    display: block;
}
.main_title:before {
    margin-right: .4em;
}
.main_title:after {
    margin-left: .4em;
}
.cardtype__img02 {
    overflow: hidden;
    position: relative;
}
.downlod_img {
    overflow: hidden;
    position: relative;
    width: 66%;
}
.downlod_img02 {
    overflow: hidden;
    position: relative;
    width: 80%;
}
.downlod_img03 {
    width: 30%;
}


/*================================================
 *  セミナー
 ================================================*/
.events {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex-flow: column;
    border-top: 1px solid #d9d9d9;
}
.events a.event__link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 35px 10px;
    color: #333;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
}
.events .event__date {
    width: 202px;
    margin-right: 40px;
    font-size: 20px;
    font-size: 2.0rem;
    padding-left: 20px;
    min-width: 200px;
    color: #333;
}
.event__wappen {
    font-size: 13px;
    font-size: 1.3rem;
    margin-top: 15px;
}
.wappen {
    color: #fff;
    text-align: center;
    display: inline-block;

}
.event__wappen .wappen {
    margin-right: 10px;
}
.event__wappen .wappen:last-child {
    margin-right: 0;
    margin-top: 10px;
}
.wappen--red {
    display: inline-block;
    background-color: #ca1d06;
}
.wappen--green {
    background-color: #65C6BB;
}
.wappen--orange {
    background-color: #e67f22;
}
.wappen--brown {
    background-color: #6a3906;
}
.wappen--purple {
    background-color: #9b59b6;
}
.wappen--skyblue {
    background-color: #87cefa;
}
.wappen--pink {
    background-color: #F27398;
}
.event__content {
    padding-right: 40px;
}
.event__link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    padding: 35px 10px;
    color: #333;
    border-bottom: 1px solid #d9d9d9;
    position: relative;
}
.event__link:after {
    content: '';
    width: 20px;
    height: 20px;
    border: 0;
    border-top: solid 2px #cecece;
    border-right: solid 2px #cecece;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -10px;
}
.event__title {
    font-size: 22px;
    font-size: 2.2rem;
    color: #ff7f00;
    margin-bottom: 28px;
    position: relative;
}
.event__title:after {
    display: inline-block;
    content: '';
    width: 0;
    height: 0;
    margin-top: 6px;
    margin-left: 10px;
    border: 5px solid transparent;
    border-left: 6px solid #ff7f00;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    vertical-align: top;
}
.event__data {
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.5;
}



@media (max-width:767px) {
    .side-column {
        display: none;
    }
    .header__mainBox .header__logo{
        width: 203px;
        height: 40px;
    }
    .headertop_txt {
        display: none;
    }
    .article-box__cat  {
        float: none;
    }
    .article-box__date {
        float: none;
        text-align: right;
        font-size: 12pt;
        margin-top: 5px;
    }
    .article-box {
        display: block;
        height: 100%;
    }
    .info__text {
        margin: 0;
        padding-top: 5px;
        width: 100%;
    }
    .info__date {
        width: 60%;
    }
    .wappen--red {
        width: 30%;
    }
    .btn_area.companyProfile {
      width: 100%;
    }
    .navHeader {
        padding: 0;
    }
    .btn_area a {
        padding: 5px 20px;
    }
    .info__list {
        display: block;
        padding: 10px 0;
        margin: 0;
    }
    .category-visual--sakidori {
    display: block;
    }
    .category-visual--sakidori .top ul {
    margin-top: 60px;
    }
    .category-visual--sakidori .top ul li:first-child {
    margin-right: 10px;
    }
    .area_box a {
        font-size: 1.3rem;
    }
    .anchor span:after {
        top: 35%;
    }
    .anchor span:hover:after {
        top: 40%;
    }
}
.clearfix:after {
    display:block;
    clear:both;
    height:0px;
    visibility:hidden;
    content:".";
}
.clearfix {
    min-height: 1px;
}
* html .clearfix {
    height: 1px;
    /*¥*//*/ /*MAC IE5.x対策*/
    height: auto;
    overflow: hidden;
    /**/
}
.blog-container a{
    font-weight: normal;
    text-decoration: underline;
}
.blog_cat {
    color: #fff;
    padding: 4px 15px;
    text-align: center;
    float: left;
    line-height: 1.2;
    font-size: 1.2rem;
}
.blog_cat.green {
    background-color: #009d2c;
}

.blog_date {
    float: right;
    padding-top:2px;
}
.blog-container h1 {
    font-size: 27px;
    font-size: 2.7rem;
    font-weight: bold;
    margin: 20px 0;
    line-height: 1.5em;
}
.blog-container h1 span {
	font-size: 2.0rem;
	color: #ff7f00;
}
.blog_sns{
    margin: 20px 0;
    display: flex;
}
.blog_sns .fb_iframe_widget {
    margin-right: 10px;
}

.blog_visual {
 text-align: center;
 margin-bottom: 30px;
}
.blog_visual img {
 max-width: 100%;
}
.blog_visual__cap {
 text-align: center;
 font-size: 13px;
 font-size: 1.3rem;
 margin-bottom: 30px;
 line-height: 1.6;
}
.blog_small {
 font-size: 13px;
 font-size: 1.3rem;
 margin-top: 30px;
 line-height: 1.3;
}
.blog_visual2 {
	display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
}
.blog_visual2 img {
	width: 48%;
}
.blog_citation {
 font-size: 13px;
 font-size: 1.3rem;
}
.blog_italic {
 font-style: italic;
}
.blog_toc {
 border: 3px solid #ccc;
 padding: 20px 30px;
 margin: 30px 0;
}
.blog_toc__head {
 font-weight: bold;
 font-size:19px;
font-size:1.9rem;
 margin-bottom:10px;
}
.content--item {
	font-size: 13px;
	font-size: 1.3rem;
}
ul.blog_toc__list1 {
 list-style-type:none;
 margin-left: 1em;
}
ul.blog_toc__list1 li {
 font-weight: bold;
 margin-left: 1.3em;
 line-height: 2em;
}
ul.blog_toc__list1 li:before{
 content: '';
 width: 4px;
 height: 4px;
 display: inline-block;
 border-radius: 100%;
 background: #999;
 position: relative;
 left: -10px;
 top: -3px;
}
.blog_toc .blog_toc__list2 li:before {
  content: '';
  width: 3px;
  height: 3px;
  display: inline-block;
  border-radius: 100%;
  background: #333;
  position: relative;
  left: -10px;
  top: -3px;
}
.blog_toc__list2 {
 list-style-type:disc;
}
.blog_toc__list2 li {
 margin-left: 2.5em;
 font-weight: normal;
}
.blog_toc a {
 text-decoration: none;
}
.blog_toc__list2 a {
 font-weight: normal;
}
.blog-container h2{
     font-size: 21px;
     font-size: 2.1rem;
     padding-bottom: 5px;
     border-bottom: 1px solid #ff7f00;
     margin: 50px 0 15px 0;
     color: #ff7f00;
}
.blog_intro {
     line-height: 2.0em;
     margin: 30px 0;
}
.blog_intro p {
     text-indent: 1em;
     margin-bottom: 1em;
    line-break: strict;
     line-height: 1.6em;
     word-break: normal;
}
.blog_intro p:last-child {
     margin-bottom: 0em;
}
.blog-container a:link .book_area {
    color: #333;
    text-decoration: none;
}
.book_area {
    display: flex;
    border: 1px solid #999;
	padding: 30px 20px;
	position: relative;
}
.book_area .book_img {
    width: 30%;
}
.book_area .book_txt {
	width: 70%;
}
.book_area h2.p_txt {
	position: absolute;
	top: -10px;
	left: 10px;
	background-color: #ff7f00;
	padding: 5px 10px;
	color: #fff;
	margin: 0;
	border: none;
	font-size: 1.6rem;
}
.author_area img {
  margin-right: 20px;
  }
.book_area .book_title, .author_area .title{
	font-weight: bold;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 10px;
}
.book_area .book_title span, .author_area .title span {
	font-size: 1.6rem;
	font-weight: normal;
}
.book_area .book_author{
    color: #333;
    text-decoration: none;
    line-height: 1.5;
    font-size: 1.3rem;
    text-decoration: none !important;
}
.book_area .book_author .blog_illust {
     text-align: center;
     margin: 50px auto;
}
.present_area {
	display: flex;
	border: 1px solid #999;
	padding: 30px 20px;
	position: relative;
	margin-top: 30px;
}
.present_area h2.p_txt {
	position: absolute;
	top: -10px;
	left: 10px;
	background-color: #ff7f00;
	padding: 5px 10px;
	color: #fff;
	margin: 0;
	border: none;
	font-size: 1.6rem;
}
.book_area2 {
	width: 35%;
	padding-right: 20px;
	margin-top: 20px;
}
.book_area2 .img_area {
	margin-bottom: 10px;
}
.book_area2 .book_title {
	font-size: 20px;
	font-size: 2.0rem;
	line-height: 1.2;
	margin-bottom: 10px;
}
.book_area2 .book_title .sub {
	font-size: 16px;
	font-size: 1.6rem;
}
.book_area2 .book_author {
	font-size: 10px;
	font-size: 1.0rem;
}
.book_area2 p {
	font-size: 13px;
	font-size: 1.3rem;
}

.block {
	position: relative;
	overflow: hidden;
}
.section__title {
	position: relative;
	margin: 0 auto;
	padding: 3px 0;
	border-radius: 10px;
	border: 2px solid #ff7f00;
	background-color: #fff;
	max-width: 900px;
	z-index: 2;
  }
.section__title.section__title--red {
	border-color: #fff;
	background-color: #ff7f00;
} 
 
.section__title h2 {
	color: #ff7f00;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-align: center;
	margin: 0;
	padding: 0;
	border: none;
}
.section__title.section__title--red h2 {
	color: #fff;
}
.entry__content {
	margin: -28px auto 0;
	padding: 50px 20px 50px;
	border-radius: 25px;
	border: 2px solid #ff7f00;
	max-width: 1000px;
}
.entry__content--step {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
.entry__content--btn {
	margin-top: 60px;
}
.blog-container .entry__content--step h3.step {
  border-radius: 20px;
  width: 170px;
  height: 33px;
  background-color: #ff7f00;
  color: #fff;
  font-size: 23px;
  font-size: 2.3rem;
  font-weight: 700;
  text-align: center;
  line-height: 38px;
  margin: 0;
}
.entry__content--step p {
	padding-left: 40px;
	font-size: 23px;
	font-size: 2.3rem;
	font-weight: 500;
	line-height: 1.3;
	text-indent: 0em;
}
.entry__content--step + .entry__content--step {
	margin-top: 30px;
  }
.entry__content--btn a {
	display: block;
	-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
	box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
	border: 3px solid #fff;
	border-radius: 40px;
	margin: 0 auto;
	background-color: #1da1f2;
	max-width: 600px;
	text-align: center;
	text-decoration: none;
}
.wrapper .btn--hover {
	-webkit-transition: 0.5s opacity;
	transition: 0.5s opacity;
}
.entry__content--btn a span {
	position: relative;
	display: inline-block;
	color: #fff;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.3em;
	line-height: 60px;
}
.entry__content--btn a span::before {
	content: "";
	position: absolute;
	top: calc(50% - 19px);
	left: -54px;
	width: 44px;
	height: 38px;
	background: url(/sakidori/images/ico_tw.png) 0 0 no-repeat;
	background-size: 100% 100%;
}
.entry__content--btn a span::after {
	content: "";
	position: absolute;
	border: transparent solid 11px;
	border-left: #fff solid 22px;
	top: calc(50% - 11px);
	right: -40px;
	width: 0;
	height: 0;
}
.author_area {
    display: flex;
    border: 1px solid #999;
    padding: 10px;
}
.author_area .author_img {
  margin-right: 20px;
  }
.bottom_area {
    border: 1px solid #999;
    padding: 10px 20px;
}
.bottom_area h2 {
    text-align: center;
    margin: 0;
    border: none;
    color: #333;
}
.bottom_area p {
    text-indent: 0;
    line-height: 2.0;
}
.btn_area.blog {
    margin: 20px 0;
    width: 60%;
}
.btn_area.blog .button {
    padding: 10px 130px;
    text-decoration: none;
}

.list_disc {
    margin-bottom: 10px;
    list-style: disc;
    margin-left: 30px;
}
.list_disc li {
    list-style: disc;
}
.list_decimal {
    margin-bottom: 10px;
    list-style: decimal;
    margin-left: 30px;
}
.list_decimal li {
    list-style: decimal;
    line-height: 1.7em;
}
.txt_inter {
    font-weight: bold;
}
.contents--second.blog .main-contents {
    background-color: #fff;
    padding: 0 30px;
    margin-bottom: 30px;
}
.footer_contact .tit-section04 {
    font-size: 23px;
    font-size: 2.3rem;
    font-weight: normal;
    margin: auto 0;
    color: #fff;
    line-height: 2.2;

}
.form-buttons .btn .btn-primary{
    margin-left: 10px;
    width: 100%;
    padding: 10px;
}
.blog-container .caseStudy_column{
    padding: 0;
}

/*----------20220526sakidori追加日笠山-------------*/
.p_coment {
     font-size:11px;
     padding: 10px;
}

@media (max-width: 767px){
    .form-content .form-headline h1 {
        font-size: 1.8rem;
    }
    .article_area {
        padding: 0;
    }
    .footer_logo_HC {
        width: 40%;
        margin-right: 0px;
        margin-bottom: 5px;
    }
    .footer__bottomBox div {
        text-align: center;
    }
    #footer_address {
        width: 100%;
        padding: 10px;
        text-align: center;
        font-size: 1.2rem;
    }
    .footer_contact .tit-section04 {
        font-size: 19px;
        font-size: 1.9rem;
    }
    .mail_maga iframe {
        min-height: 130px !important;
    }
    .category-visua--topics {
        padding-top: 10px;
    }
    .blog_toc {
        padding: 20px 10px;
    }
    ul.blog_toc__list1 {
        list-style-type: none;
        margin-left: 0em;
    }
    .download_area {
        display: block;
        padding: 20px 0;
        margin: 0;
    }
    .download_area:last-child {
        border-top: 1px solid #999;
    }
    .download_area .txt_area .txt {
          font-size: 1.5rem;
    }
    .article_area.topics .cardtype__article {
        width: 100%;
        margin: 0 0 30px 0;
    }
    .cardtype__article.topics {
        width: 100%;
    }
    .cardtype__article, .case_study__article {
        width: 100%;
        margin-bottom: 10px;
    }
    .cardtype__article.topics {
        width: 100%;
        margin-bottom: 10px;
    }
    .article-box.caseStudy_box {
        display: block;
        margin-bottom: 0;
    }
    .cardtype__article.caseStudy {
        width: 100%;
    }
    .contents--second.blog .main-contents {
        padding: 0 0 10px;
    }
    .blog-container {
        padding: 50px 30px 0;
    }
    .caseStudy_column .caseStudy_imgarea {
        width: 50%;
        margin-bottom: 20px;
    }
    .caseStudy_column .caseStudy_imgarea.download {
        width: 100%;
        text-align: center;
    }
    .caseStudy_column .caseStudy_imgarea.download img{
        margin-top: 30px;
    }
    .caseStudy_column .text_area, .caseStudy_column .text_area.w30 {
        width: 100%;
        padding: 0px;
        margin-bottom: 10px;
    }
    .cardtype__article.downlod_box {
      height: 100%;
      text-align: center;
      padding: 10px;
    }
    .downlod_img03 {
      height: 100%;
    }
    .article_area.downlod_area {
      margin-bottom: 20px;
    }
    .article_area.downlod_area .article-box {
      margin-bottom: 0px;
    }
    .header__menu {
     display: none;
    }
    .btn_area.blog {
        width: 100%; 
    }
    .btn_area.blog .button {
        padding: 0;
    }
    .blog-container blockquote {
        padding: 50px 25px;
	}
	.blog_visual2 {
		display: block;
	}
	.blog_visual2 img {
		width: 100%;
	}
	.blog_img_80 {
    		width: 100%;
	}

	.flex-box {
 	   display: flex;
 	   justify-content: space-between;
	}
	.caseStudy_column .caseStudy_imgarea.download .flex-box img {
 	   width: 30%;
	}
	.caseStudy_column.from :nth-child(1) { order: 2; }
	.caseStudy_column.from :nth-child(2) { order: 1; }
	.caseStudy_column.from :nth-child(3) { order: 3; }

}
/*----------------margin paddingの設定-----------------------*/
.u-mt0 {margin-top:0 !important;}.u-mr0 {margin-right:0 !important;}.u-mb0 {margin-bottom:0 !important;}.u-ml0 {margin-left:0 !important;}.u-pt0 {padding-top:0 !important;}.u-pr0 {padding-right:0 !important;}.u-pb0 {padding-bottom:0 !important;}.u-pl0 {padding-left:0 !important;}.u-mt5 {margin-top:5px !important;}.u-mr5 {margin-right:5px !important;}.u-mb5 {margin-bottom:5px !important;}.u-ml5 {margin-left:5px !important;}.u-pt5 {padding-top:5px !important;}.u-pr5 {padding-right:5px !important;}.u-pb5 {padding-bottom:5px !important;}.u-pl5 {padding-left:5px !important;}.u-mt10 {margin-top:10px !important;}.u-mr10 {margin-right:10px !important;}.u-mb10 {margin-bottom:10px !important;}.u-ml10 {margin-left:10px !important;}.u-pt10 {padding-top:10px !important;}.u-pr10 {padding-right:10px !important;}.u-pb10 {padding-bottom:10px !important;}.u-pl10 {padding-left:10px !important;}.u-mt15 {margin-top:15px !important;}.u-mr15 {margin-right:15px !important;}.u-mb15 {margin-bottom:15px !important;}.u-ml15 {margin-left:15px !important;}.u-pt15 {padding-top:15px !important;}.u-pr15 {padding-right:15px !important;}.u-pb15 {padding-bottom:15px !important;}.u-pl15 {padding-left:15px !important;}.u-mt20 {margin-top:20px !important;}.u-mr20 {margin-right:20px !important;}.u-mb20 {margin-bottom:20px !important;}.u-ml20 {margin-left:20px !important;}.u-pt20 {padding-top:20px !important;}.u-pr20 {padding-right:20px !important;}.u-pb20 {padding-bottom:20px !important;}.u-pl20 {padding-left:20px !important;}.u-mt25 {margin-top:25px !important;}.u-mr25 {margin-right:25px !important;}.u-mb25 {margin-bottom:25px !important;}.u-ml25 {margin-left:25px !important;}.u-pt25 {padding-top:25px !important;}.u-pr25 {padding-right:25px !important;}.u-pb25 {padding-bottom:25px !important;}.u-pl25 {padding-left:25px !important;}.u-mt30 {margin-top:30px !important;}.u-mr30 {margin-right:30px !important;}.u-mb30 {margin-bottom:30px !important;}.u-ml30 {margin-left:30px !important;}.u-pt30 {padding-top:30px !important;}.u-pr30 {padding-right:30px !important;}.u-pb30 {padding-bottom:30px !important;}.u-pl30 {padding-left:30px !important;}.u-mt35 {margin-top:35px !important;}.u-mr35 {margin-right:35px !important;}.u-mb35 {margin-bottom:35px !important;}.u-ml35 {margin-left:35px !important;}.u-pt35 {padding-top:35px !important;}.u-pr35 {padding-right:35px !important;}.u-pb35 {padding-bottom:35px !important;}.u-pl35 {padding-left:35px !important;}.u-mt40 {margin-top:40px !important;}.u-mr40 {margin-right:40px !important;}.u-mb40 {margin-bottom:40px !important;}.u-ml40 {margin-left:40px !important;}.u-pt40 {padding-top:40px !important;}.u-pr40 {padding-right:40px !important;}.u-pb40 {padding-bottom:40px !important;}.u-pl40 {padding-left:40px !important;}.u-mt45 {margin-top:45px !important;}.u-mr45 {margin-right:45px !important;}.u-mb45 {margin-bottom:45px !important;}.u-ml45 {margin-left:45px !important;}.u-pt45 {padding-top:45px !important;}.u-pr45 {padding-right:45px !important;}.u-pb45 {padding-bottom:45px !important;}.u-pl45 {padding-left:45px !important;}.u-mt50 {margin-top:50px !important;}.u-mr50 {margin-right:50px !important;}.u-mb50 {margin-bottom:50px !important;}.u-ml50 {margin-left:50px !important;}.u-pt50 {padding-top:50px !important;}.u-pr50 {padding-right:50px !important;}.u-pb50 {padding-bottom:50px !important;}.u-pl50 {padding-left:50px !important;}.u-mt55 {margin-top:55px !important;}.u-mr55 {margin-right:55px !important;}.u-mb55 {margin-bottom:55px !important;}.u-ml55 {margin-left:55px !important;}.u-pt55 {padding-top:55px !important;}.u-pr55 {padding-right:55px !important;}.u-pb55 {padding-bottom:55px !important;}.u-pl55 {padding-left:55px !important;}.u-mt60 {margin-top:60px !important;}.u-mr60 {margin-right:60px !important;}.u-mb60 {margin-bottom:60px !important;}.u-ml60 {margin-left:60px !important;}.u-pt60 {padding-top:60px !important;}.u-pr60 {padding-right:60px !important;}.u-pb60 {padding-bottom:60px !important;}.u-pl60 {padding-left:60px !important;}.u-mt65 {margin-top:65px !important;}.u-mr65 {margin-right:65px !important;}.u-mb65 {margin-bottom:65px !important;}.u-ml65 {margin-left:65px !important;}.u-pt65 {padding-top:65px !important;}.u-pr65 {padding-right:65px !important;}.u-pb65 {padding-bottom:65px !important;}.u-pl65 {padding-left:65px !important;}.u-mt70 {margin-top:70px !important;}.u-mr70 {margin-right:70px !important;}.u-mb70 {margin-bottom:70px !important;}.u-ml70 {margin-left:70px !important;}.u-pt70 {padding-top:70px !important;}.u-pr70 {padding-right:70px !important;}.u-pb70 {padding-bottom:70px !important;}.u-pl70 {padding-left:70px !important;}.u-mt100 {margin-top:100px !important;}.u-mr100 {margin-right:100px !important;}.u-mb100 {margin-bottom:100px !important;}.u-ml100{margin-left:100px !important;}