/* CSS カスタムプロパティ（暫定的にここに記述。いずれ別ファイルに分ける） */
:root {
  --color-main: #002f7a;
  --color-main-lightest: #ebf3ff;
  --color-accent: #f1b600;
  --color-accent-red: #fa5b5b;
  --color-white: #ffffff;

  --container-padding: 0.75rem;
  --container-width: 1080px;
}

/**
 * 自動化・FA スタイル
 **/
/* contact の場合に非表示にする */
body.contact #mainHeader #mainNav,
body.contact .headerTop__toOverallTop,
body.contact #mainFooter #footerLink,
body.contact #mainHeader #headerTop #menuBtn {
  display: none;
}
body.contact #mainHeader #headerTop {
  gap: 0;
}
body.contact #mainHeader #headerTop h1 a,
body.contact .contentsHeader a {
  pointer-events: none;
}

#mainContents {
  line-height: 1.5;
}
@media screen and (max-width: 751px) {
  #mainContents {
    padding-top: 0.25rem;
  }
}
#mainContents > .container-fluid,
#mainContents > #form > .formInner > .container-fluid {
  text-align: left;
}
#mainContents.detail .col {
  margin-bottom: 0;
}

.dnd-section {
  padding-right: var(--container-padding);
  padding-left: var(--container-padding);
}
.dnd-section:has(.dnd-section__background-main-lightest) {
  background-color: var(--color-main-lightest);
  padding-top: 5rem;
  padding-bottom: 5rem;
}

#mainHeader #headerTop {
  height: auto;
  padding: 0.5rem 1rem;
  position: relative;
}
@media screen and (max-width: 751px) {
  #mainHeader #headerTop {
    justify-content: start;
    padding: 0 1rem;
  }
}
#mainHeader #headerTop .headerTop__topRight {
  bottom: 0;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(2, min-content);
  position: absolute;
  right: 1rem;
  top: 0;
}
@media screen and (max-width: 751px) {
  #mainHeader #headerTop .headerTop__topRight {
    height: 55px;
    position: static;
  }
}
#mainHeader #headerTop h1 {
  align-self: center;
  height: 35px;
  margin-left: 0;
  padding: 0;
}
@media screen and (max-width: 751px) {
  #mainHeader #headerTop h1 {
    margin-left: 0;
  }
}
.headerTop__toOverallTop {
  align-self: center;
  background-color: var(--color-white);
  border: 1px solid var(--color-main);
  color: inherit;
  display: block;
  font-weight: 600;
  padding: 0.25rem 1rem;
  text-align: center;
  text-decoration: none;
  word-break: keep-all;
  transition: all 300ms;
}
.headerTop__toOverallTop:hover {
  background-color: var(--color-main);
  border-color: var(--color-white);
  color: var(--color-white);
}

@media screen and (max-width: 751px) {
  #pageTitle {
    margin-top: 0;
  }
}

#mainHeader #mainNav {
  height: auto;
}
#mainHeader #mainNav ul#mainNavPc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  height: auto;
  max-width: var(--container-width);
  width: auto;
}
@media screen and (max-width: 751px) {
  #mainHeader #mainNav ul#mainNavPc {
    grid-template-columns: 1fr;
  }
}
#mainHeader #mainNav ul#mainNavPc li {
  float: none;
  height: auto;
  position: relative;
  width: auto;
}
#mainHeader #mainNav ul#mainNavPc li:not(:last-child)::after {
  background-color: var(--color-main);
  content: '';
  height: 50%;
  position: absolute;
  right: 0;
  top: calc(50% - 25%);
  width: 1px;
}
@media screen and (max-width: 751px) {
  #mainHeader #mainNav ul#mainNavPc li:not(:last-child)::after {
    display: none;
  }
}
#mainHeader #mainNav ul#mainNavPc li a,
#mainHeader #mainNav ul#mainNavPc li p {
  border-left: none;
  font-size: 1.125rem;
  margin: 0;
  padding: 1rem 0;
}
@media screen and (max-width: 751px) {
  #mainHeader #mainNav ul#mainNavPc li a,
  #mainHeader #mainNav ul#mainNavPc li p {
    font-size: 0.875rem;
    height: auto;
    padding: 0;
  }
}
#mainHeader #mainNav ul#mainNavPc li a:hover {
  transition: opacity 0.5s;
  opacity: 0.8;
}

.contentsHeader {
  color: var(--color-white);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.5;
  margin: 0 auto;
  padding: 0.25rem 4rem;
  text-align: center;
}
.contentsHeader a {
  color: inherit;
  text-decoration: none;
}
.contentsHeader__en::after {
  content: ' ｜ ';
}
@media screen and (max-width: 751px) {
  .contentsHeader {
    font-size: 1.125rem;
    min-width: auto;
    padding: 0.25rem var(--container-padding);
    width: auto;
  }

  .contentsHeader__ja,
  .contentsHeader__en {
    display: block;
  }
  
  .contentsHeader__en {
    font-size: 0.5rem;
  }
  .contentsHeader__en::after {
    display: none;
  }
}

.mainContentsHeader {
  align-content: center;
  background-color: var(--color-main-lightest);
  color: var(--color-main);
  display: grid;
  font-size: 2.5rem;
  font-weight: 600;
  gap: 1rem;
  margin-right: calc(var(--container-padding) * -1);
  margin-left: calc(var(--container-padding) * -1);
  min-height: 160px;
  justify-items: center;
  line-height: 1.5;
  text-align: center;
}
.mainContentsHeader::after {
  content: '';
  display: block;
  height: 5px;
  width: 5rem;
  background-color: var(--color-accent);
}
@media screen and (max-width: 751px) {
  .mainContentsHeader {
    font-size: 1.75rem;
    min-height: 130px;
    gap: 0.5rem;
  }
  .mainContentsHeader::after {
    height: 3px;
  }
}

/* コンテナ */
.c-container {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-width);
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}
@media screen and (max-width: 751px) {
  .c-container {
    max-width: auto;
  }
}

/* ボタン */
.c-button {
  border: 1px solid currentColor;
  color: var(--color-main);
  display: grid;
  font-weight: 600;
  padding: 1rem 2rem;
  text-align: center;
  text-decoration: none;
  transition: all 300ms;
}
@media screen and (max-width: 751px) {
  .c-button {
    padding: 0.75rem 1rem;
  }
}
.c-button + .c-button {
  margin-left: 1rem;
}
@media screen and (max-width: 751px) {
  .c-button + .c-button {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}
.c-button.c-button--inline {
  display: inline-grid;
}
@media screen and (max-width: 751px) {
  .c-button.c-button--inline {
    display: grid;
  }
}
.c-button.c-button--rounded {
  border-radius: 0.5rem;
}
.c-button.c-button--rounded-full {
  border-radius: 9999px;
}
.c-button.c-button--fill {
  background-color: var(--color-white);
}
.c-button.c-button--fill:hover {
  background-color: var(--color-main);
  color: var(--color-white);
  border-color: var(--color-white);
}
.c-button.c-button--accent {
  background-color: var(--color-accent);
  color: var(--color-white);
}
.c-button.c-button--accent:hover {
  color: var(--color-white);
  border-color: var(--color-white);
}
.c-button.c-button--accent-red {
  background-color: var(--color-accent-red);
  color: var(--color-white);
}
.c-button.c-button--accent-red:hover {
  color: var(--color-white);
  border-color: var(--color-white);
}
.c-button.c-button--back::before,
.c-button.c-button--arrow::after {
  align-self: center;
  aspect-ratio: 1 / 1;
  border: 2px solid currentColor;
  box-sizing: border-box;
  content: '';
  display: block;
  line-height: 1;
  width: 0.75rem;
  transition: all 300ms;
}
.c-button.c-button--fill:hover.c-button--back::before,
.c-button.c-button--fill:hover.c-button--arrow::after,
.c-button.c-button--accent:hover.c-button--back::before,
.c-button.c-button--accent:hover.c-button--arrow::after {
  border-color: var(--color-white);
}
.c-button.c-button--back {
  grid-template-columns: min-content 1fr;
}
.c-button.c-button--back::before {
  border-right: 0;
  border-top: 0;
  margin-right: 1rem;
  transform: translateX(25%) rotate(45deg);
}
.c-button.c-button--arrow {
  grid-template-columns: 1fr min-content;  
}
.c-button.c-button--arrow::after {
  border-bottom: 0;
  border-left: 0;
  margin-left: 1rem;
  transform: translateX(-25%) rotate(45deg);
}

.c-borderedBox {
  border: 1px solid #707070;
  margin-bottom: 1.5rem;
  padding: 20px;
}

/* ユーティリティ */
.u-color--main {
  color: var(--color-main);
}
.u-color--accent {
  color: var(--color-accent);
}
.u-color--accent-red {
  color: var(--color-accent-red);
}
.u-markerLine {
  background: linear-gradient(transparent 50%, #ffd358b5 50%);
}
.u-fontSize--lg {
  font-size: 1.125rem;
}
.u-fontSize--xl {
  font-size: 1.25rem;
}
.u-fontSize--2xl {
  font-size: 1.5rem;
}
.u-fontSize--3xl {
  font-size: 1.875rem;
}
.u-fontSize--4xl {
  font-size: 2.25rem;
}
@media screen and (max-width: 751px) {
  .sp\:u-fontSize--lg {
    font-size: 1.125rem;
  }
  .sp\:u-fontSize--xl {
    font-size: 1.25rem;
  }
  .sp\:u-fontSize--2xl {
    font-size: 1.5rem;
  }
  .sp\:u-fontSize--3xl {
    font-size: 1.875rem;
  }
  .sp\:u-fontSize--4xl {
    font-size: 2.25rem;
  }
}
.u-text--center {
  text-align: center;
}

/* フォーム */
#form {
  padding-top: 0;
}
#form .formInner {
  max-width: initial;
  width: auto;
}
#form .form-privacy {
  height: 150px;
  overflow: auto;
  width: auto;
}
@media screen and (max-width: 751px) {
  #form input[type=submit] {
    width: 100%;
  }
}
#form .formInner label {
  margin-bottom: 0.5rem
}
#form .formInner input[type=email],
#form .formInner input[type=tel],
#form .formInner input[type=text],
#form .formInner select,
#form .formInner textarea {
  border-radius: 0.5rem;
  height: auto;
  padding: 0.5rem;
}
#form .formInner textarea {
  height: 320px;
}
#form .formInner li.hs-form-checkbox,
#form .formInner li.hs-form-radio {
  display: block;  
}
#form .formInner fieldset {
  margin-bottom: 2rem;
}
#form .hs-error-msg {
  margin-top: 0.5rem;
}

/* メインビジュアル */
.solution-fa-mainVisual {
  align-items: center;
  display: grid;
  grid-template-rows: 1fr auto;
  justify-items: center;
  margin-right: calc(var(--container-padding) * -1);
  margin-left: calc(var(--container-padding) * -1);
  position: relative;
}
.solution-fa-mainVisual > img {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  max-height: 640px;
  object-fit: cover;
  object-position: 0 25%;
  width: 100%;
}
@media screen and (max-width: 751px) {
  .solution-fa-mainVisual > img {
    height: 70lvh;
    max-height: unset;
    object-position: 90% center;
  }
}
.solution-fa-mainVisual__inner {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  width: calc(var(--container-width) + 160px);
}
@media screen and (max-width: 751px) {
  .solution-fa-mainVisual__inner {
    align-self: end;
    margin-bottom: -2.75rem;
    width: auto;
    padding-bottom: 1rem;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}
.solution-fa-mainVisual__box {
  width: fit-content;
}
.solution-fa-mainVisual__box .solution-fa-mainVisual__box__text {
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 2.5rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-mainVisual__box .solution-fa-mainVisual__box__text {
    font-size: 22px;
    margin-bottom: 1.5rem;
  }
}
.solution-fa-mainVisual__box .solution-fa-mainVisual__box__text > span {
  background: linear-gradient(#002f7abb, #002f7abb);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: inline-block;
  line-height: 1.375;
  padding: 0 0.5rem;
  transition: all 300ms;
}
.solution-fa-mainVisual__box .solution-fa-mainVisual__box__text > span.marker {
  background-size: 100% 100%;
}
.solution-fa-section__button {
  font-size: 1.75rem;
  margin-right: auto;
  margin-left: auto;
  width: fit-content;
}
@media screen and (max-width: 751px) {
  .solution-fa-section__button {
    font-size: 1.25rem;
    width: auto;
  }
}
.solution-fa-mainVisual__thumbnails {
  background-color: var(--color-main-lightest);
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  margin-left: calc(var(--container-padding) * -1);
  margin-right: calc(var(--container-padding) * -1);
  padding-bottom: 2rem;
  padding-top: 2rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-mainVisual__thumbnails {
    gap: 0.5rem;
    grid-template-columns: repeat(2, 1fr);
    padding-bottom: 1rem;
    padding-top: 3rem;
  }
}
.solution-fa-mainVisual__thumbnails__item {
  background-color: var(--color-main);
  color: var(--color-white);
  display: grid;
  gap: 0;
  grid-row: span 2;
  grid-template-rows: subgrid;
}
.solution-fa-mainVisual__thumbnails__item img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  vertical-align: bottom;
  width: 100%;
}
.solution-fa-mainVisual__thumbnails__item__caption {
  padding: 0.5rem;
}

/* 特徴 */
.solution-fa-section-heading,
#form .formInner h2 {
  color: inherit;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 3rem;
  padding: 0;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-section-heading,
  #form .formInner h2 {
    font-size: 1.25rem;
  }
}
.solution-fa-section-heading::after,
#form .formInner h2::after {
  background-color: var(--color-main);
  content: '';
  display: block;
  height: 4px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5rem;
  position: static;
  width: 5rem;
}

.solution-fa-feature__items {
  display: grid;
  gap: 3rem;
  grid-template-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
@media screen and (max-width: 751px) {
  .solution-fa-feature__items {
    gap: 2rem;
    width: auto;
  }
}
.solution-fa-feature-item {
  --feature-item-image-column-width: 35%;

  background-color: var(--color-main-lightest);
  border-radius: 0;
  display: grid;
  gap: 1.75rem;
  grid-template-columns: var(--feature-item-image-column-width) 1fr;
  padding: 1.5rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-feature-item {
    gap: 1rem;
    padding: 1rem;
  }
}
.solution-fa-feature-item:nth-child(odd) {
  grid-template-columns: 1fr var(--feature-item-image-column-width);
}
@media screen and (max-width: 751px) {
  .solution-fa-feature-item,
  .solution-fa-feature-item:nth-child(odd) {
    gap: 1rem;
    grid-template-columns: 1fr;
    padding: 1rem;
  }
}
.solution-fa-feature-item:nth-child(odd) .solution-fa-feature-item__image {
  order: 1;
}
.solution-fa-feature-item__image {
  background-color: #eeeeee;
  border-radius: 0;
  overflow: hidden;
}
@media screen and (max-width: 751px) {
  .solution-fa-feature-item__image,
  .solution-fa-feature-item:nth-child(odd) .solution-fa-feature-item__image {
    order: 1;
  }
}
.solution-fa-feature-item__image img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  vertical-align: bottom;
  width: 100%;
}
.solution-fa-feature-item__image--area {
  background: radial-gradient(circle at 53% 63%, rgb(247 220 138) 15%, rgb(255, 255, 255) 20%);
}
.solution-fa-feature-item__image--area img {
  object-fit: contain;
}
.solution-fa-feature-item__number {
  color: var(--color-accent);
  font-family: 'Arial';
  font-size: 8rem;
  font-weight: 600;
  line-height: 1;
  margin-top: calc(-2rem - 1.5rem);
}
@media screen and (max-width: 751px) {
  .solution-fa-feature-item__number {
    font-size: 4rem;
    margin-top: calc(-1rem - 1rem);
  }
}
.solution-fa-feature-item__heading {
  font-size: 1.5rem;
  font-weight: 600;
}
@media screen and (max-width: 751px) {
  .solution-fa-feature-item__heading {
    font-size: 1.125rem;
  }
}

/* 課題 */
.solution-fa-assignment-first {
  font-size: 1.5rem;
  margin-bottom: 4rem;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-first {
    font-size: 1.25rem;
  }
}
.solution-fa-assignment-first span {
  color: var(--color-accent);
  font-size: 2.5rem;
  font-weight: 600;
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-first span {
    font-size: 1.75rem;
  }
}
.solution-fa-assignment {
  counter-reset; assignment;
  display: grid;
  gap: 2rem 1rem;
  grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment {
    grid-template-columns: repeat(2, 1fr);
  }
}
.solution-fa-assignment-item {
  counter-increment: assignment;
  display: grid;
  filter: drop-shadow(0px 0px 6px #00000011);
  gap: 0;
  grid-row: span 3;
  grid-template-rows: subgrid;
  position: relative;
}
.solution-fa-assignment-item::before {
  background-color: var(--color-main);
  border-radius: 10rem;
  content: '課題 ' counter(assignment);
  color: var(--color-white);
  display: block;
  font-size: 1.25rem;
  font-weight: 600;
  justify-self: center;
  left: 50%;
  margin-bottom: -1.125rem;
  padding: 0.25rem 1.5rem;
  width: fit-content;
  z-index: 1;
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-item::before {
    font-size: 1.125rem;
  }
}
.solution-fa-assignment-item__top {
  background-color: var(--color-white);
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 2.5rem 1rem;
  position: relative;
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-item__top {
    padding: 2rem 1rem;
  }
}
.solution-fa-assignment-item__top::after {
  content: '';
  aspect-ratio: 1 / 0.5;
  background-color: var(--color-white);
  bottom: -1rem;
  display: block;
  left: calc(50% - 1rem);
  position: absolute;
  width: 2rem;
  clip-path: polygon(0% 0%, 100% 0, 50% 100%);
}
.solution-fa-assignment-item__bottom {
  background-color: var(--color-main);
  border-radius: 0 0 1.5rem 1.5rem;
/*   border-top: 1px dashed #89a0c3; */
  color: var(--color-white);
  font-weight: 600;
  padding: 2.5rem 1.5rem 1.5rem 1.5rem;
  position: relative;
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-item__bottom {
    padding: 2rem 1rem 1rem 1rem;
  }
}
.solution-fa-assignment-item__bottom::before {
  content: '';
  aspect-ratio: 1 / 1;
  background-color: var(--color-white);
  border: 4px solid #f1b600;
  border-radius: 100%;
  display: block;
  margin-bottom: 0.75rem;
  margin-left: auto;
  margin-right: auto;
  width: 2.5rem;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23FFC100" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M297.2 248.9C311.6 228.3 320 203.2 320 176c0-70.7-57.3-128-128-128S64 105.3 64 176c0 27.2 8.4 52.3 22.8 72.9c3.7 5.3 8.1 11.3 12.8 17.7l0 0c12.9 17.7 28.3 38.9 39.8 59.8c10.4 19 15.7 38.8 18.3 57.5H109c-2.2-12-5.9-23.7-11.8-34.5c-9.9-18-22.2-34.9-34.5-51.8l0 0 0 0c-5.2-7.1-10.4-14.2-15.4-21.4C27.6 247.9 16 213.3 16 176C16 78.8 94.8 0 192 0s176 78.8 176 176c0 37.3-11.6 71.9-31.4 100.3c-5 7.2-10.2 14.3-15.4 21.4l0 0 0 0c-12.3 16.8-24.6 33.7-34.5 51.8c-5.9 10.8-9.6 22.5-11.8 34.5H226.4c2.6-18.7 7.9-38.6 18.3-57.5c11.5-20.9 26.9-42.1 39.8-59.8l0 0 0 0 0 0c4.7-6.4 9-12.4 12.7-17.7zM192 128c-26.5 0-48 21.5-48 48c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-44.2 35.8-80 80-80c8.8 0 16 7.2 16 16s-7.2 16-16 16zm0 384c-44.2 0-80-35.8-80-80V416H272v16c0 44.2-35.8 80-80 80z"/></svg>');
  background-size: 45%;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: calc(-1.25rem - 4px);
  left: calc(50% - 1.25rem - 4px);
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-item__bottom::before {
    width: 2rem;
    top: calc(-1rem - 4px);
    left: calc(50% - 1rem - 4px);
  }
}
.solution-fa-assignment-item__image {
  align-content: center;
  aspect-ratio: 1 / 1;
  border-top-left-radius: 60%;
  display: grid;
  justify-items: center;
  margin-bottom: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
  width: 60%;
}
.solution-fa-assignment-item__image img {
  width: 110%;
}
.solution-fa-assignment-item__heading {
  color: var(--color-accent-red);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-assignment-item__heading {
    font-size: 1rem;
  }
}

/* ご相談はこちら */
.solution-fa-contact-heading {
  align-items: flex-end;
  display: flex;
  font-size: 2rem;
  justify-content: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-contact-heading {
    align-items: flex-start;
    font-size: 1.25rem;
  }
}
.solution-fa-contact-heading img {
  margin-bottom: 1.25rem;
  margin-right: 0.5rem;
  width: 125px;
}
@media screen and (max-width: 751px) {
  .solution-fa-contact-heading img {
    margin-bottom: 0;
    width: 85px;
  }
}

.solution-fa-talk-balloons {
  align-items: start;
  display: grid;
  grid-template-columns: 25% auto 25%;
  justify-content: center;
  margin-bottom: 2rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloons {
    gap: 0 0.5rem;
    grid-template-columns: 1fr 1fr;
  }
}
.solution-fa-talk-balloon {
  --balloon-color: var(--color-white);
  --bolloon-border-color: var(--color-main);
  --balloon-triangle-width: 1.25rem;
  --balloon-triangle-posx: 2rem;
  --balloon-triangle-posx-sp: 50%;
  --balloon-border-width: 3px;

  background-color: var(--balloon-color);
  border: var(--balloon-border-width) solid var(--bolloon-border-color);
  border-radius: 50rem;
  color: var(--color-main);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: var(--balloon-triangle-width);
  padding: 0.25rem 1rem;
  position: relative;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloon {
    font-size: 0.75rem;
    padding: 0.25rem;
  }
}
.solution-fa-talk-balloon::before,
.solution-fa-talk-balloon::after {
  aspect-ratio: 1 / 1;
  background-color: var(--bolloon-border-color);
  bottom: calc(var(--balloon-triangle-width) * -1);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  content: '';
  display: block;
  position: absolute;
  right: var(--balloon-triangle-posx);
  width: var(--balloon-triangle-width);
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloon::before,
  .solution-fa-talk-balloon::after {
    right: var(--balloon-triangle-posx-sp);
  }
}
.solution-fa-talk-balloon--right::before {
  clip-path: polygon(100% 0, 0 0, 0 100%);
  left: var(--balloon-triangle-posx);
  right: auto;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloon--right::before {
    left: var(--balloon-triangle-posx-sp);
  }
}
.solution-fa-talk-balloon::after {
  background-color: var(--balloon-color);
  bottom: calc((var(--balloon-triangle-width) * -1) + (var(--balloon-border-width) * 2.4));
  right: calc(var(--balloon-triangle-posx) + var(--balloon-border-width));
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloon::after {
    right: calc(var(--balloon-triangle-posx-sp) + var(--balloon-border-width));
  }
}
.solution-fa-talk-balloon--right::after {
  clip-path: polygon(100% 0, 0 0, 0 100%);
  left: calc(var(--balloon-triangle-posx) + var(--balloon-border-width));
  right: auto;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloon--right::after {
    left: calc(var(--balloon-triangle-posx-sp) + var(--balloon-border-width));
  }
}
.solution-fa-talk-balloons__image {
  margin-left: -2rem;
  margin-right: -2rem;
  margin-top: 3rem;
  width: 400px;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-balloons__image {
    grid-column: 1 / -1;
    justify-self: center;
    margin: 0;
    order: 3;
    width: 80%;
  }
}
.solution-fa-talk-balloons__image img {
  width: 100%;
}
.solution-fa-talk-solution {
  background-color: var(--color-main-lightest);
  padding: 5rem 2rem 2rem;
  border-radius: 1.5rem;
  position: relative;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-solution {
    padding: 3rem 1rem 1rem;
  }
}
.solution-fa-talk-solution::before {
  background-color: var(--color-white);
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  content: '';
  height: 3rem;
  left: calc(50% - 5rem);
  position: absolute;
  top: -1px;
  width: 10rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-solution::before {
    height: 2rem;
    left: calc(50% - 3.5rem);
    width: 7rem;
  }
}
.solution-fa-talk-solution__body {
  align-items: center;
  display: grid;
  grid-template-columns: 25% 1fr 25%;
  margin-bottom: 2rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-solution__body {
    gap: 0.5rem;
    grid-template-columns: 1fr 1fr;
  }
}
.solution-fa-talk-solution__body img {
  aspect-ratio: 1 / 1;
  border-radius: 1.25rem;
  object-fit: cover;
  width: 100%;
}
.solution-fa-talk-solution__body__text {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk-solution__body__text {
    font-size: 1.25rem;
    grid-column: 1 / -1;
    order: -1;
  }
}
.solution-fa-talk__button {
  font-size: 1.5rem;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
@media screen and (max-width: 751px) {
  .solution-fa-talk__button {
    font-size: 1.125rem;
    width: auto;
  }
}

/* 導入事例リスト */
.solution-fa-caseList {
  counter-reset: case;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-caseList {
    grid-template-columns: 1fr;
  }
}
.solution-fa-caseList a {
  border: 1px solid var(--color-main);
  color: var(--color-main);
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  padding: 1rem;
  text-decoration: none;
}
.solution-fa-caseList a::before {
  counter-increment: case;
  content: counter(case)'. ';
}
.solution-fa-caseList a::after {
    align-self: center;
    aspect-ratio: 1 / 1;
    border: 2px solid var(--color-main);
    border-bottom: 0;
    border-left: 0;
    box-sizing: border-box;
    content: '';
    display: block;
    margin-left: 1.5rem;
    line-height: 1;
    width: 0.75rem;
    transform: translateX(-25%) rotate(45deg);
}

/* 導入事例リスト タブ */
.solution-fa-caseListTab {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--color-main);
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  align-items: end;
}
@media screen and (max-width: 751px) {
  .solution-fa-caseListTab {
    gap: 0.25rem;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
  }
}
.solution-fa-caseListTab li {
  margin-bottom: 0;
}
.solution-fa-caseListTab li a {
  display: block;
  text-align: center;
  text-decoration: none;
  border-style: solid;
  border-width: 1px 1px 0 1px;
  border-color: var(--color-main-lightest);
  padding: 0.25rem;
  border-radius: 0.25rem 0.25rem 0 0;
  background-color: var(--color-main-lightest);
  color: var(--color-main);
}
li.solution-fa-caseListTab__current {
  margin-bottom: -1px;
}
li.solution-fa-caseListTab__current a {
  border-color: var(--color-main);
  font-weight: 600;
  background-color: #fff;
}

/* 4つの特徴 */
ol.solution-fa-features {
    margin-right: auto;
    margin-left: auto;
    width: fit-content;
    counter-reset: features;
}

ol.solution-fa-features li:before {
    counter-increment: features;
    content: counter(features);
    margin-top: -1.5rem;
    margin-right: 1rem;
    height: 4rem;
    border-radius: 100%;
    background-color: var(--color-main);
    color: var(--color-white);
    font-weight: bold;
    font-size: 2.5rem;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
ol.solution-fa-features li:after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--color-main);
    clip-path: polygon(50% 0, 100% 100%, 0 50%);
    position: absolute;
    top: 1.25rem;
    left: 2.75rem;
}
ol.solution-fa-features li {
    margin-bottom: 3rem;
    font-size: 2rem;
    font-weight: bold;
    display: flex;
    position: relative;
}

/* お客さまの声 */
.solution-fa-customerVoice {
  background-color: var(--color-white);
  border: 8px solid var(--color-main-lightest);
  margin-bottom: 2rem;
  padding: 1rem;
  position: relative;
}
.solution-fa-customerVoice__number {
  color: #002f7a11;
  font-family: 'Arial';
  font-size: 8rem;
  font-weight: 600;
  line-height: 1;
  position: absolute;
  right: 0;
  top: 0;
}
.solution-fa-customerVoice__header {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: 100px 1fr;
  margin-bottom: 1rem;
}
.solution-fa-customerVoice__header__image {
  aspect-ratio: 1 / 1;
  background-color: var(--color-main-lightest);
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="%232f5795" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>');
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 75%;
  border-radius: 9999px;
}
.solution-fa-customerVoice__header__title {
  border-bottom: 1px solid #eee;
  padding-bottom: 1rem;
}
.solution-fa-customerVoice__header__title__text {
  color: var(--color-main);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.solution-fa-customerVoice__header__title__tag {
  display: flex;
  font-size: 1rem
}
.solution-fa-customerVoice__header__title__tag dt,
.solution-fa-customerVoice__header__title__tag dd {
  padding: 0.25rem 0.5rem;
}
.solution-fa-customerVoice__header__title__tag dt {
  background-color: var(--color-main-lightest);
  font-weight: bold;
}
.solution-fa-customerVoice__header__title__tag dd {
  margin-right: 0.5rem;
}

.contactForm-box {
  background-color: var(--color-main-lightest);
  border-radius: 1.5rem;
  padding: 1rem;
}
.contactForm-box.contactForm-box--transparent {
  background: none;
  padding: 0;
}
.contactForm-box + .contactForm-box {
  margin-top: 1.5rem;
}
.contactForm-box h3 {
  color: var(--color-main);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contactForm-box.contactForm-box--transparent h3 {
  color: inherit;
}
.contactForm-box * + h3 {
  margin-top: 1.25rem;
}
.contactForm-experts {
  display: grid;
  gap: 1rem;
}
.contactForm-experts-item {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: 0.33fr 0.66fr;
}
.contactForm-experts-item__image img {
  border-radius: 0.5rem;
  max-width: 100%;
  vertical-align: bottom;
}
.contactForm-experts-item__name {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.contactForm-experts-item__field {
  background-color: var(--color-accent);
  border-radius: 9999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  padding: 0 0.5rem;
  width: fit-content;
}
.contactForm-experts-item__fieldList {
  padding-left: 1.5em;
}
.contactForm-experts-item__fieldList li {
  list-style-type: disc;
  margin: 0 !important;
  text-indent: 0 !important;
  padding: 0 !important;
}

/* 固定フッター */
.solution-fa-fixedFooter {
  backdrop-filter: blur(5px);
  background-color: color-mix(in srgb, var(--color-main) 75%, transparent);
  bottom: 0;
  padding: 0.5rem 0;
  position: fixed;
  width: 100%;
  z-index: 1;
}
.solution-fa-fixedFooter__button {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
@media screen and (max-width: 751px) {
  .solution-fa-fixedFooter__button {
    width: auto;
  }
}

/* フッターCTA */
.solution-fa-cta {
  background-color: var(--color-main);
  color: var(--color-white);
  line-height: 1.5;
  padding-bottom: 6rem;
  padding-top: 6rem;
}
@media screen and (max-width: 751px) {
  .solution-fa-cta {
    padding-bottom: 4rem;
    padding-top: 4rem;
  }
}

.solution-fa-cta__heading {
  border-bottom: 1px solid currentColor;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-cta__heading {
    font-size: 1.25rem;
    margin-bottom: 2rem;
  }
}
.solution-fa-cta__body {
  align-items: center;
  display: grid;
  gap: 2rem;
/*   grid-template-columns: auto 10rem; */
  justify-content: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-cta__body {
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }
}
.solution-fa-cta__body p {
  margin-bottom: 1.5rem;
  text-align: center;
}
@media screen and (max-width: 751px) {
  .solution-fa-cta__body__image {
    margin-left: auto;
    margin-right: auto;
    width: 33.33333%;
  }
}
.solution-fa-cta__body__image img {
  width: 100%;
}
.solution-fa-cta__button {
  margin-left: auto;
  margin-right: auto;
}
.solution-fa-cta-button {
  background-color: var(--color-accent);
  border: 1px solid var(--color-white);
  border-radius: 100rem;
  color: var(--color-white);
  display: block;
  font-size: 1.125rem;
  font-weight: 600;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
  text-align: center;
  text-decoration: none;
  transition: all 300ms;
}
@media screen and (max-width: 751px) {
  .solution-fa-cta-button {
    font-size: 1rem;
  }
}
.solution-fa-cta-button:hover {
  color: var(--color-white);
  background-color: var(--color-accent);
  border-color: var(--color-white);
}

/* Responsive grid */

.row-fluid {
    width: 100%;
    *zoom: 1;
}

.row-fluid:before, .row-fluid:after {
    display: table;
    content: "";
}

.row-fluid:after {
    clear: both;
}

.row-fluid [class*="span"] {
    display: block;
    float: left;
    width: 100%;
    min-height: 1px;
    margin-left: 2.127659574%;
    *margin-left: 2.0744680846382977%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.row-fluid [class*="span"]:first-child {
    margin-left: 0;
}

.row-fluid .span12 {
    width: 99.99999998999999%;
    *width: 99.94680850063828%;
}

.row-fluid .span11 {
    width: 91.489361693%;
    *width: 91.4361702036383%;
}

.row-fluid .span10 {
    width: 82.97872339599999%;
    *width: 82.92553190663828%;
}

.row-fluid .span9 {
    width: 74.468085099%;
    *width: 74.4148936096383%;
}

.row-fluid .span8 {
    width: 65.95744680199999%;
    *width: 65.90425531263828%;
}

.row-fluid .span7 {
    width: 57.446808505%;
    *width: 57.3936170156383%;
}

.row-fluid .span6 {
    width: 48.93617020799999%;
    *width: 48.88297871863829%;
}

.row-fluid .span5 {
    width: 40.425531911%;
    *width: 40.3723404216383%;
}

.row-fluid .span4 {
    width: 31.914893614%;
    *width: 31.8617021246383%;
}

.row-fluid .span3 {
    width: 23.404255317%;
    *width: 23.3510638276383%;
}

.row-fluid .span2 {
    width: 14.89361702%;
    *width: 14.8404255306383%;
}

.row-fluid .span1 {
    width: 6.382978723%;
    *width: 6.329787233638298%;
}

.container-fluid {
    *zoom: 1;
}

.container-fluid:before, .container-fluid:after {
    display: table;
    content: "";
}

.container-fluid:after {
    clear: both;
}

@media (max-width: 767px) {
    .row-fluid {
        width: 100%;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: none;
        width: auto;
        margin-left: 0;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 1px;
        margin-left: 2.762430939%;
        *margin-left: 2.709239449638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 99.999999993%;
        *width: 99.9468085036383%;
    }

    .row-fluid .span11 {
        width: 91.436464082%;
        *width: 91.38327259263829%;
    }

    .row-fluid .span10 {
        width: 82.87292817100001%;
        *width: 82.8197366816383%;
    }

    .row-fluid .span9 {
        width: 74.30939226%;
        *width: 74.25620077063829%;
    }

    .row-fluid .span8 {
        width: 65.74585634900001%;
        *width: 65.6926648596383%;
    }

    .row-fluid .span7 {
        width: 57.182320438000005%;
        *width: 57.129128948638304%;
    }

    .row-fluid .span6 {
        width: 48.618784527%;
        *width: 48.5655930376383%;
    }

    .row-fluid .span5 {
        width: 40.055248616%;
        *width: 40.0020571266383%;
    }

    .row-fluid .span4 {
        width: 31.491712705%;
        *width: 31.4385212156383%;
    }

    .row-fluid .span3 {
        width: 22.928176794%;
        *width: 22.874985304638297%;
    }

    .row-fluid .span2 {
        width: 14.364640883%;
        *width: 14.311449393638298%;
    }

    .row-fluid .span1 {
        width: 5.801104972%;
        *width: 5.747913482638298%;
    }
}

@media (min-width: 1280px) {
    .row-fluid {
        width: 100%;
        *zoom: 1;
    }

    .row-fluid:before, .row-fluid:after {
        display: table;
        content: "";
    }

    .row-fluid:after {
        clear: both;
    }

    .row-fluid [class*="span"] {
        display: block;
        float: left;
        width: 100%;
        min-height: 1px;
        margin-left: 2.564102564%;
        *margin-left: 2.510911074638298%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        -ms-box-sizing: border-box;
        box-sizing: border-box;
    }

    .row-fluid [class*="span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .span12 {
        width: 100%;
        *width: 99.94680851063829%;
    }

    .row-fluid .span11 {
        width: 91.45299145300001%;
        *width: 91.3997999636383%;
    }

    .row-fluid .span10 {
        width: 82.905982906%;
        *width: 82.8527914166383%;
    }

    .row-fluid .span9 {
        width: 74.358974359%;
        *width: 74.30578286963829%;
    }

    .row-fluid .span8 {
        width: 65.81196581200001%;
        *width: 65.7587743226383%;
    }

    .row-fluid .span7 {
        width: 57.264957265%;
        *width: 57.2117657756383%;
    }

    .row-fluid .span6 {
        width: 48.717948718%;
        *width: 48.6647572286383%;
    }

    .row-fluid .span5 {
        width: 40.170940171000005%;
        *width: 40.117748681638304%;
    }

    .row-fluid .span4 {
        width: 31.623931624%;
        *width: 31.5707401346383%;
    }

    .row-fluid .span3 {
        width: 23.076923077%;
        *width: 23.0237315876383%;
    }

    .row-fluid .span2 {
        width: 14.529914530000001%;
        *width: 14.4767230406383%;
    }

    .row-fluid .span1 {
        width: 5.982905983%;
        *width: 5.929714493638298%;
    }
}

/* Clearfix */

.clearfix {
    *zoom: 1;
}

.clearfix:before, .clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

/* Visibilty Classes */

.hide {
    display: none;
}

.show {
    display: block;
}

.invisible {
    visibility: hidden;
}

.hidden {
    display: none;
    visibility: hidden;
}

/* Responsive Visibilty Classes */

.visible-phone {
    display: none !important;
}

.visible-tablet {
    display: none !important;
}

.hidden-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-phone {
        display: inherit !important;
    }

    .hidden-phone {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1139px) {
    .visible-tablet {
        display: inherit !important;
    }

    .hidden-tablet {
        display: none !important;
    }

    .hidden-desktop {
        display: inherit !important;
    }

    .visible-desktop {
        display: none !important ;
    }
}

/* Content wrappers for blog post and system templates */

.content-wrapper {
  padding: 0 20px;
  margin: 0 auto;
}

/* Drag and drop layout styles */

.dnd-section > .row-fluid {
  margin: 0 auto;
}

@media (max-width: 767px) {
  .dnd-section .dnd-column {
    padding: 0;
  }
}