@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Nobile:wght@400;500;700&family=Noto+Sans+JP:wght@100..900&display=swap');

:root {
  --orange-color: #FF9232;
  --lightblue-color: #0091C6;
  --font-nobile: "Nobile", sans-serif;
  --line-style: rgba(0, 145, 198, 0.2);
}

body {
  color: #1C1C1C;
  font-size: 16px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ===============
  util
==================*/
.pc-show {
  display: none;
}

@media screen and (min-width: 768px) {
  .pc-show {
    display: block;
  }
  .sp-show {
    display: none;
  }
}

.fadeIn {
  opacity: 0;
  transform: translateY(5px);
  transition: all 1s ease;
}
.fadeIn.fade-active {
  opacity: 1;
  transform: translateY(0);
}

/* ===============
  header
==================*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 45px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .11);
  z-index: 10000;
}
.header-inner {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  position: relative;
}
.header-logo {
  width: 180px;
}
.header-logo img {
  vertical-align: -4px;
}
.header-nav {
  display: none;
}
.drawer-icon .bars {
  width: 22px;
  height: 12px;
  position: relative;
}
.drawer-icon .bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: #5d5d5d;
  transition: all .4s ease;
}
.drawer-icon .bars span:first-child {
  top: 0;
}
.drawer-icon .bars span:nth-child(2) {
  top: 50%;
}
.drawer-icon .bars span:last-child {
  top: 100%;
}
.drawer-icon.is-active .bars span:first-child {
  top: 50%;
  transform: translateY(-50%) rotate(40deg);
}
.drawer-icon.is-active .bars span:nth-child(2) {
  opacity: 0;
}
.drawer-icon.is-active .bars span:last-child {
  top: 50%;
  transform: translateY(-50%) rotate(-40deg);
}

.drawer {
  position: fixed;
  top: 0;
  right: -101%;
  width: 100%;
  height: 100dvh;
  z-index: 999;
  background: linear-gradient(180deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.9) 60%);
  backdrop-filter: blur(2px);
  transition: all .7s ease;
}
.drawer.is-active {
  right: 0;
}
.drawer-inner {
  padding: 64px 15px 0;
}
.drawer-search {
  margin-bottom: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 10px;
  padding: 0 15px;
}
.drawer-search::before {
  content: url(../img/common/search-icon.svg);
  width: 20px;
  height: 20px;
}
.drawer-search form .input {
  display: flex;
  gap: 5px;
}
.drawer-search input {
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 5px;
  padding: 7px 16px;
  font-size: 16px;
  width: 100%;
  max-width: 280px;
}
.drawer-search-input:focus {
  outline: none;
}
.drawer-list li {
  text-align: center;
}
.drawer-list li + li {
  margin-top: 18px;
}
.drawer-list li a {
  font-weight: 500;
}
.drawer-list li.contact {
  margin-top: 30px;
}
.drawer-list li.contact a {
  background: var(--orange-color) url(../img/common/mail_white.svg) no-repeat center left 30px / 17px auto;
  color: #fff;
  font-weight: bold;
  width: 250px;
  padding: 14px 0;
  text-align: center;
  display: inline-block;
  border-radius: 10px;
  padding-left: 25px;
}


/* ===============
  footer
==================*/

.footer {
  background: #233946;
  color: #fff;
}
.footer-inner {
  padding: 50px 15px 20px;
}
.footer-right {
  display: none;
}
.footer-logo {
  width: 315px;
  margin: 0 auto 30px;
}
.footer-list {
  display: flex;
  padding: 0 32px;
  max-width: 350px;
  margin: 0 auto 45px;
}
.footer-list ul {
  width: 50%;
}
.footer-list ul li a {
  font-size: 14px;
  font-weight: 500;
}
.footer-list ul li + li {
  margin-top: 5px;
}
.copyright {
  font-size: 12px;
  text-align: center;
}

.fixed-contact {
  position: fixed;
  bottom: 20px;
  left: 16px;
  z-index: 99;
}
.fixed-contact a {
  width: 53px;
  height: 53px;
  display: block;
  border-radius: 50%;
  background: var(--orange-color);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.12);
}
.fixed-contact a img {
  width: 21px;
}
.fixed-contact a span {
  display: none;
}

.page-top {
  position: fixed;
  bottom: 20px;
  right: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 99;
  transition: all .4s ease;
}
.page-top a {
  width: 57px;
  height: 43px;
  border-radius: 40px 0 0 40px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.09);
  display: inline-block;
  color: var(--lightblue-color);
  position: relative;
}
.page-top a::before {
  content: "";
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2021%209%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%200L20.4593%209H0.540708L10.5%200Z%22%20fill%3D%22%230091C6%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / contain;
  width: 20px;
  height: 10px;
  position: absolute;
  top: 9px;
  left: 22px;
}
.page-top a span {
  position: absolute;
  bottom: 7px;
  left: 20px;
  font-size: 12px;
  font-weight: 500;
}

/* ===============
  front-page
==================*/
.main {
  padding-top: 45px;
}
.inner {
  padding: 0 15px;
}
.mv {
  height: 400px;
  position: relative;
}
.mv::after {
  content: "";
  position: absolute;
  z-index: 2;
  background: url(../img/front-page/mv-cover_sp.png) no-repeat center center / cover;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.mv-img {
  width: 100%;
  height: 100%;
}
.mv-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}
.mv-text {
  position: absolute;
  top: 0;
  left: 0;
  padding: 14px 20px 0;
  width: 100%;
  z-index: 3;
  color: #fff;
}
.mv-text .main-text {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 8px;
  animation: textFadeIn 2s ease 1 forwards;
  opacity: 0;
  transform: translateY(5px);
}
.mv-text .sub-text {
  font-size: 16px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(5px);
  animation: textFadeIn 2s ease 1 forwards;
  animation-delay: 0.3s;
} 
@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 100%;
    transform: translateY(0);
  }
}

.bg-inner {
  background: #B3D3E3;
  background: linear-gradient(180deg,rgba(179, 211, 227, 0.1) 0%, rgba(61, 88, 169, 0.1) 100%);
  position: relative;
}
.page .bg-inner::before {
  content: "";
  background: url(../img/common/bg-gradation_sp.png) no-repeat center center / cover;
  width: 100%;
  aspect-ratio: 380 / 170;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  z-index: -1;
}

.top-tag-list-wrap {
  margin: 16px 20px 70px;
  padding-bottom: 37px;
  position: relative;
}
.top-tag-list {
  overflow: hidden;
  max-height: 106px;
  transition: max-height .4s ease;
}
.tags-more-btn {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 160px;
  border: 1px solid var(--lightblue-color);
  padding: 4px 5px 5px;
  border-radius: 99px;
  color: var(--lightblue-color);
  font-size: 13px;
}
.tags-more-btn::before {
  content: "";
  width: 13px;
  height: 8px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--lightblue-color);
  transition: all .4s ease;
}
.top-tag-list-wrap.is-active .tags-more-btn::before {
  transform: rotate(180deg);
}
.top-tag-list ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.top-tag-list ul li a {
  display: inline-block;
  border: 1px solid #1c1c1c;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 500;
}
.top-service:last-child {
  padding-bottom: 100px;
}
.top-service + .top-service {
  margin-top: 80px;
}
.top-service .section-ttl {
  font-size: 20px;
  font-weight: 700;
  padding-bottom: 22px;
  margin-bottom: 27px;
  position: relative;
  text-align: center;
}
.top-service .section-ttl::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 70px;
  height: 3px;
  background: var(--lightblue-color);
}
.service-card {
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.service-card + .service-card {
  margin-top: 16px;
}
.service-card a {
  display: block;
  padding: 27px 20px 20px;
}
.service-card .card-ttl {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 17px;
  text-align: center;
}
.service-card .card-ttl span {
  padding-left: 40px;
}
.service-card .card-ttl .rpa-icon {
  background: url(../img/front-page/rpa-icon.svg) no-repeat center left / 30px auto;
}
.service-card .card-ttl .ec-icon {
  background: url(../img/front-page/ec-icon.svg) no-repeat center left / 30px auto;
}
.service-card .card-ttl .web-icon {
  background: url(../img/front-page/web-icon.svg) no-repeat center left / 30px auto;
}
.service-card .card-ttl .system-icon {
  background: url(../img/front-page/system-icon.svg) no-repeat center left / 30px auto;
}
.service-card .card-ttl .line_ai_stamp-card-icon {
  background: url(../img/front-page/line_ai-icon.svg) no-repeat center left 5px / 23px auto;
}
.service-card .card-ttl .light_pack-icon {
  background: url(../img/front-page/light_pack-icon.svg) no-repeat center left 4px / 25px auto;
}
.service-card .card-ttl .assistant-icon {
  background: url(../img/front-page/assistant-icon.svg) no-repeat center left / 27px auto;
}
.service-card .card-ttl .on-site_support-icon {
  background: url(../img/front-page/on-site.svg) no-repeat center left / 27px auto;
}
.service-card .card-ttl img {
  max-width: 160px;
  max-height: 66px;
}
.service-card .card-detail {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 10px;
}
.service-card .card-btn {
  font-size: 14px;
  color: var(--lightblue-color);
  border: 1px solid var(--lightblue-color);
  border-radius: 20px;
  padding: 4px 20px;
  min-width: 160px;
  text-align: center;
  margin: 0 auto;
  width: fit-content;
  white-space: nowrap;
}
.service-card .card-btn.ex-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 6px;
}
.service-card .card-btn.ex-btn::after {
  content: "";
  mask: url(../img/common/ex-link-icon.svg) no-repeat center center / contain;
  width: 15px;
  height: 22px;
  background: #919191;
}

.voice-section {
  background: #00A1DC;
  background: linear-gradient(100deg,rgba(0, 161, 220, 1) 0%, rgba(29, 22, 100, 1) 140%);
  padding: 60px 25px 66px;
}
.section-ttl {
  text-align: center;
  margin-bottom: 60px;
  letter-spacing: 0.05em;
}
.section-ttl .en {
  display: block;
  font-size: 32px;
  font-weight: 500;
  font-family: var(--font-nobile);
}
.section-ttl .ja {
  font-size: 14px;
  font-weight: 700;
}
.voice-section .section-ttl {
  color: #fff;
}
.voice-cards {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
.voice-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 9px rgba(0, 0, 0, .13);
}
.voice-card .img {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.voice-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-card .text {
  padding: 8px 15px 15px;
}
.voice-card .company {
  font-size: 14px;
  margin-bottom: 2px;
}
.voice-card .ttl {
  font-size: 16px;
  margin-bottom: 10px;
  line-height: 1.5;
  font-weight: 500;
}
.voice-card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.voice-card .tag a {
  border: 1px solid var(--lightblue-color);
  color: var(--lightblue-color);
  font-size: 14px;
  border-radius: 99px;
  padding: 2px 10px;
  display: inline-block;
}
.bottom-btn {
  text-align: center;
  margin-top: 45px;
}
.bottom-btn a {
  display: inline-block;
  border: 1px solid var(--lightblue-color);
  color: var(--lightblue-color);
  font-size: 16px;
  padding: 15px 30px;
  width: auto;
  min-width: 270px;
  border-radius: 99px;
} 
.voice-section .bottom-btn a {
  border-color: #fff;
  color: #fff;
}

.column-section {
  padding: 100px 0 78px;
  background: url(../img/common/column-bg-top.png), 
              url(../img/common/column-bg-bottom.png);
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom right;
  background-size: 100% auto, 100% auto;
}
.column-cards {
  display: flex;
  flex-direction: column;
  gap: 24px 0;
}
.column-cards .img {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom: 8px;
  border-radius: 5px;
  overflow: hidden;
}
.column-cards .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column-card .categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.column-card .category a {
  border: 1px solid var(--lightblue-color);
  color: var(--lightblue-color);
  font-size: 13px;
  border-radius: 99px;
  padding: 2px 10px;
  display: inline-block;
}
.column-card .ttl {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.column-card .meta {
  display: flex;
  gap: 0 7px;
  font-size: 14px;
  margin-bottom: 7px;
}

.contact-section {
  background: url(../img/common/contact-bg_sp.jpg) no-repeat center center / cover;
  padding: 30px 15px;
}
.contents-box {
  background: #00A1DC;
  background: linear-gradient(129deg,rgba(0, 161, 220, 0.8) 0%, rgba(29, 22, 100, 0.8) 100%);
  color: #fff;
  padding: 60px 20px 100px;
}
.contact-section .section-ttl .en {
  font-size: 40px;
}
.contact-section .section-ttl .ja {
  font-size: 16px;
}
.contents-box p {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 36px;
  line-height: 1.5;
}
.contact-box-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
}
.contact-box-btn {
  width: 250px;
  margin: 0 auto;

}
.contact-box-btn a {
  width: 100%;
  border: 2px solid #fff;
  border-radius: 5px;
  font-weight: 700;
  font-size: 16px;
  padding: 15px;
  display: inline-block;
  text-align: center;
  letter-spacing: 0.04em;
}
.contact-box-btn.orange-btn a {
  background: var(--orange-color);
  border-color: var(--orange-color);
}

/* page */
.breadcrumbs {
  padding: 6px 15px;
}
.breadcrumbs ul {
  display: flex;
  overflow: hidden;
}
.breadcrumbs ul li {
  color: #4A556D;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.breadcrumbs ul li + li {
  padding-left: 22px;
  position: relative;
}
.breadcrumbs ul li + li::before {
  content: "";
  width: 10px;
  height: 1px;
  background: var(--lightblue-color);
  position: absolute;
  top: 50%;
  left: 6px;
}
.breadcrumbs ul li:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.page-head {
  padding: 38px 0 67px;
}
.page-title {
  margin-bottom: 30px;
  display: flex;
}
.page-title.line::after {
  content: "";
  width: 0;
  height: 2px;
  background: var(--lightblue-color);
  display: inline-block;
  margin-top: 17px;
  animation: lineAnimation 3s ease forwards;
}
@keyframes lineAnimation {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.page-title .text {
  padding-right: 13px;
}
.page-title .en {
  display: block;
  font-size: 38px;
  font-weight: 500;
  font-family: var(--font-nobile);
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.page-title .ja {
  font-size: 14px;
  font-weight: 500;
}
.page-intro {
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: 1.5;
  text-align: justify;
}
.page-intro p + p {
  margin-top: 1em;
}

.page-single-title {
  font-size: 26px;
  font-weight: 700;
  text-align: center;
}
.page-single-title .ec-ttl {
  display: flex;
  flex-direction: column;
}
.page-single-title .ec-ttl .sub-ttl {
  font-size: 16px;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 14px;
}
.page-single-title .ec-ttl .sub-ttl::before {
  content: "";
  width: 25px;
  height: 1px;
  background: var(--lightblue-color);
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
}


.service-contents {
  padding-bottom: 70px;
  line-height: 1.5;
}
.section-block + .section-block {
  margin-top: 40px;
}
.section-block h3 {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--lightblue-color);
  margin-bottom: 12px;
  letter-spacing: 0.02em;
}
.section-block > h4:not(.price-head) {
  padding-left: 22px;
  position: relative;
  color: var(--lightblue-color);
  font-weight: bold;
}
.section-block > h4:not(.price-head)::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 1em;
  height: 1em;
  mask: url(../img/common/check.svg) no-repeat center left / contain;
  background: var(--lightblue-color);
}
.section-block {
  font-size: 15px;
  line-height: 1.7;
}
.section-block > * + * {
  margin-top: 1em;
}
.section-block ul li {
  padding-left: 20px;
  position: relative;
}
.section-block ul li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lightblue-color);
  position: absolute;
  top: 11px;
  left: 5px;
}
.section-block ul li + li {
  margin-top: 0.5em;
}
.section-block p + p {
  margin-top: 1em;
}
.section-block .img-fx {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
.img-block {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.img-block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point-grid {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
.point-block {
  display: flex;
}
.point-num {
  width: 57px;
  height: 57px;
  background: var(--lightblue-color);
  color: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-nobile);
  font-weight: 500;
  line-height: 1;
}
.point-num span:first-child {
  font-size: 12px;
  padding-top: 7px;
}
.point-num span:nth-child(2) {
  font-size: 25px;
}
.point-block .point-text {
  width: calc(100% - 57px);
  padding-left: 12px;
}
.point-text h4 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
}
.point-text p {
  line-height: 1.7;
}

.point-item + .point-item {
  margin-top: 30px;
}
.point-head {
  display: flex;
  align-items: center;
  position: relative;
}
.point-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(57px / 2);
  width: calc(100% - 57px / 2);
  height: 1px;
  background: var(--lightblue-color);
}
.point-head .point-ttl {
  width: calc(100% - 57px);
  padding-left: 12px;
  font-weight: 700;
}
.point-item .point-text :is(p, ul, h5) {
  margin-top: 1em;
}
.point-item .point-text h5 {
  color: var(--lightblue-color);
  font-weight: bold;
  font-size: 1.07em;
}
.point-item .point-text h5 + p {
  margin-top: 0.2em;
}
.section-block strong {
  color: #005D7F;
  font-weight: 700;
}
.point-text .pont-flex .pont-flex-img {
  margin-top: 1em;
}
.pont-flex-img.mobile {
  aspect-ratio: 1;
}
.pont-flex-img.mobile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.price-head {
  border-left: 3px solid var(--lightblue-color);
  padding-left: 13px;
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
}
.price-head a {
  color: #0F6786;
  text-decoration: underline;
}

.page-contact {
  margin-top: 50px;
  background: var(--lightblue-color);
  color: #fff;
  border-radius: 15px;
  padding: 30px 22px;
}
.page-contact .ttl {
  text-align: center;
  font-weight: 500;
  padding-bottom: 7px;
  border-bottom: 3px solid var(--orange-color);
  width: fit-content;
  margin: 0 auto 16px;
}
.page-contact p {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}
.page-contact p + p {
  margin-top: 10px;
}
.page-contact .contact-btn {
  margin: 16px auto 0;
  width: 260px;
}
.page-contact .contact-btn a {
  background: var(--orange-color);
  color: #fff;
  border-radius: 10px;
  padding: 17px 0;
  font-size: 17px;
  font-weight: 700;
  display: flex;
  justify-content: center;
  gap: 0 10px;
  box-shadow: 0 4px 7px rgba(0, 0, 0, 0.12);
}
.page-contact .contact-btn a::before {
  content: url(../img/common/mail_white.svg);
}

.case-section {
  padding: 45px 15px 86px;
  background: #fff;
}
.case-ttl {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding-bottom: 17px;
  margin-bottom: 40px;
  position: relative;
}
.case-ttl::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 2px;
  background: var(--lightblue-color);
}
.case-cards {
  display: flex;
  flex-direction: column;
  gap: 20px 0;
}
.case-card {
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.13);
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
}
.case-card .img {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.case-card .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case-card .text {
  padding: 10px 12px 16px;
  line-height: 1.5;
}
.case-card .ttl {
  font-size: 16px;
  margin-bottom: 8px;
}
.case-card .detail {
  font-size: 12px;
  display: -webkit-box;             
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  margin-bottom: 10px;
}
.case-card .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.case-card .tag {
  background: var(--lightblue-color);
  color: #fff;
  display: inline-block;
  padding: 3px 6px;
  border-radius: 2px;
  font-size: 14px;
}

.ec-menu-section {
  padding-bottom: 47px;
}
.ec-block {
  margin-top: 43px;
  background: #E3EDF7;
  padding: 30px 20px 40px;
}
.ec-menu-ttl {
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}
.ec-block p {
  font-size: 14px;
}
.ec-menu {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px 0;
}
.ec-menu li a {
  background: #00A1DC;
  background: linear-gradient(107deg,rgba(0, 161, 220, 1) 0%, rgba(29, 22, 100, 1) 100%);
  display: block;
  color: #fff;
  font-weight: 500;
  border-radius: 5px;
  text-align: center;
  padding: 14px 10px 14px 0;
  position: relative;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
}
.ec-menu li a::before {
  content: "";
  position: absolute;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%208%2015%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%201L6%207.5L1%2014%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / contain;
  width: 10px;
  height: 15px;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}


/* voice */
.voice-block {
  padding-bottom: 110px;
}
.voice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.voice-item {
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  overflow: hidden;
}
.voice-head {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  color: #fff;
}
.voice-head::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #D9D9D9;
  z-index: 1;
  background: linear-gradient(180deg,rgba(217, 217, 217, 0) 0%, rgba(150, 150, 150, 1) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}
.voice-head::after {
  content: "";
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2010%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%203.5C0.723858%203.5%200.5%203.72386%200.5%204C0.5%204.27614%200.723858%204.5%201%204.5L1%203.5ZM9.35355%204.35355C9.54882%204.15829%209.54882%203.84171%209.35355%203.64645L6.17157%200.464466C5.97631%200.269203%205.65973%200.269203%205.46447%200.464466C5.2692%200.659728%205.2692%200.97631%205.46447%201.17157L8.29289%204L5.46447%206.82843C5.2692%207.02369%205.2692%207.34027%205.46447%207.53553C5.65973%207.7308%205.97631%207.7308%206.17157%207.53553L9.35355%204.35355ZM1%204L1%204.5L9%204.5L9%204L9%203.5L1%203.5L1%204Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / 12px 12px;
  position: absolute;
  bottom: 13px;
  right: 15px;
  z-index: 4;
  border-radius: 50%;
  pointer-events: none;
}
.voice-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.voice-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.voice-head-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  padding: 0 60px 0 10px;
  z-index: 2;
  font-size: 14px;
  width: 100%;
}
.voice-body {
  padding: 10px 10px 10px;
}
.voice-ttl {
  font-weight: 500;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-style);
  margin-bottom: 7px;
}
.voice-detail {
  font-size: 14px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-style);
  margin-bottom: 7px;
  line-height: 1.5;
}
.voice-bottom {
  display: flex;
  gap: 0 10px;
  align-items: center;
}
.voice-bottom span {
  font-size: 14px;
  white-space: nowrap;
}
.voice-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.voice-tags .tag a {
  color: var(--lightblue-color);
  border: 1px solid var(--lightblue-color);
  border-radius: 99px;
  padding: 2px 15px;
  display: inline-block;
}

.pagenation {
  margin-top: 60px;
}
.page-numbers-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
}
.pagenation .page-numbers {
  display: inline-block;
}
.pagenation a.page-numbers:not(.prev, .next) {
  background: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--lightblue-color);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--lightblue-color);
}
.pagenation .page-numbers.current {
  background: var(--lightblue-color);
  color: #fff;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--lightblue-color);
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagenation .page-numbers.prev {
  display: block;
  width: 16px;
  height: 24px;
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
  background: var(--lightblue-color);
  margin-right: 5px;
  font-size: 0;
}
.pagenation .page-numbers.next {
  display: block;
  width: 16px;
  height: 24px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--lightblue-color);
  margin-left: 5px;
  font-size: 0;
}
.pagenation-result {
  margin-top: 26px;
  text-align: center;
  color: var(--lightblue-color);
  font-size: 15px;
}

/* work */
.work-block {
  padding-bottom: 86px;
}
.work-sort {
  margin-bottom: 20px;
}
.work-select-wrap {
  position: relative;
}
.work-select-wrap::after {
  content: "";
  width: 17px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: var(--lightblue-color);
  position: absolute;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
}
.work-select {
  border: 1px solid var(--lightblue-color);
  border-radius: 99px;
  background: #fff;
  color: var(--lightblue-color);
  font-size: 14px;
  padding: 13px 40px 13px 20px;
  width: 100%;
}
.work-select:focus {
  outline: none;
}

.work-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.work-item {
  width: 100%;
  background: #fff;
  box-shadow: 0 3px 9px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  overflow: hidden;
} 
.work-head {
  position: relative;
}
/* .work-head::after {
  content: "";
  width: 30px;
  height: 30px;
  border: 1px solid #fff;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2010%208%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%203.5C0.723858%203.5%200.5%203.72386%200.5%204C0.5%204.27614%200.723858%204.5%201%204.5L1%203.5ZM9.35355%204.35355C9.54882%204.15829%209.54882%203.84171%209.35355%203.64645L6.17157%200.464466C5.97631%200.269203%205.65973%200.269203%205.46447%200.464466C5.2692%200.659728%205.2692%200.97631%205.46447%201.17157L8.29289%204L5.46447%206.82843C5.2692%207.02369%205.2692%207.34027%205.46447%207.53553C5.65973%207.7308%205.97631%207.7308%206.17157%207.53553L9.35355%204.35355ZM1%204L1%204.5L9%204.5L9%204L9%203.5L1%203.5L1%204Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center center / 12px 12px;
  position: absolute;
  bottom: 13px;
  right: 15px;
  z-index: 4;
  border-radius: 50%;
} */
.work-img {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.work-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.work-body {
  padding: 10px 14px 15px;
}
.work-ttl {
  font-size: 17px;
  font-weight: 500;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-style);
}
.work-detail {
  font-size: 13px;
  display: -webkit-box;             
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 5; 
}
.work-item-cate {
  padding: 0 14px 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.work-item-cate a {
  color: #fff;
  background: #4b6286;
  font-size: 14px;
  padding: 5px 16px;
  border-radius: 99px;
  display: inline-block;
}
.work-item-cate a.rpa-icon {
  background: #fc7f52;
}
.work-item-cate a.ec-icon {
  background: #ff6798;
}
.work-item-cate a.web-icon {
  background: var(--lightblue-color);
}
.work-item-cate a.system-icon {
  background: #e857ac;
}
.work-item-cate a.line_ai-icon {
  background: #ffa615;
}
.work-item-cate a.it_dx-icon {
  background: #16a493;
}
.work-item-cate a.shopify-icon {
  background: #79B671;
}
.work-item-cate a.woocommerce-icon {
  background: #9d49d5;
}
.work-item-cate a.woocommerce-icon {
  background: #d0a005;
}
.work-item-cate a.shop_serve-icon {
  background: #d0a005;
}
.work-item-cate a.rakuten_yahoo-icon {
  background: #f63131;
}
.work-item-cate a.web_pack-icon {
  background: #4375ff;
}

/* column */
.column-block {
  padding-bottom: 80px;
}
.column-main {
  margin-bottom: 120px;
}
.column-heading {
  display: flex;
  align-items: center;
  gap: 0 12px;
  margin-bottom: 20px;
}
.column-heading .en {
  font-family: var(--font-nobile);
  font-weight: 500;
  font-size: 30px;
}
.column-heading .ja {
  font-size: 15px;
}

.pickup-area {
  padding: 20px 10px 10px;
  margin-bottom: 60px;
  background: #fff;
  border: 1px solid var(--line-style);
  border-radius: 10px;
}
.pickup-area .column-heading {
  flex-direction: column;
}
.column-list {
  display: flex;
  flex-wrap: wrap;
}
.pickup-area .column-list {
  gap: 30px 0;
}
.column-item {
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-style);
  padding-bottom: 30px;
}
.pickup-area .column-item {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.column-img {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 6px;
}
.column-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.column-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 3px;
}
.column-categories .category a {
  display: inline-block;
  color: var(--lightblue-color);
  border: 1px solid var(--lightblue-color);
  font-size: 13px;
  padding: 2px 13px;
  border-radius: 99px;
}
.column-ttl {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 7px;
}
.column-meta,
.entry-meta {
  display: flex;
  align-items: center;
  gap: 0 18px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 7px;
}
.column-date,
.entry-date {
  padding-left: 20px;
  background: url(../img/common/time.svg) no-repeat center left / 15px 15px;
}
.column-author,
.entry-author {
  padding-left: 20px;
  background: url(../img/common/author.svg) no-repeat center left / 15px 15px;
}
.column-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.column-tag {
  background: #E8E8E8;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 13px;
  font-weight: 500;
}
.column-detail {
  color: #646464;
  font-size: 13px;
  margin-bottom: 8px;
}
.column-detail p {
  display: -webkit-box;             
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  overflow-wrap: anywhere;
}

.sidebar-block {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
}
.sidebar-block + .sidebar-block {
  margin-top: 16px;
}
.side-search {
  display: flex;
  gap: 0 8px;
}
.side-search input[type="text"] {
  font-size: 16px;
  border: 1px solid #A3A3A3;
  border-radius: 3px;
  padding: 2px 7px;
  width: calc(100% - 68px);
}
.side-search input[type="text"]:focus {
  outline: none;
}
.side-search-btn {
  background: var(--lightblue-color);
  color: #fff;
  border-radius: 3px;
  width: 60px;
  text-align: center;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 500;
}
.side-ttl {
  padding-left: 12px;
  position: relative;
  margin-bottom: 12px;
}
.side-ttl::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lightblue-color);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.side-category-list,
.side-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.side-category-list li a {
  color: var(--lightblue-color);
  border: 1px solid var(--lightblue-color);
  border-radius: 99px;
  padding: 4px 14px;
  font-size: 14px;
  display: inline-block;
  font-weight: 500;
}
.side-tag-list li a {
  display: inline-block;
  background: #F0F0F0;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 7px;
  border-radius: 4px;
}

/* entry */
.entry-page .column-block {
  margin-top: 14px;
}
.entry-main {
  background: #fff;
  padding: 32px 15px 80px;
  margin: 0 -15px;
}
.entry-head {
  margin-bottom: 30px;
}
.entry-img img {
  width: 100%;
}
.entry-img {
  margin-bottom: 5px;
}
.entry-ttl {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: 0.04em;
}
.entry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.entry-tags .tag a {
  display: inline-block;
  border: 1px solid var(--lightblue-color);
  border-radius: 99px;
  color: var(--lightblue-color);
  font-size: 13px;
  padding: 3px 12px;
}
.entry-body {
  font-size: 16px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.entry-body > * + * {
  margin-top: 30px;
}
.entry-body a {
  color: var(--lightblue-color);
  text-decoration: underline;
}
.entry-body :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.5;
}
.entry-body :is(h1, h2, h3, h4, h5, h6) + * {
  margin-top: 1em;
}
.entry-body :is(h1, h2, h3, h4, h5, h6) > span {
  margin-top: -50px;
  padding-top: 50px;
}
.entry-body h1 {
  font-size: 1.25em;
  font-weight: bold;
  background: var(--line-style);
  padding: 4px 10px;
}
.entry-body h2 {
  font-size: 1.25em;
  font-weight: bold;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--lightblue-color);
}
.entry-body h3 {
  font-size: 1.188em;
  font-weight: bold;
  border-left: 3px solid var(--lightblue-color);
  padding-left: 14px;
}
.entry-body h4 {
  font-size: 1.125em;
  font-weight: bold;
  padding-left: 18px;
  position: relative;
}
.entry-body h4::before {
  content: "";
  position: absolute;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--lightblue-color);
  width: 10px;
  height: 16px;
  left: 0;
  top: 6px;
}
.entry-body h5 {
  font-size: 1.063em;
  font-weight: bold;
  color: var(--lightblue-color);
}
.entry-body h6 {
  font-weight: bold;
}
.entry-body ul {
  list-style: disc;
  padding-left: 20px;
}
.entry-body ol {
  list-style: decimal;
  padding-left: 20px;
}
.entry-body li + li {
  margin-top: 5px;
}
.entry-body hr {
  color: var(--line-style);
}
.entry-body img {
  margin: 0 auto;
  display: block;
}
.entry-body .wp-caption.aligncenter {
  width: 100%!important;
}
.entry-body .wp-caption-text {
  color: #434343;
  font-size: 12px;
  text-align: center;
  margin-top: 4px;
}
blockquote {
  border: 1px solid var(--lightblue-color);
  border-radius: 10px;
  padding: 20px 17px;
  position: relative;
}
blockquote::before {
  content: url(../img/common/blockquote_top.svg);
  position: absolute;
  width: 28px;
  height: 24px;
  top: -12px;
  left: 10px;
}
blockquote::after {
  content: url(../img/common/blockquote_bottom.svg);
  position: absolute;
  width: 28px;
  height: 24px;
  bottom: -12px;
  right: 10px;
}
blockquote cite {
  color: #696969;
  font-size: 14px;
  font-weight: 500;
}
.ap-border {
  margin: 50px auto 0;
  background: var(--lightblue-color);
  border-radius: 10px;
  padding: 20px 18px;
  color: #fff;
  line-height: 1.6;
  max-width: 570px;
}
.ap-border strong {
  margin-bottom: 10px;
  display: block;
  text-align: center;
}
.ap-border p {
  font-size: 15px;
}
.ap-border p a {
  text-decoration: none;
  background: var(--orange-color);
  color: #fff;
  display: block;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 10px;
  margin: 10px auto 0;
  width: fit-content;
}

#toc_container {
  border: 1px solid var(--lightblue-color);
  border-radius: 10px;
  padding: 20px 15px 20px;
  width: 100%;
}
.toc_title {
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
}
#toc_container .toc_list {
  list-style: none;
  padding-left: 0;
}
#toc_container .toc_list > li {
  position: relative;
  padding-left: 20px;
  border-bottom: 1px solid #D6D6D6;
  padding-bottom: 10px;
}
#toc_container .toc_list li:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}
#toc_container .toc_list li::before {
  content: "";
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: var(--lightblue-color);
  width: 9px;
  height: 12px;
  position: absolute;
  top: 9px;
  left: 2px;
}
#toc_container .toc_list > li + li {
  margin-top: 10px;
}
#toc_container .toc_list li a {
  color: #1C1C1C;
  text-decoration: none;
}
#toc_container > ul ul {
  margin-left: 14px;
}

.entry-foot {
  margin-top: 70px;
}
.entry-foot-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.entry-foot-tags .tag a {
  background: #E8E8E8;
  font-size: 14px;
  font-weight: 500;
  border-radius: 5px;
  padding: 4px 9px;
  display: inline-block;
}

.entry-paging {
  position: relative;
  border-top: 1px solid #DCDCDC;
  display: flex;
  justify-content: center;
  padding-top: 10px;
  color: var(--lightblue-color);
  font-size: 14px;
  font-weight: 500;
}
.entry-paging :is(.prev, .next) {
  position: absolute;
  top: 10px;
}
.entry-paging .prev {
  left: 0;
}
.entry-paging .next {
  right: 0;
}

#related-posts {
  margin-top: 40px;
}
#related-posts h3 {
  font-weight: 600;
  margin-bottom: 20px;
}
#related-posts > ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
#related-posts > ul li img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 5px;
  margin-bottom: 4px;
}
#related-posts > ul li p {
  font-size: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#related-posts > ul li:nth-child(n + 5) {
  display: none;
}

.column-sidebar {
  margin-top: 30px;
}
.sidebar-recommend {
  margin-top: 0!important;
  margin: 30px -15px;
  border-radius: 0;
}
.sidebar-recommend .side-head {
  text-align: center;
  font-weight: 500;
  margin-bottom: 14px;
}
.side-article-list li + li {
  margin-top: 12px;
}
.side-article-list li a {
  display: flex;
  gap: 0 10px;
}
.side-art-img {
  width: 118px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.side-art-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.side-art-text {
  flex: 1;
  font-weight: 500;
  width: calc(100% - 118px - 10px);
}
.side-art-text .date {
  font-size: 12px;
  display: block;
}
.side-art-text .ttl {
  font-size: 14px;
  display: -webkit-box;             
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
}

/* search */
.search-head {
  background: #fff;
  border-radius: 10px;
  margin-bottom: 52px;
  padding: 15px;
}
.search-label {
  margin-bottom: 6px;
}
.serch-input input {
  border-radius: 5px;
  border: 1px solid #C5C5C5;
  font-size: 16px;
  padding: 8px 12px;
  width: 100%;
}
.serch-input input:focus {
  outline: none;
}
.result-block {
  padding-bottom: 100px;
}
.result-head {
  position: relative;
  padding: 15px 18px;
  border-radius: 10px;
  background-color: #2589d0;
  color: #fff;
  margin-bottom: 35px;
  font-weight: 600;
  font-size: 17px;
}
.result-head::after {
  content: '';
  position: absolute;
  top: 98%;
  left: 30px;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  border-top: 12px solid #2589d0;
}
.result-head span {
  padding-left: 1em;
}
.result-item {
  padding-bottom: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--line-style);
}
.result-img {
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 5px;
}
.result-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.result-item.single-item .column-ttl {
  padding: 5px 0 0;
}

/* faq */
.faq-contents {
  padding-bottom: 86px;
}
.faq-block + .faq-block {
  margin-top: 60px;
}
.faq-ttl {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin-bottom: 32px;
}
.faq-item {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  position: relative;
}

.faq-item + .faq-item {
  margin-top: 12px;
}
.faq-item dt {
  padding: 0 20px 0 25px;
  position: relative;
}
.faq-item dt::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  transform: translateY(-50%);
  width: 16px;
  height: 3px;
  background: var(--lightblue-color);
}
.faq-item dt::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -3px;
  transform: translateY(-50%) rotate(90deg);
  width: 16px;
  height: 3px;
  background: var(--lightblue-color);
  transition: all .4s ease;
}
.faq-item.is-open dt::after {
  transform: translateY(-50%) rotate(0);
}
.faq-item dt span {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
  font-family: var(--font-nobile);
  color: var(--lightblue-color);
  font-weight: bold;
}
.faq-item dd {
  display: none;
  position: relative;
  padding: 12px 20px 0 25px;
  font-size: 16px;
}
.faq-item dd > span {
  position: absolute;
  top: 13px;
  left: 0;
  font-size: 20px;
  font-family: var(--font-nobile);
  color: #F35154;
  font-weight: bold;
}
.faq-item dd > p + p {
  margin-top: 12px;
}
.faq-item dd > p.small {
  font-size: 14px;
}
.faq-item dd ul {
  list-style: disc;
  padding-left: 20px;
  margin-top: 5px;
}
.faq-item dd a {
  color: var(--lightblue-color);
  text-decoration: underline;
}

/* company */
.company-contents {
  padding-bottom: 110px;
}
.company-block {
  display: flex;
  flex-direction: column;
  gap: 10px 0;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #DCDCDC;
  line-height: 1.75;
}
.company-block a.link {
  display: inline-block;
  color: var(--lightblue-color);
  text-decoration: underline;
}
.company-block a.link::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url('data:image/svg+xml;charset=utf8,%3Csvg%20viewBox%3D%220%200%2019%2019%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M3.95833%2016.625C3.52292%2016.625%203.15017%2016.47%202.8401%2016.1599C2.53003%2015.8498%202.375%2015.4771%202.375%2015.0417V3.95833C2.375%203.52292%202.53003%203.15017%202.8401%202.8401C3.15017%202.53003%203.52292%202.375%203.95833%202.375H9.5V3.95833H3.95833V15.0417H15.0417V9.5H16.625V15.0417C16.625%2015.4771%2016.47%2015.8498%2016.1599%2016.1599C15.8498%2016.47%2015.4771%2016.625%2015.0417%2016.625H3.95833ZM7.67917%2012.4292L6.57083%2011.3208L13.9333%203.95833H11.0833V2.375H16.625V7.91667H15.0417V5.06667L7.67917%2012.4292Z%22%20fill%3D%22%230091C6%22%2F%3E%3C%2Fsvg%3E')
              no-repeat center right / 18px auto;
vertical-align: middle;
}
.company-block iframe {
  width: 100%;
  aspect-ratio: 345 / 190;
  margin-top: 12px;
}
.company-block .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
}
.company-block ul {
  list-style: disc;
  padding-left: 22px;
}

.message-contents {
  position: relative;
  z-index: 2;
  margin-bottom: 100px;
}
.message-contents::before {
  content: "";
  width: 100%;
  max-width: 320px;
  height: 300px;
  position: absolute;
  top: 100px;
  right: calc(50% - 110px);
  background: linear-gradient(100deg, #59BFFF 0%, #1260AF 100%);
  z-index: -1;
}
.message-contents::after {
  content: "";
  width: 100%;
  height: calc(100% - 160px);
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -2;

}
.message-flex {
  display: flex;
  flex-direction: column;
}
.me-text {
  display: contents;
}
.company-ttl.me-ttl {
  order: 1;
}
.me-img {
  order: 2;
}
.me-detail {
  order: 3;
}
.company-ttl {
  color: var(--lightblue-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}
.company-ttl .en {
  font-size: 28px;
  font-weight: 500;
  font-family: var(--font-nobile);
  margin-bottom: 2px;
}
.company-ttl .ja {
  font-weight: 700;
  font-size: 14px;
}
.me-img {
  max-width: 300px;
  width: 100%;
  margin: 0 auto 38px;
  padding-top: 30px;
}
.me-img img {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .12);
}
.me-detail {
  padding: 0 10px 50px;
}
.me-detail h4 {
  font-weight: 700;
  font-size: 18px;
  text-align: center;
  margin-bottom: 27px;
}
.me-detail p {
  font-size: 15px;
  line-height: 1.7;
}
.me-detail p + p {
  margin-top: 20px;
}


/* privacy policy */
.privacy-contents {
  padding-bottom: 60px;
}
.privacy-block {
  margin-bottom: 40px;
  line-height: 1.7;
}
dl.privacy-block dt {
  border-bottom: 1px solid var(--lightblue-color);
  padding-bottom: 5px;
  margin-bottom: 5px;
  font-size: 18px;
}
dl.privacy-block dd ul {
  list-style: disc;
  padding-left: 20px;
  margin: 1em 0;
}
dl.privacy-block dd p + p {
  margin-top: 1em;
}
dl.privacy-block dd a {
  color: var(--lightblue-color);
  text-decoration: underline;
}

/* not found */
.notfound-contents {
  padding-bottom: 80px;
}
.notfound-lead {
  margin-bottom: 50px;
}
.notfound-lead p + p {
  margin-top: 20px;
}
.notfound-ttl {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 20px;
}
.notfound-search {
  background: #fff;
  padding: 15px;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  gap: 6px 0;
}
.notfound-search input[type="text"] {
  font-size: 16px;
  padding: 8px 12px;
  border: 1px solid #C5C5C5;
  border-radius: 5px;
}
.notfound-search input[type="text"]:focus {
  outline: none;
}

/* contact */
.contact-contents {
  padding-bottom: 70px;
}
.contact-block {
  background: #fff;
  border-radius: 10px;
  padding: 50px 18px 78px;
}
.contact-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  max-width: 350px;
  margin: 0 auto 45px;
}
.contact-step::before {
  content: "";
  position: absolute;
  width: calc(100% - 35px * 2);
  height: 1px;
  background: var(--lightblue-color);
  left: 50%;
  transform: translateX(-50%);
  top: 0;
}
.contact-step li {
  padding-top: 15px;
  position: relative;
  color: #A4A4A4;
  font-size: 14px;
}
.contact-step li::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid var(--lightblue-color);
  border-radius: 50%;
}
.contact-step li.is-active {
  color: var(--lightblue-color);
  font-weight: 500;
}
.contact-step li.is-active::before {
  width: 17px;
  height: 17px;
  background: var(--lightblue-color);
  top: -8px;
}
.form-item {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 9px 0;
}
.form-item dt span {
  background: #0F6786;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 15px;
}
.form-item dd :is(input, textarea) {
  border: 1px solid #D1D1D1;
  border-radius: 3px;
  font-size: 16px;
  padding: 7px 12px;
  width: 100%;
}
.form-item dd input::placeholder {
  color: #C6C6C6;
}
.form-item dd textarea {
  height: 250px;
}
.mw_wp_form_confirm .form-privacy {
  display: none;
}
.form-privacy {
  margin: 37px 0 50px;
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
}
.form-privacy a {
  color: var(--lightblue-color);
  text-decoration: underline;
}
.form-check {
  margin-top: 16px;
  display: block;
}
.form-check input[type="checkbox"] {
  display: none;
}
.form-check .mwform-checkbox-field-text {
  padding-left: 30px;
  position: relative;
  display: inline-block;
}
.form-check .mwform-checkbox-field-text::before {
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid #A5A5A5;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.form-check .mwform-checkbox-field-text::after {
  content: "";
  width: 15px;
  height: 8px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
  position: absolute;
  left: 3px;
  top: 5px;
  opacity: 0;
}
.form-check input[type="checkbox"]:checked + .mwform-checkbox-field-text::before {
  background: var(--lightblue-color);
  border-color: var(--lightblue-color);
}
.form-check input[type="checkbox"]:checked + .mwform-checkbox-field-text::after {
  opacity: 1;
}
.form-btn {
  border-radius: 99px;
  color: #fff;
  text-align: center;
  padding: 16px 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: block;
  width: 270px;
  margin: 0 auto;
}
.form-btn.submit-btn {
  background: var(--orange-color);
  border: 2px solid var(--orange-color);
}

.mw_wp_form_confirm .form-item {
  gap: 14px 0;
  margin-bottom: 37px;
}
.mw_wp_form_confirm .form-item dd {
  line-height: 1.7;
}
.mw_wp_form_confirm .form-btns {
  display: flex;
  flex-direction: column-reverse;
  gap: 17px 0;
}
.form-btn.back-btn {
  background: #73939F;
  width: 160px;
  border: 2px solid #73939F;
}

.form-send .form-ttl {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 30px;
  text-align: center;
}
.form-send .send-text {
  padding: 0 8px;
  line-height: 1.8;
  max-width: 560px;
  margin: 0 auto;
}



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

  /* util */
  .inner {
    padding: 0 30px;
    max-width: 1260px;
    margin: 0 auto;
  }

  /* header */
  .header {
    height: 60px;
  }
  .header-inner {
    max-width: 1460px;
    margin: 0 auto;
    padding: 0;
  }
  .header-logo {
    margin-left: 40px;
    width: 210px;
  }
  .header-nav {
    display: block;
  }
  .header-nav-list {
    display: flex;
    gap: 0 42px;
    align-items: center;
    margin-right: 178px;
  }
  .header-nav-list li a {
    font-size: 15px;
    font-weight: 500;
    transition: all .4s ease;
  }
  .header-nav-list li a:hover {
    color: var(--lightblue-color);
  }
  .header-nav-list li.contact {
    position: absolute;
    top: -2px;
    right: 0;
    height: calc(100% + 2px);
  }
  .header-nav-list li.contact a {
    display: inline-block;
    width: 140px;
    height: 100%;
    background: #3CA7FF;
    background: linear-gradient(129deg,rgba(60, 167, 255, 1) 0%, rgba(41, 100, 182, 1) 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease;
  }
  .header-nav-list li.contact a:hover {
    opacity: 0.8;
  }
  .header-serch {
    display: flex;
    align-items: center;
    position: absolute;
    bottom: -80px;
    right: 25px;
    height: 56px;
    border-radius: 99px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.11);
    cursor: pointer;
    transition: all .4s ease;
    z-index: 999;
  }
  .header-serch:hover {
    box-shadow: none;
    transform: translateY(2px);
  }
  /* .header-serch.is-active input {
    display: block;
    width: 225px;
  } */
  .header-serch .icon {
    padding: 18px;
  }
  .header-serch .icon img {
    vertical-align: top;
  }
  .header-serch .input {
    width: 0;
    transition: all 0.6s ease;
  }
  .header-serch input {
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    opacity: 0;
    padding: 3px 0;
    outline: none;
  }
  .header-serch.is-active .input {
    width: 250px;
    padding-right: 28px;

  }
  .header-serch.is-active input {
    opacity: 1;
  }

  .drawer-icon, .drawer {
    display: none;
  }

  /* footer */
  .footer-inner {
    padding: 60px 30px 40px;
    max-width: 1260px;
    margin: 0 auto;
  }
  .footer-fx {
    display: flex;
    margin-bottom: 65px;
  }
  .footer-left {
    width: calc(100% - 320px);
  }
  .footer-right {
    display: block;
    width: 320px;
  }
  .footer-logo {
    width: 420px;
    margin: 0 0 30px;
  }
  .footer-list {
    margin: 0;
    padding: 0;
    max-width: 100%;
    gap: 0 30px;
  }
  .footer-list ul {
    display: flex;
    width: auto;
    gap: 30px;
  }
  .footer-list ul li + li {
    margin-top: 0;
  }
  .footer-list ul li a {
    transition: all .4s ease;
  }
  .footer-list ul li a:hover {
    color: var(--orange-color);
  }
  .footer-contact-btn {
    width: 100%;
  }
  .footer-contact-btn a {
    background: var(--orange-color) url(../img/common/mail_white.svg) no-repeat center left 42px / 24px auto;
    color: #fff;
    padding: 23px 0;
    width: 100%;
    border-radius: 10px;
    font-size: 20px;
    font-weight: bold;
    display: inline-block;
    text-align: center;
    padding-left: 40px;
    transition: all .4s ease;
  }
  .footer-contact-btn a:hover {
    transform: translateY(3px);
  }
  .copyright {
    font-size: 13px;
  }

  .fixed-contact {
    bottom: -10px;
    left: -10px;
    transition: all .4s ease;
  }
  .fixed-contact:hover {
    bottom: 0;
    left: 0;
  }
  .fixed-contact a {
    width: 280px;
    height: 80px;
    border-radius: 0 10px 0 0;
    gap: 0 14px;
    padding: 0 0 10px 10px;
  }
  .fixed-contact a span {
    display: block;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
  }

  .page-top {
    right: -5px;
  }
  .page-top:hover {
    right: 0;
  }
  .page-top a {
    width: 80px;
    height: 54px;
  }
  .page-top a::before {
    width: 28px;
    height: 15px;
    top: 10px;
    left: 22px;
  }
  .page-top a span {
    bottom: 8px;
    left: 22px;
    font-size: 14px;
  }


  /* front-page */
  .main {
    padding-top: 60px;
  }
  .mv {
    height: 490px;
  }
  .mv::after {
    background: url(../img/front-page/mv-cover.png) no-repeat center left / cover;
    max-width: 1000px;
  }
  .mv-text {
    width: auto;
    top: 50%;
    left: 84px;
    transform: translateY(-50%);
  }
  .mv-text .main-text {
    font-size: 44px;
    margin-bottom: 10px;
  }
  .mv-text .sub-text {
    font-size: 20px;
  }
  

  .top-tag-list-wrap {
    margin: 0;
    padding: 0;
  }
  .top-tag-list {
    padding: 20px 20px 100px;
    max-height: 100%;
  }
  .top-tag-list ul li a {
    transition: all .4s ease;
  }
  .top-tag-list ul li a:hover {
    color: var(--orange-color);
    border-color: var(--orange-color);
  }
  .tags-more-btn {
    display: none;
  }

  .top-service + .top-service {
    margin-top: 116px;
  }
  .top-service:last-child {
    padding-bottom: 150px;
  }
  .top-service .section-ttl {
    font-size: 30px;
    margin-bottom: 54px;
  }
  .service-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
  }
  .service-card {
    width: calc(50% - 50px / 2);
    transition: all .4s ease;
  }
  .service-card:hover {
    box-shadow: none;
    transform: translateY(2px);
  }
  .service-card + .service-card {
    margin-top: 0;
  }
  .service-card a {
    padding: 36px 40px 75px;
    position: relative;
    height: 100%;
  }
  .service-card .card-ttl {
    font-size: 26px;
    margin-bottom: 20px;
  }
  .service-card .card-ttl span {
    background-size: 43px auto!important;
    padding-left: 56px;
  }
  .service-card .card-ttl .line_ai_stamp-card-icon {
   background-size: 30px auto!important;
   padding-left: 50px;
  }
  .service-card .card-ttl .light_pack-icon {
    background-size: 34px auto!important;
    padding-left: 52px;
  }
  .service-card .card-ttl .assistant-icon {
    background-size: 40px auto!important;
  }
  .service-card .card-ttl .on-site_support-icon {
    background-size: 40px auto!important;
  }
  .service-card .card-ttl img {
    max-width: 190px;
    max-height: 70px;
  }
  .service-card .card-detail {
    font-size: 16px;
    margin-bottom: 0;
  }
  .service-card .card-btn {
    position: absolute;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    transition: all .4s ease;
    font-size: 16px;
    padding: 5px 20px;
  }
  .service-card a:hover .card-btn {
    background: var(--lightblue-color);
    color: #fff;
  }
  .service-card a:hover .card-btn.ex-btn::after {
    background: #fff;
  }

  .voice-section {
    padding: 92px 40px 80px;
    background: linear-gradient(140deg, rgba(0, 161, 220, 1) 0%, rgba(29, 22, 100, 1) 140%);
  }
  .section-ttl {
    margin-bottom: 62px;
  }
  .section-ttl .en {
    font-size: 50px;
  }
  .section-ttl .ja {
    font-size: 18px;
  }
  .voice-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 13px 13px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .voice-card {
    border-radius: 5px;
    transition: all .4s ease;
    width: calc(25% - 13px * 3 / 4);
  }
  .voice-card:hover {
    box-shadow: none;
    transform: translateY(3px);
  }
  .voice-card .tag a {
    transition: all .4s ease;
  }
  .voice-card .tag a:hover {
    background: var(--lightblue-color);
    color: #fff;
  }
  .bottom-btn {
    margin-top: 64px;
  }
  .bottom-btn a {
    font-size: 18px;
    transition: all .4s ease;
  }
  .bottom-btn a:hover {
    background: var(--lightblue-color);
    color: #fff;
  }
  .voice-section .bottom-btn a:hover {
    background: #fff;
    color: var(--lightblue-color);
  }
  .column-section {
    padding: 120px 0;
    background-size: 800px auto, 900px auto;
  }
  .column-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
  }
  .column-card > a {
    transition: all .4s ease;
  }
  .column-card a:hover {
    color: var(--lightblue-color);
  }
  .column-card .category a {
    transition: all .4s ease;
  }
  .column-card .category a:hover {
    background: var(--lightblue-color);
    color: #fff;
  }
  .column-card a .img img {
    transition: all 1s ease;
  }
  .column-card a:hover .img img {
    transform: scale(1.1);
  }
  
  .contact-section {
    background: url(../img/common/contact-bg.jpg) no-repeat center center / cover;
    padding: 0;
    position: relative;
    z-index: 1;
  }
  .contact-section::before {
    content: "";
    background: linear-gradient(129deg, rgba(0, 161, 220, 0.8) 0%, rgba(29, 22, 100, 0.8) 100%);
    position: absolute;
    left: 0;
    top: 0;
    width: 60vw;
    height: 100%;
    z-index: -1;
  }
  .contents-box {
    padding: 110px 100px 100px;
    background: none;
    width: 60%;
    max-width: 880px;
    margin: 0 40% 0 auto;
  }
  .contact-section .section-ttl .en {
    font-size: 50px;
  }
  .contact-section .section-ttl .ja {
    font-size: 20px;
  }
  .contents-box p {
    max-width: 505px;
    margin: 0 auto 46px;
    font-size: 18px;
    letter-spacing: 0.07em;
  }
  .contact-box-btns {
    gap: 15px 40px;
  }
  .contact-box-btn {
    width: 300px;
  }
  .contact-box-btn a {
    font-size: 20px;
    padding: 20px;
    transition: all .4s ease;
  }
  .contact-box-btn a:hover {
    background: #fff;
    color: var(--orange-color);
  }
  .contact-box-btn.orange-btn a:hover {
    background: #fff;
    color: var(--orange-color);
  }


  /* page */
  .page .bg-inner::before {
    background: url(../img/common/bg-gradation.png) no-repeat top right / contain;
    aspect-ratio: 1440 / 258;
  }
  .breadcrumbs {
    padding: 8px 30px;
    max-width: 1440px;
    margin: 0 auto;
  }
  .breadcrumbs ul li {
    font-size: 14px;
  }
  .page-head {
    padding: 60px 0 80px;
  }
  .page-ttl-block {
    display: flex;
    gap: 0 30px;
    justify-content: center;
  }
  .page-title {
    width: 30%;
  }
  .page-intro {
    width: calc(100% - 30% - 30px);
    font-size: 16px;
  }
  .page-title .text {
    padding-right: 6%;
  }
  .page-title .en {
    font-size: 60px;
    margin-bottom: 5px;
  }
  .page-title .ja {
    font-size: 20px;
  }
  .page-title.line::after {
    margin-top: 28px;
  }

  .page-head:has(.page-single-title) {
    padding: 76px 0 100px;
  }
  .page-single-title {
    font-size: 40px;
  }
  .page-single-title .ec-ttl {
    flex-direction: row;
  }
  .page-single-title .ec-ttl .sub-ttl {
    padding: 0 90px 0 0;
    margin: 0 40px 0 0;
    font-size: inherit;
  }
  .page-single-title .ec-ttl .sub-ttl::before {
    right: -20px;
    left: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
    width: 84px;
  }
  .inner.service-inner {
    max-width: 1140px;
  }
  .service-contents {
    padding-bottom: 140px;
    line-height: 1.62;
  }
  .section-block + .section-block {
    margin-top: 60px;
  }
  .section-block h3 {
    font-size: 24px;
    margin-bottom: 18px;
  }
  .section-block {
    font-size: 16px;
  }
  .section-block p + p {
    margin-top: 1.1em;
  }
  .section-block .img-fx {
    flex-direction: row;
    align-items: flex-start;
    gap: 0 30px;
  }
  .img-fx .text-block {
    width: 61%;
  }
  .img-fx .img-block {
    width: calc(100% - 61% - 30px);
    margin-top: 3px;
  }
  .point-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 45px;
  }
  .point-block {
    align-items: center;
  }
  .point-num {
    width: 110px;
    height: 110px;
  }
  .point-block .point-text {
    width: calc(100% - 110px);
    padding-left: 20px;
  }
  .point-num span:first-child {
    font-size: 16px;
  }
  .point-num span:nth-child(2) {
    font-size: 53px;
  }
  .point-text h4 {
    font-size: 20px;
  }

  .point-item {
    position: relative;
    padding-left: 110px;
  }
  .point-item + .point-item {
    margin-top: 45px;
  }
  .point-head {
    display: contents;
  }
  .point-head::after {
    content: none;
  }
  .point-head .point-ttl {
    width: 100%;
    padding: 0;
    font-size: 24px;
    padding: 0 0 8px 16px;
    position: relative;
  }
  .point-head .point-ttl::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    left: auto;
    width: calc(100% + 16px);
    height: 1px;
    z-index: -1;
    background: var(--lightblue-color);
  }
  .point-item .point-num {
    position: absolute;
    top: 0;
    left: 0;
  }
  .point-item .point-text {
    padding-left: 16px;
  }
  .pont-flex {
    display: flex;
    gap: 0 1em;
  }
  .point-text .pont-flex .pont-flex-txt {
    flex: 1;
  }
  .point-text .pont-flex .pont-flex-img {
    width: 37%;
  }

  .price-head {
    font-size: 18px;
    padding-left: 7px;
  }
  .price-head a:hover {
    opacity: 0.7;
  }

  .page-contact {
    margin-top: 140px;
    padding: 54px 54px 62px;
  }
  .page-contact .ttl {
    font-size: 24px;
    margin-bottom: 34px;
  }
  .page-contact p {
    text-align: center;
    font-size: 16px;
  }
  .page-contact p + p {
    margin-top: 18px;
  }
  .page-contact .contact-btn {
    margin-top: 50px;
    width: 323px;
  }
  .page-contact .contact-btn a {
    font-size: 20px;
    transition: all .4s ease;
  }
  .page-contact .contact-btn a:hover {
    box-shadow: none;
    transform: translateY(4px);
  }

  .case-section {
    padding: 92px 40px 80px;
  }
  .case-ttl {
    font-size: 30px;
    padding-bottom: 22px;
    margin-bottom: 58px;
  }
  .case-cards {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 13px;
    max-width: 1400px;
    margin: 0 auto;
  }
  .case-card {
    transition: all .4s ease;
    width: calc(25% - 13px * 3 / 4);
  }
  .case-card:hover {
    box-shadow: none;
    transform: translateY(3px);
  }
  .case-card a {
    display: block;
    height: 100%;
  }
  .case-card .text {
    padding: 12px 15px 15px;
  }
  .case-card .ttl {
    font-size: 18px;
  }
  .case-card .detail {
    font-size: 14px;
  }
  
  .ec-menu-section {
    padding-bottom: 68px;
  }
  .ec-block {
    margin-top: 50px;
    padding: 42px 70px 53px;
  }
  .ec-menu-ttl {
    font-size: 24px;
    margin-bottom: 25px;
  }
  .ec-block p {
    font-size: 16px;
    text-align: center;
  }
  .ec-menu {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 20px;
  }
  .ec-menu li a {
    width: 100%;
    aspect-ratio: 250 / 160;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .4s ease;
  }
  .ec-menu li a:hover {
    box-shadow: none;
    transform: translateY(3px);
  }
  .ec-menu li a::before {
    top: auto;
    transform: none;
    bottom: 15px;
    right: 15px;
  }

  /* voice */
  .voice-item {
    transition: all .4s ease;
  }
  .voice-item:hover {
    box-shadow: none;
    transform: translateY(3px);
  }
  .voice-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
  .voice-head-text {
    font-size: 16px;
    bottom: 20px;
    padding: 0 60px 0 20px;
  }
  .voice-ttl {
    padding-bottom: 0;
    margin-bottom: 8px;
    font-size: 18px;
  }
  .voice-head::after {
    width: 38px;
    height: 38px;
    bottom: 20px;
    right: 20px;
    background-size: 18px 18px;
    transition: all .4s ease;
  }
  .voice-item:hover .voice-head::after {
    transform: scale(1.2);
  }
  .voice-body {
    padding: 16px 20px;
  }
  .voice-detail {
    font-size: 15px;
    margin-bottom: 12px;
  }
  .voice-tags .tag a {
    transition: all .4s ease;
  }
  .voice-tags .tag a:hover {
    background: var(--lightblue-color);
    color: #fff;
  }

  .pagenation {
    margin-top: 78px;
  }
  .page-numbers-list {
    gap: 0 14px;
  }
  .pagenation a.page-numbers:not(.prev, .next) {
    width: 48px;
    height: 48px;
    transition: all .4s ease;
  }
  .pagenation a.page-numbers:not(.prev, .next):hover {
    background: var(--lightblue-color);
    color: #fff;
  }
  .pagenation .page-numbers.current {
    width: 48px;
    height: 48px;
  }
  .pagenation .page-numbers.prev {
    margin-right: 10px;
  }
  .pagenation .page-numbers.next {
    margin-left: 10px;
  }
  .pagenation-result {
    margin-top: 38px;
  }

  /* work */
  .work-block {
    padding-bottom: 140px;
  }
  .work-sort {
    background: #fff;
    border-radius: 99px;
    padding: 13px 30px;
    margin-bottom: 28px;
  }
  .work-sort-fx {
    display: flex;
    align-items: center;
    gap: 0 38px;
  }
  .work-sort-fx span {
    white-space: nowrap;
  }
  .work-categories {
    display: flex;
    align-items: center;
    gap: 8px 7px;
    width: 100%;
    flex-wrap: wrap;
  }
  .work-categories li {
    flex-grow: 1;
    min-width: 200px;
    max-width: 270px;
  }

  .work-categories a {
    display: inline-block;
    padding: 6px 10px;
    width: 100%;
    text-align: center;
    border-radius: 99px;
    transition: all .4s ease;
    border: 1px solid #4b6286;
    color: #4b6286;
    font-size: 14px;
    font-weight: 500;
  }
  .work-categories a.rpa {
    border: 1px solid #fc7f52;
    color: #fc7f52;
  }
  .work-categories a.ec {
    border: 1px solid #ff6798;
    color: #ff6798;
  }
  .work-categories a.web {
    border: 1px solid var(--lightblue-color);
    color: var(--lightblue-color);
  }
  .work-categories a.system {
    border: 1px solid #e857ac;
    color: #e857ac;
  }
  .work-categories a.line_ai {
    border: 1px solid #ffa615;
    color: #ffa615;
  }
  .work-categories a.it_dx {
    border: 1px solid #16a493;
    color: #16a493;
  }
  .work-categories a.shopify {
    border: 1px solid #79B671;
    color: #79B671;
  }
  .work-categories a.woocommerce {
    border: 1px solid #9d49d5;
    color: #9d49d5;
  }
  .work-categories a.shop_serve {
    border: 1px solid #d0a005;
    color: #d0a005;
  }
  .work-categories a.rakuten_yahoo {
    border: 1px solid #f63131;
    color: #f63131;
  }
  .work-categories a.web_pack {
    border: 1px solid #4375ff;
    color: #4375ff;
  }
  .work-categories a:hover,
  .work-categories a.is-active {
    background: #4b6286;
    color: #fff;
  }
  .work-categories a.rpa:hover,
  .work-categories a.rpa.is-active {
    background: #fc7f52;
  }
  .work-categories a.ec:hover,
  .work-categories a.ec.is-active {
    background: #ff6798;
  }
  .work-categories a.web:hover,
  .work-categories a.web.is-active {
    background: var(--lightblue-color);
  }
  .work-categories a.system:hover,
  .work-categories a.system.is-active {
    background: #e857ac;
  }
  .work-categories a.line_ai:hover,
  .work-categories a.line_ai.is-active {
    background: #ffa615;
  }
  .work-categories a.it_dx:hover,
  .work-categories a.it_dx.is-active {
    background: #16a493;
  }
  .work-categories a.shopify:hover,
  .work-categories a.shopify.is-active {
    background: #79B671;
  }
  .work-categories a.woocommerce:hover,
  .work-categories a.woocommerce.is-active {
    background: #9d49d5;
  }
  .work-categories a.shop_serve:hover,
  .work-categories a.shop_serve.is-active {
    background: #d0a005;
  }
  .work-categories a.rakuten_yahoo:hover,
  .work-categories a.rakuten_yahoo.is-active {
    background: #f63131;
  }
  .work-categories a.web_pack:hover,
  .work-categories a.web_pack.is-active {
    background: #4375ff;
  }
  .work-categories a.is-active {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 10px;
  }
  .work-categories a.is-active::before {
    content: "";
    width: 15px;
    height: 8px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-2px) rotate(-45deg);
    display: inline-block;
  }
  .work-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }
  .work-item {
    transition: all .4s ease;
    display: flex;
    flex-direction: column;
  }
  .work-item:hover {
    box-shadow: none;
    transform: translateY(3px);
  }
  .work-item > a {
    flex: 1;
  }
  .work-head::after {
    width: 38px;
    height: 38px;
    background-size: 18px 18px;
    transition: all .4s ease;
  }
  .work-item:hover .work-head::after {
    transform: scale(1.1);
  }
  .work-detail {
    font-size: 14px;
  }

  /* column */
  .column-block {
    padding-bottom: 150px;
  }
  .column-fx {
    display: flex;
    gap: 0 50px;
  }
  .column-main {
    width: 70.83%;
    margin-bottom: 0;
  }
  .column-sidebar {
    width: 25%;
    margin-top: 0!important;
  }
  .pickup-area .column-heading {
    flex-direction: row;
  }
  .column-heading {
    gap: 0 20px;
  }
  .column-heading::after {
    content: "";
    flex-grow: 1;
    height: 1px;
    background: var(--lightblue-color);
  }
  .column-heading .en {
    font-size: 40px;
  }
  .column-heading .ja {
    font-size: 16px;
  }
  .pickup-area {
    border: none;
    padding: 0;
    margin-bottom: 46px;
    background: none;
  }
  .column-list {
    gap: 40px 0;
  }
  .pickup-area .column-list {
    flex-wrap: nowrap;
    gap: 0 40px;
  }
  .pickup-area .column-list .column-item {
    width: calc(50% - 20px);
  }
  .column-img a img {
    transition: all 1s ease;
  }
  .column-img a:hover img {
    transform: scale(1.1);
  }
  .column-ttl {
    font-size: 18px;
  }
  :is(.column-ttl, .column-author) a {
    transition: all 0.4s ease;
  }
  :is(.column-ttl, .column-author) a:hover {
    color: var(--lightblue-color);
  }
  .column-categories {
    margin-bottom: 7px;
  }
  .column-categories .category a {
    padding: 3px 14px;
    font-size: 14px;
  }
  .column-tag,
  .column-categories .category a,
  .side-category-list li a,
  .side-tag-list li a,
  .entry-tags .tag a,
  .entry-foot-tags .tag a {
    transition: all 0.4s ease;
  }
  .column-tag:hover,
  .column-categories .category a:hover,
  .side-category-list li a:hover,
  .side-tag-list li a:hover,
  .entry-tags .tag a:hover,
  .entry-foot-tags .tag a:hover {
    background: var(--lightblue-color);
    color: #fff;
  }
  .column-item {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
  .latest-area .column-item {
    display: flex;
    justify-content: space-between;
  }
  .latest-area .column-item .column-img {
    width: 45.88%;
    margin-bottom: 0;
  }
  .latest-area .column-item .column-text {
    width: 50.59%;
  }
  .latest-area .column-item .column-ttl {
    font-size: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }
  .column-detail,
  .column-tag {
    font-size: 14px;
  }

  .entry-page .column-block {
    margin-top: 55px;
  }
  .entry-main {
    margin: 0;
    border-radius: 10px;
    padding: 50px 20px 80px;
  }
  .entry-block {
    max-width: 620px;
    margin: 0 auto;
  }
  .entry-img {
    margin-bottom: 10px;
  }
  .entry-ttl {
    font-size: 24px;
    margin-bottom: 9px;
  }
  .entry-tags {
    margin-bottom: 9px;
  }
  .entry-meta {
    font-size: 16px;
    gap: 0 22px;
  }
  .entry-head {
    margin-bottom: 40px;
  }
  .entry-body {
    font-size: 18px;
    line-height: 1.8;
  }
  .entry-body > * + * {
    margin-top: 36px;
  }
  #toc_container {
    padding: 23px 25px 27px;
  }
  .toc_title {
    text-align: left;
    margin-bottom: 14px;
  }
  .entry-body :is(h1, h2, h3, h4, h5, h6) > span {
    margin-top: -70px;
    padding-top: 70px;
  }
  .entry-body :is(h1, h2) {
    font-size: 1.444em;
  }
  .entry-body h3 {
    font-size: 1.333em;
  }
  .entry-body h4 {
    font-size: 1.222em;
  }
  .entry-body h4::before {
    top: 9px;
  }
  .entry-body h5 {
    font-size: 1.111em;
  }
  .entry-body .wp-caption-text {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 5px;
  }
  blockquote {
    padding: 26px 30px;
  }
  blockquote cite {
    font-size: 16px;
  }
  blockquote::before {
    width: 34px;
    height: 30px;
    left: 15px;
  }
  blockquote::after {
    width: 34px;
    height: 30px;
    right: 15px;
  }
  .ap-border {
    padding: 24px 34px 32px;
    margin: 60px auto 0;
  }
  .ap-border strong {
    margin-bottom: 13px;
  }
  .ap-border p a {
    margin: 20px auto 0;
    padding: 15px 26px;
    transition: all .4s ease;
  }
  .ap-border p a:hover {
    opacity: 0.7;
  }
  #toc_container .toc_list li a {
    transition: all .4s ease;
  }
  #toc_container .toc_list li a:hover {
    color: var(--lightblue-color);
  }
  .entry-foot {
    margin-top: 80px;
  }
  .entry-paging {
    padding-top: 15px;
  }
  .entry-paging :is(.prev, .next) {
    top: 15px;
  }
  #related-posts {
    margin-top: 50px;
  }
  #related-posts h3 {
    font-size: 18px;
    margin-bottom: 15px;
  }
  #related-posts > ul {
    grid-template-columns: repeat(4, 1fr);
  }
  .sidebar-recommend {
    margin: 0!important;
    border-radius: 10px;
  }
  .side-art-text {
    transition: all 0.4s ease;
  }
  .side-art-text:hover {
    color: var(--lightblue-color);
  }
  .side-art-text .ttl {
    font-size: 13px;
  }
  .side-art-img img {
    transition: all 0.4s ease;
  }
  .side-art-img:hover img {
    transform: scale(1.1);
  }

  .sidebar-fixed {
    position: sticky;
    top: 90px;
  }
  .sidebar-block #toc_container {
    border: none;
    padding: 0;
  }
  .sidebar-block .toc_title {
    text-align: center;
    font-size: 18px;
  }
  .sidebar-block #toc_container .toc_list {
    max-height: calc(100vh - 440px);
    overflow-y: auto;
  }
  .sidebar-block #toc_container .toc_list li::before {
    top: 6px;
  }
  .sidebar-fixed .sidebar-recommend {
    margin-top: 20px!important;
  }
  
  /* search */
  .search-contents .inner {
    max-width: 850px;
    margin: 0 auto;
  }
  .search-head {
    padding: 22px 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0 24px;
  }
  .search-label {
    margin-bottom: 0;
    font-size: 20px;
  }
  .serch-input {
    flex: 1;
  }
  .serch-input input {
    font-size: 20px;
    padding: 10px 25px;
    border-radius: 99px;
  }
  .result-block {
    padding-bottom: 150px;
  }
  .result-head {
    font-size: 20px;
    margin-bottom: 40px;
  }
  .result-item {
    display: flex;
    justify-content: space-between;
  }
  .result-img {
    width: 45.88%;
    margin-bottom: 0;
  }
  .result-img img {
    transition: all 1s ease;
  }
  .result-img:hover img {
    transform: scale(1.1);
  }
  .result-text {
    width: 50.59%;
  }
  .result-item .column-ttl {
    display: -webkit-box;             
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2; 
  }
  .result-item.single-item .column-ttl {
    transition: all .4s ease;
  }
  .result-item.single-item .column-ttl:hover {
    color: var(--lightblue-color);
  }
  .result-item.single-item .column-detail p {
    -webkit-line-clamp: 6;
    line-height: 1.7;
  }

  /* faq */
  .faq-contents {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 130px;
  }
  .faq-ttl {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .faq-item {
    padding: 28px 50px 28px 32px;
    cursor: pointer;
  }
  .faq-item dt {
    padding: 0 20px 0 30px;
  }
  .faq-item dt::before,
  .faq-item dt::after {
    right: -27px;
  }
  .faq-item dd {
    padding: 12px 20px 0 30px;
  }

  /* company */
  .company-contents {
    max-width: 880px;
    margin: 0 auto;
    padding-bottom: 150px;
  }
  .company-block {
    flex-direction: row;
    margin-bottom: 26px;
    padding-bottom: 26px;
    font-size: 18px;
  }
  .company-block dt {
    width: 146px;
  }
  .company-block dd {
    flex: 1;
  }
  .company-block .row {
    gap: 0 22px;
  }
  .company-block iframe {
    aspect-ratio: 740 / 210;
  }
  .message-contents {
    margin-top: 70px;
  }
  .message-contents::before {
    top: -40px;
    right: calc(50% + 200px);
    width: 50%;
    max-width: 100%;
    height: 390px;
  }
  .message-contents::after {
    height: calc(100% - 90px);
    left: auto;
    right: 0;
    width: 65%;
  }
  .message-flex {
    flex-direction: row;
    gap: 0 70px;
  }
  .me-text {
    display: block;
    flex: 1;
  }
  .me-img {
    order: 0;
    width: 450px;
    max-width: 100%;
    padding: 0 0 0 80px;
  }
  .company-ttl {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 5px 0;
  }
  .company-ttl .en {
    font-size: 48px;
  }
  .company-ttl.me-ttl {
    flex-direction: row;
    gap: 0 27px;
    align-items: center;
    margin-bottom: 80px;
  }
  .company-ttl.me-ttl .en {
    font-size: 38px;
  }
  .company-ttl .ja {
    font-size: 16px;
  }
  .me-detail {
    padding: 0 0 50px;
  }
  .me-detail h4 {
    text-align: left;
    font-size: 24px;
    margin-bottom: 36px;
  }
  .me-detail p {
    font-size: 16px;
  }

  /* privacy policy */
  .privacy-contents {
    max-width: 940px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
  dl.privacy-block dt {
    font-size: 20px;
    padding-bottom: 7px;
    margin-bottom: 7px;
  }
  dl.privacy-block dd {
    font-size: 17px;
  }

  /* not found */
  .notfound-contents {
    max-width: 850px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
  .notfound-lead {
    text-align: center;
    margin-bottom: 70px;
  }
  .notfound-lead p + p {
    margin-top: 15px;
  }
  .notfound-ttl {
    font-size: 24px;
    margin-bottom: 22px;
  }
  .notfound-search {
    padding: 22px 44px;
    border-radius: 99px;
    flex-direction: row;
    gap: 0 24px;
    align-items: center;
  }
  .notfound-search input[type="text"] {
    flex: 1;
    border-radius: 99px;
    font-size: 20px;
    padding: 10px 20px;
  }
  .notfound-search input[type="text"]::placeholder {
    color: #A4A4A4;
  }

  /* contact */
  .contact-contents {
    padding-bottom: 100px;
  }
  .contact-block {
    max-width: 1080px;
    margin: 0 auto;
    padding: 70px 20px 100px;
  }
  .contact-step {
    max-width: 350px;
    margin: 0 auto 70px;
  }
  .contact-step li {
    font-size: 16px;
  }
  .form-block {
    max-width: 730px;
    margin: 0 auto;
  }
  .form-item {
    flex-direction: row;
    gap: 0 30px;
  }
  .form-item dt {
    width: 240px;
    position: relative;
    margin-top: 8px;
    text-align: right;
    padding-right: 80px;
    font-size: 18px;
  }
  .form-item dt span {
    margin: 0;
    position: absolute;
    top: 0;
    right: 0;
  }
  .form-item dd {
    flex: 1;
  }
  .form-item dd :is(input, textarea) {
    font-size: 18px;
  }
  .form-item dd :is(input, textarea):focus {
    outline: none;
  }
  .form-privacy {
    margin: 48px 0;
    font-size: 18px;
  }
  .form-check .mwform-checkbox-field-text {
    cursor: pointer;
  }
  .form-check .mwform-checkbox-field-text::after {
    top: 9px;
  }
  .form-btn {
    font-size: 20px;
    padding: 20px 0;
    width: 300px;
    transition: all .4s ease;
  }
  .form-btn:hover {
    background: #fff;
    color: var(--orange-color);
  }

  .mw_wp_form_confirm .form-item {
    gap: 0 30px;
  }
  .mw_wp_form_confirm .form-item dt {
    margin-top: 5px;
  }
  .mw_wp_form_confirm .form-item dd {
    font-size: 18px;
  }
  .mw_wp_form_confirm .form-btns {
    margin-top: 90px;
    flex-direction: row;
    justify-content: center;
    gap: 0 40px;
  }
  .mw_wp_form_confirm .form-btn {
    margin: 0;
  }
  .form-btn.back-btn {
    width: 180px;
  }
  .form-btn.back-btn:hover {
    background: #fff;
    color: #73939F;
  }

  .form-send .form-ttl {
    font-size: 24px;
  }
  .form-send .send-text {
    padding: 0;
  }


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

  .column-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .ec-menu {
    gap: 15px;
    grid-template-columns: repeat(2, 1fr);
  }
  .page-single-title:has(.ec-ttl) {
    font-size: 32px;
  }
  .page-single-title .ec-ttl .sub-ttl {
    padding: 0 70px 0 0;
    margin: 0px 20px 0 0;
  }

  .page-title .en {
    font-size: 46px;
  }
  .page-title .ja {
    font-size: 17px;
  }
  .page-intro {
    font-size: 14px;
  }
  .page-title.line::after {
    margin-top: 20px;
  }
  .work-sort {
    border-radius: 20px;
    padding: 22px 20px 16px;
  }
  .work-sort-fx {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  .work-categories {
    flex-wrap: wrap;
    gap: 8px;
  }
  .work-categories li {
    width: calc(33.3% - 8px * 2 / 3);
    max-width: calc(33.3% - 8px * 2 / 3);
  }
  .work-categories a {
    font-size: 14px;
  }
  .work-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .side-article-list li a {
    flex-direction: column;
    gap: 5px 0;
  }
  .side-art-img,
  .side-art-text {
    width: 100%;
  }
  .sidebar-block #toc_container .toc_list {
    max-height: calc(100vh - 620px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1200px) {
  .header-logo {
    margin-left: 20px;
  }
  .header-nav-list {
    flex-wrap: wrap;
    gap: 0 15px;
    justify-content: flex-end;
    margin-right: 165px;
    padding-left: 40px;
  }
  .header-nav-list li a {
    font-size: 13px;
  }

  .voice-card, .case-card {
    width: calc(50% - 13px / 2);
  }

  .contents-box {
    padding: 110px 40px 100px;
  }

  .footer-fx {
    flex-direction: column;
    gap: 30px;
  }
  .footer-left {
    width: 100%;
  }
  .footer-logo {
    margin: 0 auto 30px;
  }
  .footer-list {
    justify-content: center;
  }
  .footer-right {
    margin: 0 auto;
  }

  .column-fx {
    gap: 0 30px;
  }
  .pickup-area .column-list {
    gap: 0 20px;
  }
  .pickup-area .column-list .column-item {
    width: calc(50% - 10px);
  }
  .column-ttl,
  .latest-area .column-item .column-ttl {
    font-size: 16px;
  }
  .column-detail, .column-tag {
    font-size: 12px;
  }

  .message-contents::before {
    right: auto;
    left: 0;
    width: 320px;
    height: 340px;
  }
  .message-contents::after {
    width: 75%;
  }
  .message-flex {
    gap: 0 40px;
  }
  .me-img {
    padding: 0;
    width: 320px;
  }
  .me-detail h4 {
    font-size: 18px;
    margin-bottom: 20px;
  }
  .me-detail p {
    font-size: 14px;
  }

  
}