/* 共通CSS */

body {
  color: #444;
  background-color: transparent !important;
  overflow-x: hidden;
}

li {
  list-style-type: none;
}

a {
  text-decoration: none !important;
  color: #444;
}

a:hover {
  text-decoration: none !important;
  color: #f39e15 !important;
}

nav {
  width: 100%;
  display: block;
  text-align: center;
  float: left;
}

address {
  color: #fff;
}



/* hokushin_old.cssの上書き */

#home-content #home-pol a:hover {
  color: #f39e15 !important;
}

#home-content #home-pol a {
  color: #444;
}

/* ナビゲーションバーデザイン */

.hs-form-file {
  border: gray 1px solid;
  background-color: #f5f5f5;
  padding: 2px;
  color: #444;
  font-size: 70%;
}

/* 小デバイス（横向きモバイル, 768px 未満） */

/* @media (max-width: 767.98px) { */

@media (max-width: 830px) {
  .hs-nav-scroll {
    overflow-x: scroll;
    height: 63vh;
  }
}

/* 極小デバイス（縦向きモバイル, 576px 未満） */

/* @media (max-width: 575.98px) { */

@media screen and (max-width: 480px) {
  /*　for iPhone Landscape　(iPhone 横)　*/
  .hs-nav-scroll {
    height: auto !important;
  }
  #wpcf7-f928-p623-o1
    > form
    > div.form-row.justify-content-center
    > div:nth-child(5)
    > span.wpcf7-form-control-wrap.your-file1
    > input,
  #wpcf7-f928-p623-o1
    > form
    > div.form-row.justify-content-center
    > div:nth-child(5)
    > span.wpcf7-form-control-wrap.your-file2
    > input,
  #wpcf7-f928-p623-o1
    > form
    > div.form-row.justify-content-center
    > div:nth-child(5)
    > span.wpcf7-form-control-wrap.your-file3
    > input {
    font-size: 80%;
  }
  .hs-form-file {
    font-size: 70%;
  }
}

/* ホバーしたらくるくまわるところ */

.hs-sub-nuv-btn {
  box-shadow: none !important;
  margin: 0 auto;
  font-size: 0.8rem !important;
  /* color: #444 !important; */
}

.hs-sub-nuv-btn:hover {
  color: #f39e15 !important;
}

.hs-nav-effect a {
  position: relative;
  display: inline-block;
  margin: 15px 25px;
  outline: none;
  /* color: #020202; */
  color: #444;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  font-weight: 900;
  /* font-size: 1.8rem; */
  overflow: hidden;
  padding: 0 4px !important;
  height: 1.5em;
  font-family: "brandon-grotesque", sans-serif;
}

.hs-nav-effect a span {
  position: relative;
  display: inline-block;
  transition: transform 0.2s;
  /* color: #020202; */
  color: #444;
  font-size: 15px;
}

.hs-nav-effect a span::before {
  position: absolute;
  top: 100%;
  content: attr(data-hover);
  font-weight: 900;
  transform: translate3d(0, 0, 0);
  /* color: #020202; */
  color: #444;
}

.hs-nav-effect a:hover span,
.hs-nav-effect a:focus span {
  transform: translateY(-100%);
  outline: none;
  /* color: #020202; */
  color: #444;
}

/* .hs-body-start { */

/* animation-name: body-start; */

/* 一回分の時間 */

/* animation-duration: 3s; */

/* 繰り返し回数 */

/* animation-iteration-count: 1; */

/* ゆっくり始まってゆっくり終わる */

/* animation-timing-function: ease; */

/* 終了後の状態 */

/* animation-fill-mode: forwards;
} */

/* @keyframes body-start {
    0% {
        visibility: hidden;
        opacity: 0;
    }
    50% {
        visibility: visible;
        opacity: 1;
    }
    100% {
        visibility: visible;
        opacity: 1;
    }
} */

.hs-nav-link-font {
  font-size: 0.8rem;
  display: inline !important;
  font-weight: normal;
}

/* 応募フォームのエラー処理 ここから*/

input + div .invalid {
  display: none;
}

input + div .valid {
  display: none;
}

input:focus:required:valid {
  background-color: #cdfad1;
}

input:focus:required:invalid {
  background-color: #f1bdbe;
}

input:focus:required:valid + div .valid {
  display: inline-block;
  margin-top: 0.25rem;
  color: #1bb006;
  font-size: 0.85rem;
}

input:focus:required:invalid + div .invalid {
  display: inline-block;
  margin-top: 0.25rem;
  color: #cb2629;
  font-size: 0.85rem;
}

/* 応募フォームのエラー処理 ここまで*/

/* takahashi add */

/* 中デバイス（タブレット, 992px 未満） */

@media (max-width: 991.98px) {
  .page-contenet .page-main-content {
    float: left;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
  }
}

/* 極小デバイス（縦向きモバイル, 576px 未満） */

@media (max-width: 575.98px) {
  .page-content-voices {
    background-image: url(images/voices2.jpg) !important;
    height: 35vh !important;
  }
}

.page-content-voices {
  background-image: url(images/voices.jpg);
  height: 40vh !important;
}

/* パートナーシナジーここから*/

.hs-ict {
  text-align: center;
  top: -55%;
}

.hs-ict-button {
  font-size: 14px;
}

/* 中デバイス（タブレット, 768px 以上） */

@media (min-width: 768px) {
  .hs-ict {
    top: -60% !important;
  }
  .hs-ict-button {
    padding: 0.5em 4em !important;
    font-size: 20px !important;
  }

  .hs-footer-smartsmemark {
    margin: 1.7em 0 1em 1% !important;

    float: right !important;
  }

  .hs-footer-privacymark {
    margin: 1.1em 0 1em 1% !important;

    float: right !important;
  }
}

/* パートナーシナジーここまで*/

/* サービスここから */
#service-web .btn,
#service-training .btn {
  width: 100%;
  margin-top: 20px;
}

#service-web .btn a,
#service-training .btn a {
  background-color: #5a3c96;
  color: #fff;
  border-radius: 10px;
  padding: 10px 10px;
}
/* サービスここまで */

/* Web-solutionここから */
#web-solution-01 {
  width: 100%;
}

#web-solution-01 img {
  width: 100%;
}

#web-solution-02 {
  width: 100%;
}

#web-solution-02 .question-box {
  width: 80%;
  margin: 5% auto;
}

@media (max-width: 575.98px) {
  #web-solution-02 .question-box {
    width: 100%;
    margin: 5% auto;
  }
}

#web-solution-02 .question-box img {
  width: 100%;
}

#web-solution-02 .service-box {
  border: 2px solid #707070;
  border-radius: 10px;
  text-align: center;
  margin: 5% auto 0 auto;
  padding: 0 0 2% 0;
  -webkit-box-shadow: 0px 3px 6px #00000016;
  box-shadow: 0px 3px 6px #00000016;
}

@media (max-width: 575.98px) {
  #web-solution-02 .service-box {
    padding: 0 0 10% 0;
  }
}

#web-solution-02 .title-area {
  background-color: #ebe7f2;
  border-radius: 10px 10px 0 0;
  padding: 10px;
}

#web-solution-02 .title-area p {
  margin: 0;
  font-weight: bold;
  font-size: 1.5em;
}

#web-solution-02 .content-area-01 {
  margin-top: 2%;
  padding: 0 2%;
}

@media (max-width: 575.98px) {
  #web-solution-02 .content-area-01 {
    margin-top: 5%;
  }
}

#web-solution-02 .content-area-01 .txt {
  line-height: 2.5em;
}

#web-solution-02 .content-area-01 .txt span {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(70%, transparent),
    color-stop(70%, #e5de7c)
  );
  background: linear-gradient(transparent 70%, #e5de7c 70%);
}

#web-solution-02 .content-area-02 {
  margin-top: 2%;
  padding: 0 2%;
}

#web-solution-02 .content-area-02 .row {
  width: 70%;
  margin: 0 auto;
}

@media (max-width: 991.98px) {
  #web-solution-02 .content-area-02 .row {
    width: 100%;
  }
}

#web-solution-02 .content-area-02 .row .col-4 .step-01,
#web-solution-02 .content-area-02 .row .col-4 .step-02,
#web-solution-02 .content-area-02 .row .col-4 .step-03 {
  background-color: #ebe7f2;
  width: 100%;
  padding-top: 100%;
  border-radius: 50%;
  position: relative;
  margin-top: 2%;
}

#web-solution-02 .content-area-02 .row .col-4 .step-01 p,
#web-solution-02 .content-area-02 .row .col-4 .step-01 span,
#web-solution-02 .content-area-02 .row .col-4 .step-02 p,
#web-solution-02 .content-area-02 .row .col-4 .step-02 span,
#web-solution-02 .content-area-02 .row .col-4 .step-03 p,
#web-solution-02 .content-area-02 .row .col-4 .step-03 span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  width: 90%;
}

#web-solution-02 .content-area-02 .row .col-4 .step-01 p,
#web-solution-02 .content-area-02 .row .col-4 .step-02 p,
#web-solution-02 .content-area-02 .row .col-4 .step-03 p {
  font-weight: bold;
}

#web-solution-02 .content-area-02 .row .col-4 .step-01 span,
#web-solution-02 .content-area-02 .row .col-4 .step-02 span,
#web-solution-02 .content-area-02 .row .col-4 .step-03 span {
  color: #ffffff;
  font-size: 7rem;
  font-weight: bold;
}

@media (max-width: 575.98px) {
  #web-solution-02 .content-area-02 .row .col-4 .step-01 p,
  #web-solution-02 .content-area-02 .row .col-4 .step-02 p,
  #web-solution-02 .content-area-02 .row .col-4 .step-03 p {
    font-size: 0.7em;
  }
  #web-solution-02 .content-area-02 .row .col-4 .step-01 span,
  #web-solution-02 .content-area-02 .row .col-4 .step-02 span,
  #web-solution-02 .content-area-02 .row .col-4 .step-03 span {
    font-size: 5em;
  }
}

@media (max-width: 575.98px) {
  #web-solution-02 .content-area-02 .row .col-4 {
    padding: 5px;
  }
}

#web-solution-02 .btn-area {
  margin: 5% auto 3% auto;
}

#web-solution-02 .btn-area a {
  text-decoration: none;
  color: #212529;
  border: 5px solid #fc6868;
  border-radius: 10px;
  padding: 10px;
}

@media (max-width: 575.98px) {
  #web-solution-02 .btn-area {
    margin: 10% auto 0 auto;
  }
}

#web-solution-02 .bnr-container {
  width: 60%;
  margin: 5% auto 0 auto;
}

#web-solution-02 .bnr-container img {
  width: 100%;
}

#web-solution-02 .bnr-container .btn-absolute {
  position: absolute;
  top: 50%;
  left: 36%;
}

#web-solution-02 .bnr-container .btn-absolute a:hover {
  background-color: #ffffff;
}

#web-solution-02 .trend-box {
  position: absolute;
  top: -70px;
  left: 0;
}

#web-solution-02 .trend-box img {
  width: 100%;
}

@media (max-width: 575.98px) {
  #web-solution-02 .trend-box {
    width: 20%;
    top: 10px;
  }
}

@media (max-width: 575.98px) {
  #web-solution-02 .ternd-title {
    padding-left: 20%;
  }
}

@media (max-width: 575.98px) {
  #web-solution-02 .pc-br {
    display: none;
  }
}

#service-web .btn a {
  background-color: #5a3c96;
  color: #fff;
  border-radius: 10px;
}

#web-solution-contact h5 {
  font-weight: bold;
}
/* Web-solutionここまで */
/* Web-solution-mobile　ここから */
#mobile-first-main-visual h1,
#mobile-first-main-visual p {
  text-align: center;
}

@media (max-width: 575.98px) {
  #mobile-first-main-visual h1,
  #mobile-first-main-visual p {
    text-align: left;
  }
  #mobile-first-main-visual h1 h1,
  #mobile-first-main-visual p h1 {
    font-size: 1.2em;
  }
}

#mobile-first-main-visual .row {
  margin-top: 5%;
}

#mobile-first-main-visual .point-box {
  margin-top: 10%;
  padding: 10%;
  background-color: #dbcf6f;
  border-style: solid;
  border-color: #dbcf6f;
  -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
}

#mobile-first-main-visual .point-box .point-list {
  font-size: 1.2em;
  font-weight: bold;
}

#mobile-first-main-visual .point-box .point-list:before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(images/icon-check.png) no-repeat;
  background-size: contain;
  margin-right: 10px;
}

#mobile-first-contents .border-box {
  border: 1px solid #fff;
  -webkit-box-shadow: 10px 10px 10px lightgrey;
  box-shadow: 10px 10px 10px lightgrey;
  padding: 30px;
  margin-top: 100px;
}

#mobile-first-contents .border-box h5 {
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
}

#mobile-first-contents .border-box .container {
  margin-top: 5%;
}

#mobile-first-contents .border-box .card-title {
  font-weight: bold;
  text-align: center;
}

#mobile-first-contents .border-box .feature-icon {
  text-align: center;
  margin-bottom: 10px;
}

#mobile-first-contents .border-box .feature-icon img {
  width: 30%;
}

#mobile-first-contents .border-box .step-box {
  border: 3px solid #54595f;
  background-color: #faf6f6;
  padding: 30px;
  margin-bottom: 2%;
}

#mobile-first-contents .border-box .step-box .card-num {
  margin-bottom: 10px;
}

#mobile-first-contents .border-box .step-box .card-num,
#mobile-first-contents .border-box .step-box .card-text {
  text-align: center;
}

#mobile-first-contents .border-box .add-text {
  padding: 3rem 0;
}

#mobile-first-contents .border-box .contact-link a {
  color: #f39e15;
}

#mobile-first-contents .border-box .contact-link a:hover {
  color: #5a3c96 !important;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  #mobile-first-contents .border-box .add-text {
    padding: 3rem;
  }
}

#mobile-first-contents .border-box .sp-mt-4 {
  margin-top: 0;
}

@media (max-width: 575.98px) {
  #mobile-first-contents .border-box .sp-mt-4 {
    margin-top: 1.5rem !important;
  }
}

.to-web-solution-btn {
  position: fixed;
  bottom: 16px;
  right: 16px;
  text-align: right;
}

.to-web-solution-btn:hover {
  opacity: 0.85;
}

.to-web-solution-btn a {
  display: block;
  text-decoration: none;
}

.to-web-solution-btn img {
  width: 50%;
}

@media (max-width: 575.98px) {
  .to-web-solution-btn img {
    width: 35%;
  }
}
/* Web-solution-mobile　ここまで */

@media (min-width: 768px) {
  a[href^="tel:"] {
    pointer-events: none;
  }
}