@charset "UTF-8";

/* ########### データプロバイダーサービス｜株式会社エクスマート  ########### */
/*
 * "Noto Sans JP" is lisenced under the SIL Open Font License 1.1
 * http://fonts.googleapis.com
 * https://www.google.com/fonts/attribution
 * http://scripts.sil.org/OFL
 */
/*
/* Copyright (c) 2025 株式会社エクスマート 
 Released under the MIT license
 https://opensource.org/licenses/mit-license.php */



/* ###### 共通データ ###### */
body {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, Verdana, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  /* 収まらない場合に折り返す */
  word-break: normal;
  /* 単語の分割はデフォルトに依存 */
  line-break: strict;
  /* 禁則処理を厳格に適用 */
}

html {
  text-align: justify;
  overflow-x: hidden;
  color: #01101c;
  font-size: 16px;
}

.white {
  color: #ffffff !important;
}

.black {
  color: #01101c !important;
}

.blue {
  color: #0058a2 !important;
}

.red {
  color: #de2831 !important;
}

.back--white {
  background-color: #ffffff !important;
}

.back--black {
  background-color: #01101c !important;
}

.back--blue {
  background-color: #0058a2 !important;
}

.back--lightblue {
  background-color: #c8d8fc !important;
}

.back--red {
  background-color: #de2831 !important;
}

.border {
  border: 1px solid #01101c;
}

.border-blue {
  border: 1px solid #0058a2;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 300;
  src: url("../font/NotoSansJP-Light.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: url("../font/NotoSansJP-Regular.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  src: url("../font/NotoSansJP-Medium.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: url("../font/NotoSansJP-Bold.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 900;
  src: url("../font/NotoSansJP-Black.woff") format("woff");
  font-display: swap;
}

.Noto-Sans-JP {
  font-family: "Noto Sans JP", "Helvetica Neue", "Arial", "verdana", "メイリオ", "Meiryo", "ヒラギノ角ゴ ProN W3", "HiraKakuProN-W3", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro";
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-align: initial;
  line-height: 1.5;
  color: #01101c;
  font-weight: 700;
}


h1 {
  font-size: 38px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 19px;
}

h5 {
  font-size: 18px;
}

h6 {
  font-size: 17px;
}

@media only screen and (max-width: 768px) {

  h1 {
    font-size: 32px;
  }

  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 19px;
  }

  h4 {
    font-size: 18px;
  }

  h5 {
    font-size: 17px;
  }

  h6 {
    font-size: 16px;
  }
}

label,
td,
th,
p,
dd,
dt,
li,
a,
input,
textarea,
select,
div {
  color: #01101c;
  line-height: 1.5;
  font-size: 16px;
  font-weight: 400;
}

input,
select,
textarea {
  outline: none;
  border: 1px solid #01101c;
}

button,
optgroup,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

ul,
li {
  list-style: none;
}

#article ul li,
#article-2th ul li {
  list-style: initial !important;
  margin-left: 1.5em;
  line-height: 1.75;
}

#article ol li,
#article-2th ol li {
  list-style-type: decimal !important;
  margin-left: 1.5em;
  line-height: 1.75;
}

a {
  text-decoration: none;
  display: inline-block;
}

img {
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  /* pointer-events: none; */
  /* image-rendering: -webkit-optimize-contrast; */
}

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

.nowrap {
  white-space: nowrap;
}

.hidden {
  overflow: hidden;
}

.hidden-x {
  overflow-x: hidden;
}

.flip-horizontal {
  transform: scale(-1, 1);
}

.big {
  font-size: 120%;
}

.normal {
  font-weight: normal;
}

.weight300 {
  font-weight: 300 !important;
}

.weight400 {
  font-weight: 400 !important;
}

.weight500 {
  font-weight: 500 !important;
}

.weight600 {
  font-weight: 600 !important;
}

.weight700,
.bold {
  font-weight: 700 !important;
}

.weight800 {
  font-weight: 800 !important;
}

.weight900 {
  font-weight: 900 !important;
}

.small {
  font-size: 85%;
  font-weight: 400;
}

.asterisk {
  font-size: 70%;
  vertical-align: 5px;
}

.initial {
  text-align: initial;
}

.center {
  text-align: center;
}

.justify {
  text-align: justify;
}

.right {
  text-align: right;
}

.left {
  text-align: left !important;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inline {
  display: inline !important;
}

.inline-block {
  display: inline-block !important;
}

.inline-flex {
  display: inline-flex;
}

.none {
  display: none;
}

.block {
  display: block;
}

.margin-block0 {
  margin-block: 0 !important;
}

.text-indent1 {
  text-indent: 1em;
}

.text-indent2 {
  padding-left: 1.1em;
  text-indent: -1.1em;
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUpTrigger {
  opacity: 0;
}

.fadeUpTrigger2 {
  opacity: 0;
}

.fadeUpTrigger3 {
  opacity: 0;
}

.effectfade {
  opacity: 0;
  animation: EffectFade 1.0s forwards;
  will-change: transform
}

@keyframes EffectFade {

  0% {
    opacity: 0;
    transform: translate(0px, 45px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.lefttoright {
  opacity: 0;
  animation: LeftToRight 1.0s forwards;
}

@keyframes LeftToRight {
  0% {
    opacity: 0;
    transform: translate(-45px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.righttoleft {
  opacity: 0;
  animation: RightToLeft 1.0s forwards;
}

@keyframes RightToLeft {
  0% {
    opacity: 0;
    transform: translate(45px, 0px);
  }

  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

.effectfade {
  animation-delay: 0.2s;
}


.text11 {
  font-size: 11px;
}

.text12 {
  font-size: 12px;
}

.text13 {
  font-size: 13px;
}

.text13 p {
  font-size: 13px;
}

.text14 {
  font-size: 14px;
}

.text15 {
  font-size: 15px;
}

.text16 {
  font-size: 16px;
  line-height: 1.75;
}

#news-detail p {
  line-height: 1.75;
}

#category-works p {
  line-height: 1.75;
}

.text16 a {
  font-size: inherit;
  line-height: inherit;
  color: #0058a2 !important;
  font-weight: inherit;
  text-indent: 0em;
  padding-bottom: 2px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.3s;
  display: inline;
}

.text16.black a {
  color: #01101c !important;
}

.text17 {
  font-size: 17px;
}

.text18 {
  font-size: 18px;
}

.text19 {
  font-size: 19px;
}

.text21 {
  font-size: 21px;
}

.text22 {
  font-size: 22px;
}

.text24 {
  font-size: 24px !important;
}

.text25 {
  font-size: 25px;
}

.text26 {
  font-size: 26px;
}

.text30 {
  font-size: 30px;
}

.text38 {
  font-size: 38px;
}


.text30 a {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-indent: 0em;
  padding-bottom: 2px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 4px;
  transition: background-size 0.3s;
  display: inline;
}

.text38 a {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-indent: 0em;
  padding-bottom: 2px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 4px;
  transition: background-size 0.3s;
  display: inline;
}

@media (any-hover: hover) {
  .text16 a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }

  .text30 a:hover,
  .text38 a:hover {
    background-position: bottom left;
    background-size: 100% 4px;
  }

}

.accent-bar {
  height: 10px;
  width: 250px;
  background-color: #de2831;
  margin-bottom: 30px;
}

.h1-top {
  color: #0058a2;
  font-size: 38px;
  font-weight: 700;
}

.h1-common {
  color: #0058a2;
  font-size: 38px;
  margin-bottom: 25px;
}

.subtitle {
  color: #0058a2;
  font-size: 30px;
  margin-bottom: 30px;
  font-weight: 700;
}

.h2-common {
  color: #0058a2;
  font-size: 30px;
  margin-bottom: 30px;
  font-weight: 700;
}

.h2-step {
  background-color: #0058a2;
  color: #ffffff;
  font-size: 24px;
  margin-bottom: 30px;
  padding: 1px 15px 3px;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  margin-bottom: 10px;
}

.h3-common {
  color: #0058a2;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: 700;
}

.margin-top10 {
  margin-top: 10px;
}

.margin-top15 {
  margin-top: 15px;
}

.margin-top20 {
  margin-top: 20px;
}

.margin-top30 {
  margin-top: 30px;
}

.margin-top45 {
  margin-top: 45px;
}

.margin-top60 {
  margin-top: 60px;
}

.margin-top90 {
  margin-top: 90px;
}

.margin-top-contact {
  margin-top: 100px;
}

.margin-top130 {
  margin-top: 130px;
}

.margin-top190 {
  margin-top: 190px;
}

.margin-bottom60 {
  margin-bottom: 60px;
}

.margin-bottom5 {
  margin-bottom: 5px;
}

.margin-bottom10 {
  margin-bottom: 10px;
}

.margin-bottom15 {
  margin-bottom: 15px;
}

.margin-bottom35 {
  margin-bottom: 35px;
}

.margin-bottom70 {
  margin-bottom: 70px;
}

.blogtext {
  font-size: 14px;
  line-height: 1.5 !important;
  font-weight: 500;
}

.blogtext p {
  font-size: 14px;
  line-height: 1.5 !important;
  font-weight: 500;
}

.blogtext img {
  margin-top: 20px;
  margin-bottom: 30px;
  display: block;
}

table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}


/* ###### ヘッダー ###### */

#header {
  width: 100%;
  z-index: 2001;
  transition: background-color 0.3s ease;
  transition: top 0.3s ease;
  background-color: #ffffff;
}

.header-top {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.header__logo a {
  transition: all .4s;
}

@media (any-hover: hover) {
  .header__logo a:hover {
    opacity: 0.5;
  }
}

.openbtn {
  position: absolute;
  top: 15px;
  right: 10px;
  cursor: pointer;
  width: 25px;
  height: 25px;
  z-index: 2001;
}

.openbtn span {
  display: inline-block;
  transition: all .4s;
  position: absolute;
  height: 2px;
  background: #0058a2;
  width: 100%;
}

.openbtn span:nth-of-type(1) {
  top: 0px;
}

.openbtn span:nth-of-type(2) {
  top: 10px;
}

.openbtn span:nth-of-type(3) {
  top: 20px;
}

.openbtn.active span:nth-of-type(1) {
  top: 3px;
  left: 0px;
  transform: translateY(6px) rotate(-45deg);
  width: 100%;
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3) {
  top: 15px;
  left: 0px;
  transform: translateY(-6px) rotate(45deg);
  width: 100%;
}


#header.UpMove {
  position: fixed;
  width: 100%;
  animation: UpAnime 0.5s forwards;
}

@keyframes UpAnime {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-120px);
  }
}

/*　下に下がる動き　*/
#header.DownMove {
  position: fixed;
  width: 100%;
  animation: DownAnime 0.5s forwards;
}

@keyframes DownAnime {
  from {
    opacity: 0;
    transform: translateY(-120px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.event-none {
  pointer-events: none;
  margin-bottom: 14px;
}


/* ###### フッター ####### */
.footer__copy {
  border-top: 4px solid #0058a2;
  font-size: 16px;
  font-weight: 400;
}

.footer__copy div {
  font-size: inherit;
  font-weight: inherit;
}

.footer__logo a {
  transition: all .4s;
}

@media (any-hover: hover) {
  .footer__logo a:hover {
    opacity: 0.5;
  }
}

.footer__nav ul {
  display: flex;
  flex-wrap: wrap;
}

.footer__nav ul li a {
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.footer__nav a {
  padding-bottom: 4px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 2px;
  transition: background-size 0.3s;
}

@media (any-hover: hover) {
  .footer__nav a:hover {
    background-position: bottom left;
    background-size: 100% 2px;
  }
}


/* ###### 下層ページTOP ###### */

#underlayer-back {
  margin-top: 80px;
  background: linear-gradient(110deg, #0058a2 0%, #3b8acc 100%);
  height: 380px;
}

.top-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 380px;
}

.top-text {
  position: absolute;
  left: 0;
  flex: 1;
  display: flex;
  align-items: center;
  background-color: #ffffff;
  z-index: 1;
  box-shadow: 0 3px 21px 0 rgba(0, 0, 0, 0.4);
}

.top-image {
  width: 343px;
}

/* ###### サービスメニュー ###### */
.service__nav-wrapper {
  background-color: #fff;
  height: 100px;
  border-radius: 23px;
  z-index: 1;
  box-shadow: 0 5px 9px rgba(1, 34, 62, 0.43);
  margin-top: -20px;
  display: flex;
  align-items: center;
}

.service__nav-viewport {
  overflow: hidden;
  width: calc(100% - clamp(50px, calc(100vw / 1100 * 100), 100px));
  height: 100%;
  display: flex;
  align-items: center;
}

.service__nav.service__nav-track {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  will-change: transform;
  transition: transform .35s ease;
}

.service__nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.service__nav li {
  flex: 0 0 25%;
  width: auto;
  text-align: center;
  border-left: 1px solid #cccdce;
  line-height: 49px;
}

.service__nav li:last-child {
  border-right: 1px solid #cccdce;
}

.service__nav li a {
  font-size: clamp(14px, calc(100vw / 1100 * 20), 20px);
  font-weight: 500;
  padding-block: 9px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 4px;
  transition: background-size 0.3s;
  position: relative;
  margin-left: -40px;
}

.service__nav li a::after {
  content: "";
  position: absolute;
  display: inline-block;
  margin-left: clamp(14px, calc(100vw / 1100 * 20), 20px);
  top: 8px;
  width: clamp(14px, calc(100vw / 1100 * 20), 20px);
  height: clamp(14px, calc(100vw / 1100 * 20), 20px);
  border-right: 3px solid #01101c;
  border-bottom: 3px solid #01101c;
  transform: rotate(45deg);
}

@media (any-hover: hover) {
  .service__nav li a:hover {
    background-position: bottom left;
    background-size: 100% 4px;
    color: #0058a2;
  }

  .service__nav li a:hover::after {
    border-right: 3px solid #0058a2;
    border-bottom: 3px solid #0058a2;
  }

}

.service-arrow-left,
.service-arrow-right {
  width: clamp(25px, calc(100vw / 1100 * 50), 50px);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.service-arrow-left[disabled],
.service-arrow-right[disabled] {
  opacity: .35;
  cursor: not-allowed;
}

.service-arrow-left::before,
.service-arrow-right::before {
  content: "";
  display: inline-block;
  width: clamp(14px, calc(100vw / 1100 * 20), 20px);
  height: clamp(18px, calc(100vw / 1100 * 25), 25px);
  background: #0058a2;
}

.service-arrow-left::before {
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.service-arrow-right::before {
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}


/* ###### サービス概要 ###### */
.service-overview-cards2 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.service-overview-cards2 li {
  width: 47.5%;
  text-align: center;
  margin-bottom: 35px;
}

.service-overview-cards6 {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.service-overview-cards6 li {
  width: 30%;
  text-align: center;
  margin-bottom: 5%;
}

.service-overview-cards6 li img {
  box-shadow: 0 5px 9px rgba(1, 34, 62, 0.43);
}

.capsule-date {
  display: flex;
  align-items: center;
  height: 42px;
  width: fit-content;
  padding: 5px 25px 7.5px;
  font-size: 22px;
  border-radius: 25px;
  margin-left: auto;
  color: #ffffff;
  background: #0058a2;
}

/* ###### サービス内容 ###### */
.service-content-cards1 {
  padding: 35px 20px;
  margin-bottom: 55px;
  box-shadow: 0 0 17px rgba(1, 34, 62, 0.19);
}

.service-content-cards25 {
  display: flex;
  flex-wrap: wrap;
}

.service-content-cards25 li {
  border: 1px solid #b8b8b8;
  display: flex;
  text-align: center;
}

.service-content-cards25 li figure {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
}

.service-content-cards25 li figcaption {
  text-align: left;
}

/* ###### サービス活用法 ###### */

.service-method-cards {
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0 2px 5px rgba(1, 34, 62, 0.43);
  margin-bottom: 35px;
}

.service-method-cards.last-child {
  margin-bottom: 0px;
}

.method-cards-photo {
  width: 220px;
}

.method-cards-text {
  flex: 1;
  padding: 25px 20px;
  position: relative;
}

.service-method-link {
  font-size: 16px;
  font-weight: 500;
  display: block;
  margin-left: auto;
  width: fit-content;
  position: absolute;
  right: 20px;
  bottom: 25px;
  text-indent: 0em;
  padding-bottom: 5px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 2px;
  transition: background-size 0.3s;
}

@media (any-hover: hover) {
  .service-method-link:hover {
    background-position: bottom left;
    background-size: 100% 2px;
  }
}

.service-method-link.other__link {
  position: relative;
  margin-top: 55px;
  margin-bottom: 55px;
  bottom: 0;
  right: 0px;
}

.service-method-link.other__link.margin-bottom0 {
  margin-bottom: 0px;
}

.service-method-link::after {
  content: "";
  display: inline-block;
  margin-bottom: 1px;
  margin-left: 10px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #01101c;
  border-bottom: 2px solid #01101c;
  transform: rotate(-45deg);
}

/* ###### サービスの流れ ###### */

.service-flow {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* ###### 本サービスが選ばれる理由 ###### */

.service-reason>li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  background: #e9f0ff;
  border-radius: 20px;
  padding: 30px 50px;
}

.service-reason>li:nth-child(n + 2) {
  margin-top: 40px;
}

/* ###### CTA ###### */

#cta,
#cta1,
#cta2,
#cta3 {
  background: #d3edff;
}

.cta-inner {
  padding-block: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.button-cta a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 40px 6px;
  min-height: 60px;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  background-color: #c94009;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all .3s ease 0s;
}

.row2-b {
  padding-inline: 3px;
}

.button-cta a::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 25px;
  margin-left: 25px;
  background: #ffffff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.button-cta.row2 a::after {
  margin-left: 8px;
}


.button-cta button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 65px 6px;
  min-height: 60px;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  background-color: #c94009;
  border: 3px solid #c94009;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all .3s ease 0s;
}

.button-cta button::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 25px;
  margin-left: 25px;
  background: #ffffff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.button-cta:has(input) {
  position: relative;
  top: 0;
  right: 0;
  left: 0;
  width: fit-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 100px 6px;
  min-height: 60px;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  background-color: #c94009;
  border: 3px solid #c94009;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all .3s ease 0s;
}

.button-cta.confirm:has(input) {
  position: relative;
  right: 45px;
}

.button-cta:has(input) input {
  position: absolute;
  right: 45px;
  left: 0;
  width: fit-content;
  margin-inline: auto;
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  border: none;
}

.button-cta:has(input)::after {
  content: "";
  right: 55px;
  position: absolute;
  z-index: 9999;
  width: 20px;
  height: 25px;
  margin-left: 25px;
  background: #ffffff;
  clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.button-cta.confirm:has(input)::after {
  right: 80px;
}

.button-cta:has(input)::before {
  content: "";
  position: absolute;
  left: 60px;
  bottom: 5px;
  width: 0;
  height: 3px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .button-cta:has(input):hover::before {
    width: calc(100% - 162px);
  }
}

.button-cta.confirm:has(input)::before {
  left: 88px;
}

@media (any-hover: hover) {
  .button-cta.confirm:has(input):hover::before {
    width: calc(100% - 218px);
  }
}

/* 下線アニメーション（文字の下だけ） */
.button-cta a span {
  position: relative;
  display: inline-block;
}

.button-cta a span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

.button-cta.row2 a span.row2-b::before {
  display: none;
}

.button-cta.row2 a .span-row2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .button-cta.row2 a:hover .span-row2::before {
    width: 100%;
  }
}

@media (any-hover: hover) {
  .button-cta a:hover span::before {
    width: 100%;
  }
}

/* 下線アニメーション（文字の下だけ） */
.button-cta button span {
  position: relative;
  display: inline-block;
}

.button-cta button span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .button-cta button:hover span::before {
    width: 100%;
  }
}

.button-red a {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 65px 6px;
  min-height: 60px;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 500;
  color: #c94009;
  background-color: #ffffff;
  border: 3px solid #c94009;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all .3s ease 0s;
}

.button-red.arrow-red a::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 25px;
  margin-right: 25px;
  background: #c94009;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}


.button-red:has(input) {
  position: relative;
  top: 0;
  right: 0;
  left: 0px;
  width: fit-content;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 135px 6px;
  min-height: 60px;
  border-radius: 20px;
  font-size: 28px;
  font-weight: 700;
  color: #c94009;
  background-color: #ffffff;
  border: 3px solid #c94009;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all .3s ease 0s;
}

.button-red:has(input) input {
  position: absolute;
  right: 0;
  left: 50px;
  width: fit-content;
  margin-inline: auto;
  font-size: 28px;
  font-weight: 700;
  color: #c94009;
  border: none;
}

.button-red:has(input)::after {
  content: "";
  left: 83px;
  position: absolute;
  z-index: 9999;
  width: 20px;
  height: 25px;
  margin-right: 25px;
  background: #c94009;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.button-red:has(input)::before {
  content: "";
  position: absolute;
  left: 134px;
  bottom: 5px;
  width: 0;
  height: 3px;
  background-color: #c94009;
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .button-red:has(input):hover::before {
    width: calc(100% - 218px);
  }
}

/* 下線アニメーション（文字の下だけ） */
.button-cta a span {
  position: relative;
  display: inline-block;
}

.button-cta a span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background-color: #ffffff;
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .button-cta a:hover span::before {
    width: 100%;
  }
}


/* 下線アニメーション（文字の下だけ） */
.button-red a span {
  position: relative;
  display: inline-block;
}

.button-red a span::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 3px;
  background-color: #c94009;
  transition: width 0.3s ease;
}

@media (any-hover: hover) {
  .button-red a:hover span::before {
    width: 100%;
  }
}


/* ###### 新着導入事例 ###### */

.posts-new {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.posts-new article {
  width: 31.5%;
  padding: 30px 23px;
  background-color: #e9f0ff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
}

.article__img {
  max-width: 300px;
  margin: 0 auto;
}

.article__img img {
  border: 1px solid #d5d5d5;
}

.posts-new article .text24 {
  font-weight: 500;
}

.posts-new article .text24 a {
  font-weight: inherit;
  font-size: inherit;
}

.category-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: -15px;
}

.category {
  font-size: 20px;
  font-weight: 500;
  padding: 13px 40px;
  background-color: #a8a8a8;
  border-radius: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-top: 15px;
}

.category.checked {
  background-color: #a5cff3;
}

.category-news {
  font-size: 20px;
  font-weight: 500;
  padding: 11px 60px;
  color: #01101c;
  background-color: #a8a8a8;
  display: inline-block;
  margin-right: 15px;
  margin-top: 15px;
}

.category-news.checked {
  color: #ffffff;
  background-color: #0058a2;
}

.hashtag {
  font-size: 20px;
  font-weight: 500;
  padding: 13px 40px;
  background-color: #a8a8a8;
  color: #ffffff;
  border-radius: 50px;
  display: inline-block;
  margin-right: 15px;
  margin-top: 15px;
}

.hashtag.checked {
  background-color: #0058a2;
}

.category-news a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.category a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.hashtag a {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}

.title-works a {
  padding-bottom: 2px;
  background-image: linear-gradient(#0058a2, #0058a2);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.3s;
  display: inline;
}

@media (any-hover: hover) {
  .title-works a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }
}


.article__text .title-works {
  margin-bottom: 5px;
}

.category a {
  padding-bottom: 2px;
  background-image: linear-gradient(#01101c, #01101c);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.3s;
  display: inline;
}

@media (any-hover: hover) {
  .category a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }
}


.hashtag a {
  padding-bottom: 2px;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.3s;
  display: inline;
}

@media (any-hover: hover) {
  .hashtag a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }
}

.category-news a {
  padding-bottom: 2px;
  background-image: linear-gradient(#01101c, #01101c);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.3s;
  display: inline;
}

.category-news.checked a {
  padding-bottom: 2px;
  background-image: linear-gradient(#ffffff, #ffffff);
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: 0 3px;
  transition: background-size 0.3s;
  display: inline;
}


@media (any-hover: hover) {
  .category-news a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }
}



/* ###### 関連サービス ###### */

/* ###### 導入事例ページ ###### */
.search-wrapper {
  background-color: #ffffff;
  padding: 75px 60px;
  border-radius: 20px;
  border: 7px solid #a5cff3;
}

.posts-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.posts-list article {
  width: 100%;
  padding: 90px 58px;
  background-color: #e9f0ff;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.posts-list article:nth-child(n + 2) {
  margin-top: 60px;
}

.article__img2 {
  max-width: 400px;
}

.article__img2 img {
  border: 1px solid #d5d5d5;
}

.posts-list .article__right {
  flex: 1;
  padding-left: 40px;
}

.posts-list article .text24 {
  font-weight: 500;
}

.posts-list article .text24 a {
  font-weight: inherit;
  font-size: inherit;
}

.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

.numbersblock a {
  background-color: #ffffff;
  color: #0058a2;
  border: 2px solid #0058a2 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 40px;
  height: 40px;
  padding-bottom: 2px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
}

.numbersblock span {
  background-color: #0058a2;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 40px;
  height: 40px;
  border: 2px solid #0058a2;
  padding-bottom: 2px;
  font-size: 24px;
  line-height: 30px;
  font-weight: 500;
}

.page-numbers .numbersblock span.dots {
  background-color: #ffffff;
  color: #0058a2;
  border: unset !important;
}

.arrow {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border: 2px solid #0058a2 !important;
}

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

.prev::after {
  left: 16px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #0058a2;
  border-right: 2px solid #0058a2;
  transform: rotate(-135deg);
}

.next::after {
  left: 6px;
  width: 15px;
  height: 15px;
  border-top: 2px solid #0058a2;
  border-right: 2px solid #0058a2;
  transform: rotate(45deg);
}

/* ###### 導入事例詳細ページ ###### */

.article__img3 {
  max-width: 100%;
}

.article__img3 img {
  border: 1px solid #d5d5d5;
}

.issues-title {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 40px;
  border-radius: 20px 20px 0px 0px;
  color: #ffffff;
  background-color: #0058a2;
  border: 5px solid #0058a2;
}

.issues-text {
  padding: 30px 40px;
  border: 5px solid #0058a2;
  border-top: none;
}

/* ###### お問い合わせページ ###### */

input[type=radio] {
  width: 17px;
  height: 17px;
  vertical-align: sub;
  display: inline-block;
  margin-right: 3px;
  accent-color: #0058a2;

}

.radio-input span {
  margin-left: 0;
  margin-right: 8px;
  margin-bottom: 5px;
}

.contacttable p {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  display: inherit;
  width: 100%;
}

.radio-input input {
  vertical-align: -3px
}

.radio-input {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
}

.radio {
  display: inline-flex;
  margin-right: 15px;
  align-items: center;
  cursor: pointer;
  margin-bottom: 7px;
}

.radio input[type="radio"] {
  display: none;
  /* デフォルトの丸を非表示 */
}

.custom-radio {
  width: 16px;
  height: 16px;
  border: 2px solid #0058a2;
  border-radius: 50%;
  margin-right: 3px;
  margin-top: 3px;
  position: relative;
}

.radio input[type="radio"]:checked+.custom-radio::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 8px;
  height: 8px;
  background: #0058a2;
  border-radius: 50%;
}

input[type=checkbox] {
  width: 19px;
  height: 19px;
  vertical-align: sub;
  display: inline-block;
  margin-right: 5px;

}

.contacttable .hitusu {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px;
  margin-bottom: 5px;
  padding: 0px 13px 2px;
  font-weight: 500;
  border-radius: 5px;
  color: #ffffff;
  background: #de2a32;
  font-size: 16px;
}

.contacttable th {
  padding-top: 20px;
  font-size: 30px;
  font-weight: 700;
  width: 450px;
  color: #0058a2;
  position: relative;
}

.contacttable td {
  padding: 20px 0px;
  font-weight: 400;
}

::placeholder {
  font-size: 24px;
  font-weight: 400;
  -webkit-text-fill-color: #a7a7a7 !important;
}

.contacttable td input[type=text],
.contacttable td input[type=tel],
.contacttable td input[type=email] {
  font-size: 24px;
  width: 100%;
  padding: 3px 15px 4px;
  height: 50px;
  font-weight: 500;
  border: #01101c 1px solid;
  background-color: #ffffff;
  -webkit-text-fill-color: #01101c !important;
}

/* selectのテキストの文字選択したら黒になる */
.contacttable td select {
  -webkit-text-fill-color: #01101c;
  /* 表示色は黒 */
  color: #01101c;
  /* セレクト中は黒 */
}

/* selectのテキストの文字先頭プレースホルダー（value=""）が選ばれている間だけグレー */
.contacttable td select:has(option:checked[value=""]) {
  -webkit-text-fill-color: #a7a7a7;
  /* 表示色はグレー */
  color: #01101c;
  /* セレクト中は黒 */
}

input:-webkit-autofill {
  box-shadow: 0 0 0 1000px #ffffff inset;
}

.contacttable td select {
  font-size: 24px;
  width: 100%;
  padding: 6px 30px 4px 15px;
  height: 50px;
  font-weight: 500;
  border: #01101c 1px solid;
  background-color: #ffffff;
  max-width: 400px;
  appearance: none;
  /* ブラウザデフォルトの矢印を非表示 */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 12 24'><polygon points='7,9 17,9 12,17' fill='%230066cc'/></svg>");

  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 44px;
}


.contacttable td textarea {
  font-size: 24px;
  font-weight: 400;
  padding: 6px 15px;
  margin-bottom: 16px;
  width: 100%;
  height: 250px;
  border: #01101c 1px solid;
  background-color: #ffffff;
  -webkit-text-fill-color: #01101c !important;
}

.tel-group {
  display: flex;
  word-spacing: 25px;
}

.hyphen {
  margin: 13px;
}

.post-group {
  display: flex;
  align-items: center;
  word-spacing: 25px;
}

.post-group input {
  max-width: 300px;
  margin-inline: 15px;
}

#addr-btn {
  font-size: 24px;
  font-weight: 400;
  max-width: 250px;
  width: 100%;
  text-align: center;
  padding: 3px 15px 3px;
  height: 50px;
  border-radius: 25px;
  color: #ffffff;
  background-color: #0058a2;
  margin-left: 25px;
}

.cta-wrapper2 {
  padding: 25px 85px 25px 25px;
  border: #0058a2 2px solid;
  border-radius: 10px;
}

.cta-inner2 {
  display: flex;
  flex-wrap: wrap;
}


/* ###### お問い合わせ確認ページ ###### */

.button-submit-outer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  gap: 80px;
  margin-top: 60px;
}

.button-submit-outer .button-red {
  margin-top: 0px;
}

.button-submit-outer .button-cta {
  margin-top: 0px;
}

.confirmtable th {
  height: 75px;
  min-height: 75px;
}

.confirmtable td:not(:last-child) {
  min-height: 75px;
}

/* ###### お問い合わせ完了ページ ###### */
/* ###### 個人情報保護ページ ###### */

/* ###### お知らせ一覧ページ ###### */

.category-small {
  font-size: 16px;
  font-weight: 500;
  padding: 8px 25px;
  color: #ffffff;
  background-color: #0058a2;
  display: inline-block;
  text-align: center;
  min-width: 150px;
}


.newslist-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 40px 0;
  border-top: #0058a2 2px solid;
}

.newslist-wrapper:last-child {
  border-bottom: #0058a2 2px solid;
}

.newslist-time {
  margin-top: 5px;
  min-width: 140px;
}

.newslist-category {
  min-width: 150px;
}

.newslist-text {
  padding-left: 60px;
  flex: 1;
}

/* ###### お知らせ詳細ページ ###### */

/* ###### 運営会社ページ ###### */
.jobs-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.jobs-link {
  width: 50%;
  transition: all .4s;
}

@media (any-hover: hover) {
  .jobs-link:hover {
    opacity: 0.5;
  }
}

.table-com {
  border-top: #0058a2 1px solid;
  border-bottom: #0058a2 1px solid;
}

.table-com th {
  color: #0058a2;
  padding: 16px 0px 16px 0px;
  font-weight: 500;
  text-align: left;
  width: 235px;
  font-size: 16px;
  border-top: #0058a2 1px solid;
  border-bottom: #0058a2 1px solid;
  line-height: 2;
}

.table-com.history th {
  width: 275px;
}

.table-com td {
  padding: 20px 15px 18px 25px;
  width: 100%;
  text-align: left;
  color: #01101c;
  font-size: 16px;
  font-weight: 400;
  border-top: #0058a2 1px solid;
  border-bottom: #0058a2 1px solid;
  line-height: 1.5;
}

.table-com td li {
  font-size: 16px;
  list-style: initial !important;
  line-height: 1.5;
}

.table-com td ul {
  padding-left: 1.5em;
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5em;
}

/* ###### WEBクローリングページ ###### */

.crawling .reason-title {
  margin-bottom: 0px;
}

.service-reason.crawling>li h2 {
  width: 100%;
}

.ability-ul li:not(:first-child) {
  margin-top: 20px;
}

.service-voice li {
  display: flex;
  box-shadow: 0 2px 5px 0 rgba(1, 34, 62, .4);
  min-height: 100px;
}

.service-voice li:not(:first-child) {
  margin-top: 20px;
}

.voice-image {
  padding: 3px 0;
  max-width: 220px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #a5cff3;
}

.voice-text {
  padding: 25px 30px;
  flex: 1;
  background-color: #ffffff;
}

/* ###### トップページ ###### */


/* ################################################## 479px以下 ################################################## */

@media (max-width: 479px) {

  /* ###### 共通データ ###### */

  html {
    font-size: 14px;
  }

  .sfinline {
    display: inline !important;
  }

  .sf {
    display: block !important;
  }

  .tb {
    display: none !important;
  }

  .tbsfinline {
    display: inline !important;
  }

  .tbsf {
    display: block !important;
  }

  .pcinline {
    display: none !important;
  }

  .pctbinline {
    display: none !important;
  }

  .pctbflex {
    display: none !important;
  }

  .pctb {
    display: none !important;
  }

  .pc {
    display: none !important;
  }

  .pc1 {
    display: none !important;
  }

  .pc2 {
    display: none !important;
  }

  .pc2inline {
    display: none !important;
  }

  .pc1tbsfinline {
    display: inline !important;
  }

  .pc1tbsf {
    display: block !important;
  }

  .contents {
    padding: 35px 10px;
  }

  .contents-top {
    padding: 70px 10px 35px;
  }

  .contents-top.adjust {
    padding: 70px 10px 35px;
  }

  .contents-bottom {
    padding: 35px 10px 70px;
  }

  .contents-block {
    padding: 70px 10px;
  }

  .contents-cta {
    padding: 0px 10px;
  }

  .contents-fv {
    padding: 0px;
  }

  .margin-top15sf {
    margin-top: 15px;
  }

  .margin-top70sf {
    margin-top: 70px;
  }

  label,
  td,
  th,
  p,
  dd,
  dt,
  li,
  a,
  input,
  textarea,
  select,
  div {
    line-height: 1.5;
    font-size: 14px;
  }

  .text12 {
    font-size: 11px;
  }

  .text13 {
    font-size: 11px;
  }

  .text14 {
    font-size: 12px;
  }

  .text15 {
    font-size: 13px;
  }

  .text16 {
    font-size: 14px;
  }

  .text17 {
    font-size: 15px;
  }

  .text18 {
    font-size: 16px;
  }

  .text19 {
    font-size: 16px;
  }

  .text21 {
    font-size: 17px;
  }

  .text22 {
    font-size: 18px;
  }

  .text24 {
    font-size: 19px !important;
  }

  .text25 {
    font-size: 20px;
  }

  .text26 {
    font-size: 21px;
  }

  .text30 {
    font-size: 22px;
  }

  .text38 {
    font-size: 24px;
  }

  .h1-top {
    font-size: 24px;
    line-height: 1.25;
    text-align: initial;
  }

  .accent-bar {
    height: 3px;
    width: 45px;
    margin-bottom: 15px;
  }

  .h1-common {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .subtitle {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .h2-common {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .h2-step {
    font-size: 18px;
    margin-bottom: 15px;
    padding: 1px 15px 3px;
    margin-bottom: 10px;
  }

  .h3-common {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .margin-top20 {
    margin-top: 10px;
  }

  .margin-top30 {
    margin-top: 15px;
  }

  .margin-top45 {
    margin-top: 25px;
  }

  .margin-top60 {
    margin-top: 30px;
  }

  .margin-top90 {
    margin-top: 50px;
  }

  .margin-top-contact {
    margin-top: 90px;
  }

  .margin-top130 {
    margin-top: 50px;
  }

  .margin-top190 {
    margin-top: 70px;
  }

  .margin-bottom60 {
    margin-bottom: 30px;
  }

  .margin-bottom0 {
    margin-bottom: 0px;
  }

  .margin-bottom35 {
    margin-bottom: 25px;
  }

  .margin-bottom70 {
    margin-bottom: 40px;
  }

  .blogtext img {
    margin-top: 15px;
    margin-bottom: 20px;
  }

  /* ########### ヘッダー ########### */

  #header {
    top: 0px;
    position: fixed;
  }

  .openbtn {
    display: block;
    z-index: 2002;
  }

  .header__logo {
    padding-top: 7px;
    padding-left: 10px;
    height: 50px;
    width: 100%;
    z-index: 2001;
    background-color: #ffffff;
  }

  .header__logo.scroll {
    box-shadow: 0 4px 8px 0 rgba(1, 34, 62, .25);
  }

  .header__logo img {
    width: 123px;
  }


  .header__nav {
    width: 100%;
    top: 50px;
    right: 0px;
    position: absolute;
    display: none;
    overflow: scroll;
    height: calc(100vh - 50px);
    background-color: #ffffff;
  }

  .header__nav-link {
    display: block;
    text-align: left;
    border-bottom: 1px solid #0058a2 !important;
  }

  .header__nav-link a {
    color: #01101c;
    padding: 22.5px 10px;
    line-height: 1;
    font-size: 16px;
    font-weight: 500;
    display: block;
    position: relative;
  }

  .header__nav-link a::after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 18px;
    border: 1px solid #0058a2;
  }

  .header__nav-link a::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 26px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #005baa;
    border-bottom: 1px solid #005baa;
    transform: rotate(-45deg);
  }

  /* ###### ヘッダー2 ###### */
  #header-tbsf {
    margin-top: 50px;
    box-shadow: 0 4px 8px 0 rgba(1, 34, 62, .25);
    background-color: #ffffff;
  }

  .header__nav2 {
    display: flex;
    height: 50px;
  }

  .header__nav2 li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    font-size: clamp(10px, calc(100vw / 350 * 11), 11px);
    background-color: #ffffff;
  }

  .header__nav2 li {
    width: 25%;
  }

  .header__nav2 li.current a {
    background-color: #de2831;
    color: #ffffff;
  }

  .header__nav2 li .nav-link2-icon2 {
    display: none;
  }

  .header__nav2 li.current .nav-link2-icon2 {
    display: block;
  }

  .header__nav2 li .nav-link2-icon {
    display: block;
  }

  .header__nav2 li.current .nav-link2-icon {
    display: none;
  }

  /* ###### フッター ####### */

  .footer__copy {
    border-top: 2px solid #0058a2;
    font-size: 14px;
  }

  .contents-footer {
    padding: 30px 0px 20px 10px;
  }

  .contents-footer2 {
    padding: 20px 10px 70px;
  }

  .contents-footer-cta {
    padding: 0px 10px 0px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2002;
  }

  .contents-footer-cta .button-cta a {
    width: 100%;
    max-width: 362px;
    letter-spacing: -0.2px;
  }

  .footer__logo img {
    width: 123px;
  }

  .footer__nav ul li a {
    font-size: 14px;
  }

  .footer__nav ul {
    margin-top: 10px;
  }

  .footer__nav ul li {
    margin-top: 6px;
    margin-right: 20px;
  }

  /* ###### 下層ページTOP ###### */

  #underlayer-back {
    margin-top: 0px;
    height: 105px;
  }

  .top-inner {
    height: 105px;
    display: block;
  }

  .top-text {
    margin-top: 35px;
    height: 125px;
    border-radius: 0 12px 12px 0;
    padding: 15px 10px;
    width: 85%;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4);
  }

  .top-image {
    width: 95px;
    margin-left: auto;
  }

  /* ###### サービス概要 ###### */
  .service-overview-cards2 li {
    width: 100%;
    padding-inline: 60px;
    text-align: center;
    margin-bottom: 30px;
  }

  .service-overview-cards6 li {
    width: 47.5%;
    text-align: center;
    margin-bottom: 5%;
  }

  .service-overview-cards6 li img {
    box-shadow: 0 3px 6px rgba(1, 34, 62, 0.43);
  }

  /* ###### サービス内容 ###### */
  .capsule-date {
    height: 28px;
    padding: 4px 15px 4px;
    font-size: 14px;
  }

  .service-content-cards1 {
    padding: 15px 10px;
    margin-bottom: 35px;
    box-shadow: 0 0 10px rgba(1, 34, 62, 0.19);

  }

  .service-content-cards25 {
    gap: 4%
  }

  .service-content-cards25 li {
    width: 48%;
    padding: 10px;
  }

  .service-content-cards25 li figcaption {
    margin-top: 10px;
  }

  .service-content-cards25 li:nth-child(n + 3) {
    margin-top: 3%;
  }

  /* ###### サービス活用法 ###### */
  .service-method-cards {
    display: block;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(1, 34, 62, 0.43);
    margin-bottom: 25px;
    padding: 15px 0px 0;
  }

  .method-cards-photo {
    width: 180px;
    margin: auto;
    margin-bottom: 15px;
  }

  .method-cards-text {
    flex: 1;
    padding: 0px 10px 15px;
    position: relative;
  }

  .service-method-link {
    font-size: 14px;
    position: relative;
    margin-top: 15px;
    bottom: 0;
    right: 0
  }

  .service-method-link::after {
    content: "";
    margin-bottom: 0.5px;
    margin-left: 9px;
    height: 9px;
  }

  .service-method-link.other__link {
    margin-top: 25px;
    margin-bottom: 25px;
  }

  .service-method-link.other__link.margin-bottom0 {
    margin-bottom: 0px;
  }

  /* ###### サービスの流れ ###### */
  .service-flow li:nth-child(n + 2) {
    margin-top: 25px;
  }

  /* ###### 本サービスが選ばれる理由 ###### */

  .service-reason>li {
    border-radius: 10px;
    padding: 15px 15px;
  }

  .service-reason>li:nth-child(n + 2) {
    margin-top: 15px;
  }

  /* ###### CTA ###### */
  .cta-inner {
    padding-block: 25px;
  }

  .cta-text {
    width: 100%;
  }

  .cta-illust {
    width: 165px;
    margin: 35px auto 0;
  }

  .button-cta {
    text-align: center;
  }

  .button-cta a {
    padding: 2px 20px 3px;
    min-height: 40px;
    border-radius: 25px;
    font-size: clamp(14px, calc(100vw / 420 * 18), 18px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  }

  .button-cta a::after {
    width: 8px;
    height: 12px;
    margin-left: 10px;
  }

  .button-cta.row2 a {
    padding: 4px 20px 5px;
    border-radius: 30px;
  }

  span.row2-b {
    font-size: clamp(10px, calc(100vw / 400 * 14), 14px) !important;
  }

  .button-cta button {
    padding: 2px 20px 3px;
    min-height: 40px;
    border-radius: 25px;
    font-size: clamp(14px, calc(100vw / 420 * 18), 18px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  }

  .button-cta button::after {
    width: 8px;
    height: 12px;
    margin-left: 10px;
  }


  .button-cta.confirm:has(input)::after {
    margin-top: 3px;
    right: 27px;
  }

  .button-cta:has(input) {
    padding: 2px 20px 3px;
    min-height: 40px;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  }

  .button-cta:has(input) input {
    font-size: clamp(14px, calc(100vw / 420 * 18), 18px);
    right: 12px;
  }

  .button-cta:has(input)::after {
    right: 14px;
    width: 8px;
    height: 12px;
    margin-left: 10px;
  }

  .button-red {
    text-align: center;
  }

  .button-red a {
    padding: 2px 20px 3px;
    min-height: 40px;
    border-radius: 25px;
    font-size: clamp(14px, calc(100vw / 420 * 18), 18px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  }


  .button-red.arrow-red a::before {
    width: 8px;
    height: 12px;
    margin-right: 10px;
  }


  .button-red:has(input) {
    padding: 2px 57.5px 3px;
    min-height: 40px;
    border-radius: 25px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  }

  .button-red:has(input) input {
    font-size: clamp(14px, calc(100vw / 420 * 18), 18px);
    left: 19px;
  }

  .button-red:has(input)::after {
    margin-top: 3px;
    left: 31px;
    width: 8px;
    height: 12px;
    margin-right: 10px;
  }


  /* ###### 新着導入事例 ###### */

  .category-wrapper {
    margin-top: 5px;
    margin-right: -10px;
  }

  .category {
    font-size: 16px;
    padding: 8px 15px;
    border-radius: 36px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .category-news {
    font-size: 16px;
    padding: 9px 20px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .hashtag {
    font-size: 16px;
    padding: 8px 20px;
    border-radius: 36px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .article__img {
    max-width: 300px;
    margin: auto;
  }

  .posts-new article {
    width: 100%;
    padding: 15px 10px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  }

  .posts-new article:nth-child(n + 2) {
    margin-top: 20px;
  }

  .page-numbers {
    gap: 8px;
  }

  .numbersblock a {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 20px;
    padding-bottom: 1px;
  }

  .numbersblock span {
    width: 30px;
    height: 30px;
    font-size: 20px;
    line-height: 20px;
    padding-bottom: 1px;
  }

  .arrow {
    width: 30px;
    height: 30px;
  }

  .prev::after {
    left: 8px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #0058a2;
    border-right: 2px solid #0058a2;
  }

  .next::after {
    left: 2px;
    width: 12px;
    height: 12px;
    border-top: 2px solid #0058a2;
    border-right: 2px solid #0058a2;
  }

  /* ###### 関連サービス ###### */
  .logo-ews {
    max-width: 275px;
  }

  .logo-flelis {
    max-width: 250px;
  }

  /* ###### 導入事例ページ ###### */
  .search-wrapper {
    padding: 15px 10px;
    border-radius: 10px;
    border: 3px solid #a5cff3;
  }

  .posts-list article:nth-child(n + 2) {
    margin-top: 20px;
  }

  .posts-list article {
    padding: 20px 10px;
    display: block;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  }

  .article__img2 {
    margin-inline: auto;
    margin-bottom: 15px;
  }

  .posts-list .article__right {
    padding-left: 0px;
  }

  /* ###### 導入事例詳細ページ ###### */

  .issues-title {
    padding: 10px 10px;
    border-radius: 10px 10px 0px 0px;
    border: 2px solid #0058a2;
  }

  .issues-text {
    padding: 10px 10px;
    border: 2px solid #0058a2;
    border-top: none;
  }

  /* ###### お問い合わせページ ###### */

  .radio {
    margin-right: 10px;
    margin-bottom: 8px;
  }

  .custom-radio {
    width: 14px;
    height: 14px;
    margin-top: 1px;
  }

  .contacttable .hitusu {
    margin-left: 12px;
    margin-bottom: 3px;
    padding: 1px 8px 1px;
    border-radius: 5px;
    font-size: 14px;
  }

  .contacttable th {
    width: 100%;
    display: block;
    padding-top: 10px;
    font-size: 20px;
  }

  .contacttable td {
    width: 100%;
    display: block;
    padding: 10px 0px 15px;
  }

  ::placeholder {
    font-size: 18px;
  }

  .contacttable td input[type=text],
  .contacttable td input[type=tel],
  .contacttable td input[type=email] {
    font-size: 18px;
    padding: 0px 10px 3px;
    height: 40px;
  }

  .contacttable td select {
    font-size: 18px;
    width: 100%;
    padding: 6px 10px 4px;
    height: 40px;
    max-width: 340px;
    padding-right: 30px;
    background-size: 44px;
  }

  .contacttable td textarea {
    font-size: 18px;
    padding: 3px 10px;
    margin-bottom: 16px;
    height: 220px;
  }

  .contacttable td.tel-group {
    display: flex;
  }

  .post-mark {
    width: 20px;
    margin-right: -5px;
  }

  .hyphen {
    margin: 8px;
  }

  .post-group {
    word-spacing: 5px;
  }

  .post-group input {
    max-width: 140px;
    margin-inline: 10px;
  }

  #addr-btn {
    font-size: 16px;
    max-width: 140px;
    height: 35px;
    padding: 3px 5px 3px;
    border-radius: 18px;
  }


  .cta-wrapper2 {
    padding: 10px;
  }

  .cta-title2 .text30 {
    font-size: clamp(16px, calc(100vw / 420 * 22), 22px);
  }

  .cta-title2 .text16 {
    font-size: clamp(12px, calc(100vw / 420 * 14), 14px);
  }

  .cta-title2 {
    width: 100%;
  }

  .cta-text2 {
    width: 100%;
  }

  /* ###### お問い合わせ確認ページ ###### */

  .button-submit-outer {
    gap: 20px;
    margin-top: 30px;
  }

  .confirmtable th {
    height: 45px;
    min-height: 45px;
  }

  .confirmtable td:not(:last-child) {
    min-height: 45px;
  }

  /* ###### お問い合わせ完了ページ ###### */
  /* ###### 個人情報保護ページ ###### */

  /* ###### お知らせ一覧ページ ###### */

  .newslist-wrapper {
    display: block;
    padding: 20px 0;
  }

  .category-small {
    font-size: 14px;
    padding: 2px 15px;
    min-width: 110px;
  }

  .newslist-category {
    margin-bottom: 10px;
    min-width: 100%;
  }

  .newslist-time {
    margin-top: 0px;
    margin-bottom: 5px;
    min-width: 100%;
  }

  .newslist-text {
    width: 100%;
    padding-left: 0px;
  }

  /* ###### お知らせ詳細ページ ###### */

  /* ###### 運営会社ページ ###### */

  .jobs-link {
    width: 100%;
  }

  .table-com th {
    display: block;
    padding: 8px 8px 0px 0px;
    width: 100%;
    font-size: 14px;
    border-top: none;
    border-bottom: none;
  }

  .table-com td {
    display: block;
    padding: 3px 8px 10px 0px;
    width: 100%;
    font-size: 14px;
    border-top: none;
    border-bottom: #0058a2 1px solid;
  }

  .table-com td li {
    font-size: 14px;
  }

  .table-com tr:first-child td {
    border-top: none;
  }

  .table-com tr:last-child td {
    border-bottom: none;
  }

  /* ###### WEBクローリングページ ###### */

  .ability-ul li:not(:first-child) {
    margin-top: 15px;
  }

  .ability-ul li:not(:first-child) {
    margin-top: 15px;
  }

  .service-voice li {
    box-shadow: 0 1px 3px 0 rgba(1, 34, 62, .4);
    min-height: auto;
  }

  .service-voice li:not(:first-child) {
    margin-top: 15px;
  }

  .voice-image {
    max-width: 100px;
  }

  .voice-image img {
    width: 70px;
  }

  .voice-text {
    padding: 10px 10px;
  }

  /* ###### トップページ ###### */
}

/* ################################################## 480px以上767px以下 ################################################## */

@media (min-width: 480px) and (max-width: 767px) {

  html {
    font-size: 15px;
  }

  .sf {
    display: none !important;
  }

  .sfinline {
    display: none !important;
  }

  .tb {
    display: block !important;
  }

  .tbsfinline {
    display: inline !important;
  }

  .tbsf {
    display: block !important;
  }

  .pcinline {
    display: none !important;
  }

  .pctb {
    display: block !important;
  }

  .pctbinline {
    display: inline !important;
  }

  .pctbflex {
    display: flex !important;
  }

  .pc {
    display: none !important;
  }

  .pc1 {
    display: none !important;
  }

  .pc2 {
    display: none !important;
  }

  .pc2inline {
    display: none !important;
  }

  .contents {
    padding: 60px 25px;
  }

  .contents-top {
    padding: 120px 25px 60px;
  }

  .contents-top.adjust {
    padding: 60px 25px;
  }

  .contents-bottom {
    padding: 60px 25px 120px;
  }

  .contents-block {
    padding: 120px 25px;
  }

  .contents-cta {
    padding: 0px 25px;
  }

  .contents-fv {
    padding: 0px;
  }

  label,
  td,
  th,
  p,
  dd,
  dt,
  li,
  a,
  input,
  textarea,
  select,
  div {
    line-height: 1.5;
    font-size: 15px;
  }

  .text12 {
    font-size: 12px;
  }

  .text13 {
    font-size: 12px;
  }

  .text14 {
    font-size: 13px;
  }

  .text15 {
    font-size: 15px;
  }

  .text16 {
    font-size: 15px;
  }

  .text17 {
    font-size: 16px;
  }

  .text18 {
    font-size: 17px;
  }

  .text19 {
    font-size: 18px;
  }

  .text21 {
    font-size: 19px;
  }

  .text22 {
    font-size: 20px;
  }

  .text24 {
    font-size: 21px !important;
  }

  .text25 {
    font-size: 23px;
  }

  .text26 {
    font-size: 24px;
  }

  .text30 {
    font-size: 26px;
  }

  .text38 {
    font-size: 28px;
  }

  .h1-top {
    font-size: 28px;
    line-height: 1.25;
  }

  .accent-bar {
    height: 6px;
    width: 100px;
    margin-bottom: 25px;
  }

  .h1-common {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .subtitle {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .h2-common {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .h2-step {
    font-size: 20px;
    margin-bottom: 15px;
    padding: 1px 15px 3px;
    margin-bottom: 10px;
  }

  .h3-common {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .margin-top20 {
    margin-top: 15px;
  }

  .margin-top30 {
    margin-top: 20px;
  }

  .margin-top45 {
    margin-top: 35px;
  }

  .margin-top60 {
    margin-top: 45px;
  }

  .margin-top90 {
    margin-top: 70px;
  }

  .margin-top-contact {
    margin-top: 80px;
  }

  .margin-top130 {
    margin-top: 90px;
  }

  .margin-top190 {
    margin-top: 120px;
  }

  .margin-bottom60 {
    margin-bottom: 45px;
  }


  .margin-bottom35 {
    margin-bottom: 25px;
  }

  .margin-bottom70 {
    margin-bottom: 50px;
  }

  /* ###### ヘッダー ###### */

  #header {
    top: 0px;
    position: fixed;
  }

  .openbtn {
    display: block;
    z-index: 2002;
  }

  .header__logo {
    padding-top: 7px;
    padding-left: 10px;
    height: 50px;
    width: 100%;
    z-index: 2001;
    background-color: #ffffff;
  }

  .header__logo.scroll {
    box-shadow: 0 4px 8px 0 rgba(1, 34, 62, .25);
  }

  .header__logo img {
    width: 123px;
  }

  .header__nav {
    width: 100%;
    top: 50px;
    right: 0px;
    position: absolute;
    display: none;
    overflow: scroll;
    background-color: #ffffff;
    height: calc(100vh - 50px);
  }

  .header__nav-link {
    display: block;
    text-align: left;
    border-bottom: 1px solid #0058a2 !important;
  }

  .header__nav-link a {
    color: #01101c;
    padding: 22.5px 10px;
    line-height: 1;
    font-size: 16px;
    font-weight: 500;
    display: block;
    position: relative;
  }

  .header__nav-link a::after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 18px;
    border: 1px solid #0058a2;
  }

  .header__nav-link a::before {
    content: "";
    position: absolute;
    right: 20px;
    top: 26px;
    width: 10px;
    height: 10px;
    border-right: 1px solid #005baa;
    /* 色 */
    border-bottom: 1px solid #005baa;
    transform: rotate(-45deg);
  }

  /* ###### ヘッダー2 ###### */
  #header-tbsf {
    margin-top: 50px;
    box-shadow: 0 4px 8px 0 rgba(1, 34, 62, .25);
    background-color: #ffffff;
  }

  .header__nav2 {
    display: flex;
    height: 50px;
  }

  .header__nav2 li a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    font-size: 11px;
    background-color: #ffffff;
  }

  .header__nav2 li {
    width: 25%;
  }

  .header__nav2 li.current a {
    background-color: #de2831;
    color: #ffffff;
  }

  .header__nav2 li .nav-link2-icon2 {
    display: none;
  }

  .header__nav2 li.current .nav-link2-icon2 {
    display: block;
  }

  .header__nav2 li .nav-link2-icon {
    display: block;
  }

  .header__nav2 li.current .nav-link2-icon {
    display: none;
  }

  /* ###### フッター ####### */

  .footer__copy {
    border-top: 2px solid #0058a2;
    font-size: 14px;
  }

  .contents-footer {
    padding: 30px 0px 20px 10px;
  }

  .contents-footer2 {
    padding: 20px 10px 85px;
  }

  .contents-footer-cta {
    padding: 0px 10px 0px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 15px;
    z-index: 2002;
  }

  .footer {
    position: relative;
  }

  .footer__logo img {
    width: 123px;
  }

  .footer__nav ul li a {
    font-size: 15px;
  }

  .footer__nav ul {
    margin-top: 10px;
  }

  .footer__nav ul li {
    margin-top: 6px;
    margin-right: 20px;
  }

  /* ###### 下層ページTOP ###### */
  #underlayer-back {
    margin-top: 0px;
    height: 220px;
  }

  .top-inner {
    height: 220px;
    overflow: hidden;
  }

  .top-image {
    width: 200px;
  }

  .top-text {
    height: 150px;
    border-radius: 0 30px 30px 0;
    padding: 0 10px 0 10px;
    width: 85%;
  }

  /* ###### サービスメニュー ###### */

  .service__nav-wrapper {
    margin-inline: 10px;
    border-radius: 13px;
  }

  .service__nav li {
    flex: 0 0 33.33%;
    width: auto;
  }

  .service__nav li a {
    margin-left: -22px;
  }

  .service__nav li a::after {
    top: 12px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #01101c;
    border-bottom: 2px solid #01101c;
  }



  /* ###### サービス概要 ###### */


  .service-overview-cards6 li {
    width: 47.5%;
    text-align: center;
    margin-bottom: 5%;
  }

  /* ###### サービス内容 ###### */
  .capsule-date {
    height: 30px;
    padding: 2px 15px 4px;
    font-size: 16px;
  }

  .service-content-cards1 {
    padding: 15px 10px;
    margin-bottom: 45px;
  }

  .service-content-cards25 {
    gap: 2%
  }

  .service-content-cards25 li {
    width: 32%;
    padding: 10px;
  }

  .service-content-cards25 li figcaption {
    margin-top: 10px;
  }

  .service-content-cards25 li:nth-child(n + 4) {
    margin-top: 3%;
  }

  /* ###### サービス活用法 ###### */
  .service-method-cards {
    display: block;
    flex-wrap: wrap;
    box-shadow: 0 2px 5px rgba(1, 34, 62, 0.43);
    margin-bottom: 30px;
    padding: 20px 0px 0;
  }

  .method-cards-photo {
    width: 220px;
    margin: auto;
    margin-bottom: 20px;
  }

  .method-cards-text {
    flex: 1;
    padding: 0px 20px 20px;
    position: relative;
  }

  .service-method-link {
    font-size: 15px;
    position: relative;
    margin-top: 20px;
    bottom: 0;
    right: 0
  }

  .service-method-link.other__link {
    margin-top: 35px;
    margin-bottom: 35px;
  }

  .service-method-link.other__link.margin-bottom0 {
    margin-bottom: 0px;
  }

  /* ###### サービスの流れ ###### */
  .service-flow li:nth-child(n + 2) {
    margin-top: 35px;
  }

  /* ###### 本サービスが選ばれる理由 ###### */
  .service-reason>li {
    border-radius: 15px;
    padding: 20px 20px;
  }

  .service-reason>li:nth-child(n + 2) {
    margin-top: 20px;
  }

  /* ###### CTA ###### */
  .cta-inner {
    padding-block: 35px;
  }

  .cta-text {
    width: 100%;
  }

  .cta-illust {
    width: 200px;
    margin: 45px auto 0;
  }

  .button-cta {
    text-align: center;
  }

  .button-cta a {
    padding: 4px 25px 6px;
    min-height: 50px;
    border-radius: 25px;
    font-size: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  }

  span.row2-b {
    font-size: clamp(10px, calc(100vw / 600 * 15), 15px) !important;
  }

  .button-cta a::after {
    width: 10px;
    height: 15px;
    margin-left: 15px;
  }

  .button-cta button {
    padding: 4px 25px 6px;
    min-height: 50px;
    border-radius: 25px;
    font-size: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  }

  .button-cta button::after {
    width: 10px;
    height: 15px;
    margin-left: 15px;
  }

  .button-cta:has(input) {
    padding: 4px 35px 6px;
    min-height: 50px;
    border-radius: 25px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  }

  .button-cta:has(input) input {
    font-size: 20px;
    right: 15px;
  }

  .button-cta:has(input)::after {
    right: 18px;
    width: 10px;
    height: 15px;
    margin-left: 15px;
  }

  .button-cta:has(input)::before {
    left: 23px;
  }


  @media (any-hover: hover) {
    .button-cta:has(input):hover::before {
      width: calc(100% - 62px);
    }
  }

  .button-cta.confirm:has(input)::after {
    right: 35px;
  }

  .button-cta.confirm:has(input)::before {
    left: 43px;
  }

  @media (any-hover: hover) {
    .button-cta.confirm:has(input):hover::before {
      width: calc(100% - 100px);
    }
  }

  .button-red a {
    padding: 4px 25px 6px;
    min-height: 50px;
    border-radius: 25px;
    font-size: 20px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  }


  .button-red.arrow-red a::before {
    width: 10px;
    height: 15px;
    margin-right: 15px;
  }


  .button-red:has(input) {
    padding: 4px 70px 6px;
    min-height: 50px;
    border-radius: 25px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
  }

  .button-red:has(input) input {
    font-size: 20px;
    left: 20px;
  }

  .button-red:has(input)::after {
    left: 35px;
    width: 10px;
    height: 15px;
    margin-right: 15px;
  }

  .button-red:has(input)::before {
    left: 58px;
  }

  @media (any-hover: hover) {
    .button-red:has(input):hover::before {
      width: calc(100% - 100px);
    }
  }

  /* ###### 新着導入事例 ###### */

  .category-wrapper {
    margin-top: 5px;
    margin-right: -10px;
  }

  .category-news {
    font-size: 18px;
    padding: 10px 30px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .category {
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 36px;
    margin-right: 10px;
    margin-top: 10px;
  }

  .hashtag {
    font-size: 18px;
    padding: 10px 20px;
    border-radius: 36px;
    margin-right: 10px;
    margin-top: 10px;
  }


  .article__img {
    max-width: 300px;
    margin: auto;
  }

  .posts-new article {
    width: 100%;
    padding: 15px 10px;
  }

  .posts-new article:nth-child(n + 2) {
    margin-top: 25px;
  }




  .page-numbers {
    gap: 10px;
  }

  .numbersblock a {
    width: 32px;
    height: 32px;
    padding-bottom: 2px;
    font-size: 25px;
    line-height: 25px;
  }

  .numbersblock span {
    width: 32px;
    height: 32px;
    padding-bottom: 2px;
    font-size: 25x;
    line-height: 25px;
  }

  .arrow {
    width: 32px;
    height: 32px;
  }

  .prev::after {
    left: 10px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #0058a2;
    border-right: 2px solid #0058a2;
  }

  .next::after {
    left: 2px;
    width: 15px;
    height: 15px;
    border-top: 2px solid #0058a2;
    border-right: 2px solid #0058a2;
  }

  /* ###### 関連サービス ###### */
  .logo-ews {
    max-width: 325px;
  }

  .logo-flelis {
    max-width: 300px;
  }

  /* ###### 導入事例ページ ###### */
  .search-wrapper {
    padding: 30px 20px;
    border-radius: 15px;
    border: 4px solid #a5cff3;
  }

  .posts-list article:nth-child(n + 2) {
    margin-top: 45px;
  }

  .posts-list article {
    padding: 30px 20px;
    display: block;
  }

  .article__img2 {
    margin-inline: auto;
    margin-bottom: 20px;
  }

  .posts-list .article__right {
    padding-left: 0px;
  }

  /* ###### 導入事例詳細ページ ###### */

  .issues-title {
    padding: 12px 20px;
    border-radius: 15px 15px 0px 0px;
    border: 3px solid #0058a2;
  }

  .issues-text {
    padding: 20px 20px;
    border: 3px solid #0058a2;
    border-top: none;
  }

  /* ###### お問い合わせページ ###### */

  .custom-radio {
    width: 15px;
    height: 15px;
    margin-top: 2px;
  }

  .radio {
    margin-right: 15px;
    margin-bottom: 10px;
  }

  .contacttable .hitusu {
    margin-left: 15px;
    margin-bottom: 5px;
    padding: 1px 8px 1px;
    border-radius: 5px;
    font-size: 15px;
  }

  .contacttable th {
    width: 100%;
    display: block;
    padding-top: 15px;
    font-size: 22px;
  }

  .contacttable td {
    width: 100%;
    display: block;
    padding: 10px 0px 20px;
  }

  ::placeholder {
    font-size: 21px;
  }

  .contacttable td input[type=text],
  .contacttable td input[type=tel],
  .contacttable td input[type=email] {
    font-size: 21px;
    padding: 3px 15px 4px;
    height: 45px;
  }

  .contacttable td select {
    font-size: 21px;
    width: 100%;
    padding: 6px 15px 4px;
    padding-right: 30px;
    height: 45px;
    max-width: 340px;
    background-size: 44px;
  }

  .contacttable td textarea {
    font-size: 21px;
    padding: 6px 15px;
    margin-bottom: 16px;
    height: 220px;
  }

  .contacttable td.tel-group {
    display: flex;
  }

  .hyphen {
    margin: 9px;
  }

  .post-group {
    word-spacing: 15px;
  }

  .post-group input {
    max-width: 300px;
    margin-inline: 15px;
  }

  #addr-btn {
    font-size: 21px;
    max-width: 240px;
    height: 45px;
    padding: 3px 10px 3px;
    border-radius: 22px;
  }

  .cta-wrapper2 {
    padding: 15px;
  }

  .cta-title2 {
    width: 100%;
  }

  .cta-text2 {
    width: 100%;
  }

  /* ###### お問い合わせ確認ページ ###### */

  .button-submit-outer {
    gap: 40px;
    margin-top: 45px;
  }

  .confirmtable th {
    height: 55px;
    min-height: 55px;
  }

  .confirmtable td:not(:last-child) {
    min-height: 55px;
  }

  /* ###### お問い合わせ完了ページ ###### */
  /* ###### 個人情報保護ページ ###### */

  /* ###### お知らせ一覧ページ ###### */

  .newslist-wrapper {
    display: block;
    padding: 20px 0;
  }

  .category-small {
    font-size: 15px;
    padding: 4px 25px;
    min-width: 110px;
  }

  .newslist-category {
    margin-bottom: 10px;
    min-width: 100%;
  }

  .newslist-time {
    margin-top: 0px;
    margin-bottom: 5px;
    min-width: 100%;
  }

  .newslist-text {
    width: 100%;
    padding-left: 0px;
  }

  /* ###### お知らせ詳細ページ ###### */


  /* ###### 運営会社ページ ###### */

  .jobs-link {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .table-com th {
    display: block;
    padding: 8px 8px 0px 0px;
    width: 100%;
    font-size: 15px;
    border-top: none;
    border-bottom: none;
  }

  .table-com td {
    display: block;
    padding: 3px 8px 10px 0px;
    width: 100%;
    font-size: 14px;
    border-top: none;
    border-bottom: #0058a2 1px solid;
  }

  .table-com td li {
    font-size: 14px;
  }

  .table-com tr:first-child td {
    border-top: none;
  }

  .table-com tr:last-child td {
    border-bottom: none;
  }

  /* ###### WEBクローリングページ ###### */
  .ability-ul li:not(:first-child) {
    margin-top: 15px;
  }

  .service-voice li {
    box-shadow: 0 2px 5px 0 rgba(1, 34, 62, .4);
    min-height: auto;
  }

  .service-voice li:not(:first-child) {
    margin-top: 15px;
  }

  .voice-image {
    max-width: 135px;
  }

  .voice-image img {
    width: 80px;
  }

  .voice-text {
    padding: 15px 20px;
  }

  /* ###### トップページ ###### */
}

/* ################################################## 768px以上 ################################################## */

@media (min-width: 768px) {

  .sf {
    display: none !important;
  }

  .sfinline {
    display: none !important;
  }

  .tb {
    display: none !important;
  }

  .tbsfinline {
    display: none !important;
  }

  .tbsf {
    display: none !important;
  }

  .pcinline {
    display: inline !important;
  }

  .pctb {
    display: block !important;
  }

  .pctbinline {
    display: inline !important;
  }

  .pctbflex {
    display: flex !important;
  }

  .pc {
    display: block !important;
  }

  .margin-top80pc {
    margin-top: 80px;
  }

  /* ###### ヘッダー ###### */

  #header {
    top: 0px;
    position: absolute;
    box-shadow: 0 4px 8px 0 rgba(1, 34, 62, .25);
  }

  body::before {
    content: "";
    display: block;
    width: 100%;
    height: 50px;
    background-color: #0058a2;
  }

  .header__logo {
    width: 300px;
    margin-left: 30px;
  }

  .header-top {
    height: 80px;
  }

  .header__right {
    flex: 1;
  }

  .header__nav {
    display: flex !important;
  }

  .header__nav-link {
    width: 16.6%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header__nav-link a {
    font-weight: 500;
    font-size: 20px;
    color: #01101c;
  }

  .header__nav-link a {
    padding-block: 8px;
    background-image: linear-gradient(#0058a2, #0058a2);
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 0 3px;
    transition: background-size 0.3s;
  }

  .header__nav-link a:hover {
    background-position: bottom left;
    background-size: 100% 3px;
  }

  .header__nav-link.current a {
    padding-block: 8px;
    background-image: linear-gradient(#de2831, #de2831);
  }

  .header__nav-link.current {
    background-color: #de2831;
  }

  .header__nav-link.current a {
    color: #ffffff;
  }

  .openbtn {
    display: none;
  }

  /*　上に上がる動き　*/

  .floating-pc.UpMove2 {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    animation: UpAnime2 0.5s forwards;
  }

  @keyframes UpAnime2 {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-120px);
    }
  }

  /*　下に下がる動き　*/
  .floating-pc.DownMove2 {
    position: fixed;
    bottom: 0;
    width: 100%;
    animation: DownAnime2 0.5s forwards;
  }

  @keyframes DownAnime2 {
    from {
      opacity: 0;
      transform: translateY(-120px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ###### フッター ###### */

  .footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  .footer__logo {
    flex: 0 0 197px;
  }

  .footer__nav {
    flex: 1;
    max-width: 700px;
  }

  .footer__nav ul li {
    margin-top: 10px;
    margin-left: 32px;
  }


  /* ###### 下層ページTOP ###### */

  .top-text {
    width: calc(750px + 50vw - 50%);
    max-width: calc(750px + 50vw - 50%);
    height: 220px;
    margin-left: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    border-radius: 0 60px 60px 0;
  }

  @media (min-width: 768px) and (max-width: 900px) {

    .top-text {
      width: 100%;
      max-width: 100%;
    }
  }

  /* ###### サービス内容 ###### */
  .service-content-cards25 {
    gap: 2.5%
  }

  .service-content-cards25 li {
    width: 18%;
    padding: 15px;
  }

  .service-content-cards25 li figcaption {
    margin-top: 10px;
  }

  .service-content-cards25 li:nth-child(n + 6) {
    margin-top: 3%;
  }

  /* ###### 導入事例ページ ###### */

  /* ###### 導入事例詳細ページ ###### */

  /* ###### お問い合わせページ ###### */
  /* ###### お問い合わせ確認ページ ###### */

  /* ###### お問い合わせ完了ページ ###### */
  /* ###### 個人情報保護ページ ###### */

  /* ###### お知らせ一覧ページ ###### */


  /* ###### お知らせ詳細ページ ###### */

  /* ###### 運営会社ページ ###### */

  /* ###### WEBクローリングページ ###### */

  /* ###### トップページ ###### */

}

@media (min-width: 768px) and (max-width: 1199px) {


  .contents {
    padding: 95px 50px;
  }

  .contents-top {
    padding: 190px 50px 95px;
  }

  .contents-top.adjust {
    padding: 95px 50px;
  }

  .contents-bottom {
    padding: 95px 50px 190px;
  }

  .contents-block {
    padding: 190px 50px;
  }

  .contents-cta {
    padding: 0px 50px;
  }

  .contents-fv {
    padding: 0px 50px;
  }

  .pc1 {
    display: block !important;
  }

  .pc2 {
    display: none !important;
  }

  .pc2inline {
    display: none !important;
  }

  .pc1tbsfinline {
    display: inline !important;
  }

  .pc1tbsf {
    display: block !important;
  }

  /* ###### ヘッダー ###### */

  .header__logo {
    width: clamp(153px, calc(100vw / 1100 * 187), 187px);
    margin-inline: 10px;
  }

  .header__nav-link a {
    font-size: clamp(14px, calc(100vw / 1100 * 20), 20px);
  }

  /* ###### フッター ###### */

  .contents-footer {
    padding: 30px 0px 30px 10px;
  }

  .contents-footer2 {
    padding: 10px 10px 35px;
  }

  .contents-footer-cta {
    padding: 0px 30px 145px;
  }

  .footer__logo {
    flex: 0 0 clamp(153px, calc(100vw / 1100 * 187), 187px);
  }

  /* ###### サービス活用法 ###### */

  .service-method-cards {
    display: block;
    flex-wrap: wrap;
    box-shadow: 0 2px 5px rgba(1, 34, 62, 0.43);
    margin-bottom: 35px;
    padding: 25px 0px 0;
  }

  .method-cards-photo {
    width: 220px;
    margin: auto;
    margin-bottom: 25px;
  }

  .method-cards-text {
    flex: 1;
    padding: 0px 25px 25px;
    position: relative;
  }

  .service-method-link {
    margin-top: 25px;
    bottom: 0;
    right: 0;
    position: relative;
  }

  /* ###### サービスの流れ ###### */
  .service-flow li {
    width: 48%;
  }

  .service-flow li:nth-child(n + 3) {
    margin-top: 35px;
  }

  /* ###### 本サービスが選ばれる理由 ###### */
  .reason-title {
    margin-bottom: 10px;
  }

  /* ###### CTA ###### */

  .cta-text {
    width: 100%;
  }

  .button-cta {
    text-align: center;
  }

  .cta-illust {
    width: 230px;
    margin: 65px auto 0;
  }

  /* ###### 新着導入事例 ###### */

  .article__text.margin-top30 {
    margin-top: 0px;
  }

  .category-wrapper {
    margin-top: 5px;
  }

  .post__article {
    display: flex;
  }

  .article__img {
    max-width: 300px;
  }

  .article__right {
    padding-left: 30px;
    flex: 1;
  }

  .posts-new article {
    width: 100%;
  }

  .posts-new article:nth-child(n + 2) {
    margin-top: 60px;
  }

  /* ###### 導入事例ページ ###### */
  .search-wrapper {
    padding: 60px 45px;
    border-radius: 15px;
    border: 6px solid #a5cff3;
  }

  .posts-list article:nth-child(n + 2) {
    margin-top: 60px;
  }

  .posts-list article {
    padding: 70px 48px;
    display: block;
  }

  .article__img2 {
    max-width: 400px;
    margin-inline: auto;
    margin-bottom: 30px;
  }

  .posts-list .article__right {
    padding-left: 0px;
  }

  /* ###### 導入事例詳細ページ ###### */

  /* ###### お問い合わせページ ###### */
  .contacttable th {
    padding-top: 27px;
    padding-right: 15px;
    font-size: 22px;
    font-weight: 700;
    width: 320px;
    color: #0058a2;
    position: relative;
  }


  ::placeholder {
    font-size: 21px;
  }

  .contacttable td input[type=text],
  .contacttable td input[type=tel],
  .contacttable td input[type=email] {
    font-size: 21px;
    padding: 3px 10px 4px;
  }

  .contacttable td select {
    font-size: 21px;
    padding: 3px 10px 4px;
  }

  .contacttable td textarea {
    font-size: 21px;
    padding: 3px 10px 4px;
  }

  .contacttable .hitusu {
    margin-left: 15px;
  }

  .contacttable.confirmtable th.text24 {
    font-size: 22px;
    white-space: nowrap;
  }

  .contacttable.confirmtable td.text24 {
    padding-top: 25px;
    font-size: 22px;
  }

  #addr-btn {
    font-size: clamp(14px, calc(100vw / 1100 * 24), 24px);
    padding: 3px 12px 3px;
  }

  .cta-wrapper2 {
    padding: 25px;
  }

  .cta-title2 {
    width: 100%;
  }

  .cta-text2 {
    width: 100%;
  }

  /* ###### お問い合わせ確認ページ ###### */

  /* ###### お問い合わせ完了ページ ###### */
  /* ###### 個人情報保護ページ ###### */

  /* ###### お知らせ一覧ページ ###### */


  .newslist-wrapper {
    padding: 30px 0;
  }

  .category-small {
    min-width: 110px;
  }

  .newslist-time {
    margin-top: 5px;
    min-width: 110px;
  }


  .newslist-text {
    padding-left: 30px;
    flex: 1;
  }

  /* ###### お知らせ詳細ページ ###### */

  /* ###### 運営会社ページ ###### */

  /* ###### WEBクローリングページ ###### */

  /* ###### トップページ ###### */

}

@media (min-width: 1200px) {
  .contents-header {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .contents {
    padding: 95px 50px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .contents-top {
    padding: 190px 50px 95px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .contents-top.adjust {
    padding: 95px 50px;
  }

  .contents-bottom {
    padding: 95px 50px 190px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .contents-block {
    padding: 190px 50px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .contents-cta {
    padding: 0px 50px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .contents-fv {
    padding: 0px 50px;
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
  }

  .pc1 {
    display: none !important;
  }

  .pc2 {
    display: block !important;
  }

  .pc2inline {
    display: inline !important;
  }

  .pc1tbsfinline {
    display: none !important;
  }

  .pc1tbsf {
    display: none !important;
  }

  /* ###### フッター ###### */

  .contents-footer {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 30px 0px 30px 30px;
  }

  .contents-footer2 {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 15px 30px 70px;
  }

  .contents-footer-cta {
    margin-right: auto;
    margin-left: auto;
    max-width: 1200px;
    padding: 0px 30px 160px;
  }

  /* ###### サービスの流れ ###### */
  .service-flow li {
    width: 30%;
  }

  .service-flow li:nth-child(n + 4) {
    margin-top: 35px;
  }

  .service-flow li:nth-child(n + 4) .h2-common {
    margin-bottom: 0px;
    min-height: 125px;
  }

  /* ###### 本サービスが選ばれる理由 ###### */
  .reason-title {
    width: 430px;
    padding-right: 30px;
    margin-bottom: 0px;
  }

  .reason-text {
    flex: 1
  }

  .reason-title-adjust {
    letter-spacing: 1.5px !important;
  }
  /* ###### CTA ###### */

  .cta-text {
    flex: 1;
    max-width: 743px;
    padding-right: 30px;
  }

  .cta-illust {
    width: 259px;
  }

  /* ###### 新着導入事例 ###### */

  #new-works .article__img img {
    object-position: center center;
    object-fit: cover;
    font-family: "object-fit: cover";
    height: 225px
  }

  #service-works .article__img img {
    object-position: center center;
    object-fit: cover;
    font-family: "object-fit: cover";
    height: 225px
  }

  #category-list .article__img img {
    object-position: center center;
    object-fit: cover;
    font-family: "object-fit: cover";
    height: 225px
  }


  /* ###### 導入事例ページ ###### */
  /* ###### 導入事例詳細ページ ###### */

  /* ###### お問い合わせページ ###### */
  .cta-title2 {
    padding-top: 7px;
    width: 50%;
  }

  .cta-text2 {
    padding-left: 115px;
    width: 50%;
  }

  /* ###### お問い合わせ確認ページ ###### */

  /* ###### お問い合わせ完了ページ ###### */
  /* ###### 個人情報保護ページ ###### */

  /* ###### お知らせ一覧ページ ###### */
  /* ###### お知らせ詳細ページ ###### */

  /* ###### 運営会社ページ ###### */

  /* ###### WEBクローリングページ ###### */

  #crawling-merit .service-flow li:nth-child(n + 4) .h2-common {
    margin-bottom: 30px;
    min-height: auto;
  }

  /* ###### トップページ ###### */
}

@media (min-width: 768px) and (max-width: 1024px) {}

@media (min-width: 1025px) and (max-width: 1199px) {}

@media (min-width: 1200px) {}

.post__article__top {
  padding: 0 !important;
  display: flex;
}

.post__article__top button {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 30px 23px;
}

.works__article {
  padding: 0 !important;
}

.works__article button {
  padding: 90px 58px !important;
  display: flex;
}

@media (min-width: 768px) and (max-width: 1199px) {
  .post__article__top button {
    display: flex;
  }

  .works__article button {
    padding: 30px 48px !important;
    display: block;
  }
}

@media (max-width: 767px) {
  .works__article button {
    padding: 20px 20px !important;
    display: block;
  }
}

.full-width {
  width: 100% !important;
}