html,body {
	overflow-x: hidden;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  width: 100%;

  @media screen and (min-width: 768px) and (max-width: 1053px) {
    font-size: 0.94966762vw;
  }
  
  @media  (max-width: 767px) {
    font-size: 2.27vw;
  }
}

body {
  font-size: var(--fontSize16);
  line-height: 1.6;
  font-weight: 400;
	font-family: "YuGothic", "Yu Gothic", "Yu Gothic Medium",  "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--colorBlack);
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
  font-feature-settings: 'palt';
  width: 100%;
  overflow-x: hidden;
}

main {
  background: var(--colorGray);
	margin-top: 10rem;
}

@media (hover: hover) {
  button,
  a:where([href]) {
    transition: opacity 0.3s;
    &:hover {
      opacity: 0.7;
    }
  }
}

a {
  transition: 0.3s;
}

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

.inner {
	width: 1100px;
	max-width: 95%;
	margin-inline: auto;
  @media  (max-width: 767px) {
    max-width: 90%;
  }
}

.bg-white {
  background: var(--colorWhite);
}

.sp_display,
.tab_display {
  display: none;
}

.mt-80 {
  margin-top: 8rem;
}



@media screen and (min-width: 767px) and (max-width: 1000px) {
  .inner {
    width: 95%;
  }
  .tab_display {
    display: block;
  }
}

@media (max-width: 767px) {
	main {
		margin-top: 15.46vw;
	}

  .pc_display,
  .tab_display {
    display: none;
  }
  .sp_display {
    display: block;
  }
  .inner {
    width: 92%;
  }
}

/* =============================
  header
=================================*/
header {
  height: 10rem;
  padding-left: 7rem;
  border-bottom: 1px solid var(--colorBlack);
	position: fixed;
	width: 100%;
	background: var(--colorWhite);
	z-index: calc(var(--zIndex-hamburgerMenu) + 1);
	.headerContainer {
				position: relative;
		  	display: flex;
 			 	justify-content: space-between;
				height: 10rem;
		  .headerLogo {
				max-width: 43rem;
				height: 100%;
				display: flex;
				align-items: center;
				img {
					height: auto;
				}
			}
			.headerNav {
				display: grid;
				align-content: space-between;
				.headerNavTop {
					display: flex;
					justify-content: flex-end;
					a {
						font-size: var(--fontSize13);
						font-weight: 700;
						font-family: var(--fontBIZUDPGothic);
						letter-spacing: 0.1em;
						padding-inline: 1.6rem;
						height: 4rem;
						display: flex;
						align-items: center;
					}
					.headerNavTop__contact {
						color: var(--colorWhite);
						background: var(--colorOrange);
						border-radius: 0 0 0 1rem;
					}
				}
				.headerNavBottom {
					padding-right:  2rem;
					.headerNavBottomList {
						display: flex;
						li a {
							padding: 1rem 2rem;
							font-size: var(--fontSize16);
							font-family: var(--fontBIZUDPGothic);
							font-weight: 700;
							letter-spacing: 0.1em;
							display: block;
						}
					}
				}
				.headerDrawer {
					display: none;
					&.active {
						display: block;
					}
				}
			}
	}

  @media (max-width: 767px) {
    position: fixed;
		height: 15.46vw;
		padding: 0;
		.headerContainer {
			 .menuButtonWrap {
				z-index: calc(var(--zIndex-hamburgerMenu) + 1);
				.menuButton {
					display: block;
					width: 17vw;
					height: 16vw;
					position: relative;
					pointer-events: all;

					span {
						display: block;
						position: absolute;
						width: 6.6vw;
						border-bottom: solid .5333333333vw #606269;
						transition: all .3s;
						left: 4.5vw;
						&:nth-child(1) {
							top: 5vw;
						}
						&:nth-child(2) {
							top: 8vw;
						}
						&:nth-child(3) {
							top: 10.8vw;
						}
					}

					&.active {
						span {
							width: 10vw;
							&:nth-child(1) {
								top: 8vw;
								left: 2.5vw;
								transform: rotate(45deg);
							}
							&:nth-child(2) {
								opacity: 0;
							}
							&:nth-child(3) {
								top: 8vw;
								left: 2.5vw;
								transform: rotate(-45deg);
							}
						}
					}
				}
			} 
			.headerLogo {
				max-width: 21rem;
			}

			height: 15.46vw;
			padding-left: 1rem;

			.headerNav {
				display: flex;
				.headerNavTop {
					height: 15.46vw;
					.pc_display {
						display: none;
					}
					.headerNavTop__contact {
						display: none;
					}
				}
				.headerNavBottom {
					display: none;
				}
				.headerDrawer {
					display: block;
					position: fixed;
					top: 15.46vw;
					left: 0;
					width: 100%;
					background: #fff;
					transition:  0.4s ease;
					z-index: var(--zIndex-hamburgerMenu);
					opacity: 0;
					visibility: hidden;
					transition: opacity .3s,visibility .3s;
					.headerDrawer__nav {
						.headerDrawer__navList {
							display: grid;
							li {
								border-top: .2666666667vw solid;
								&:nth-child(1) {
									border-top: none;
								}
							a {
									font-size: 3.7333333333vw;
									padding: 4.9vw  15.9vw 4.9vw 10.9vw;
									display: inline-block;
									font-weight: 700;
									font-family: var(--fontBIZUDPGothic);
								}
							}
						}
					}

					&.active {
						opacity: 1;
						transform: translateY(0);
						visibility: visible;
					}

					&__nav {
						ul {
							display: flex;
							flex-direction: column;
							align-items: center;
							gap: 2rem;

							li {
								a {
									display: flex;
									flex-direction: column;
									align-items: center;
									font-family: var(--fontBIZUDPGothic);
									font-weight: 700;
									font-size: 1.6rem;
									color: var(--colorBlack);

									span:last-child {
										font-size: 1.2rem;
										color: var(--colorGray);
									}
								}
							}
						}
					}
				}
			}
		}
   
  }
}

/* =============================
  mainvisual
=================================*/

#mainvisual {
  display: grid;
  grid-template-columns: auto 27.08%;
  .mainvisual__title {
    font-size: var(--fontSize44);
		font-family: var(--fontBIZUDPGothic);
		font-weight: 400;
    line-height: 1.59;
    letter-spacing: 0.08em;
    background: var(--colorWhite);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
    padding-left: calc((100vw - 1100px) / 2);
    display: flex;
    align-items: center;
    height: 24rem;
    sup {
      font-size: 50%;
    }
  }
  .mainvisual__img {
    height: 24rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
	@media (max-width:1160px) {
 	.mainvisual__title {
		padding-left: 2.5vw;
	}
	}
  @media (max-width:767px)  {
    grid-template-columns: 1fr;
    .mainvisual__title {
      height: 15rem;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
			padding-left: 4vw;
    }
  }
}

/* =============================
  component
=================================*/
.section__hgroup {
  text-align: center;
  font-family: var(--fontBIZUDPGothic);
  p {
    font-family: var(--fontSize20);
    letter-spacing: 0.1em;
  }
  h2 {
    color: var(--colorOrange);
    font-size: var(--fontSize28);
    letter-spacing: 0.1em;
    line-height: 1.75;
  }
}

.section__title {
  font-size: var(--fontSize28);
  font-family: var(--fontBIZUDPGothic);
  letter-spacing: 0.1em;
  line-height: 1.75;
  color: var(--colorOrange);
  text-align: center;
	padding-bottom: 0.7rem;
}

.section__headText {
  font-size: var(--fontSize16);
  letter-spacing: 0.025em;
  line-height: 1.875;
  margin-top: 2rem;
}

.section__text {
  font-size: var(--fontSize16);
  padding-block: 1.6rem;
  line-height: 1.875;
}

.section__img {
  margin-top: 5rem;
  img {
    width: 100%;
  }
}

.common__moreLink {
  font-size: var(--fontSize13);
  font-family: var(--fontBIZUDPGothic);
  letter-spacing: 0.065em;
  position: relative;
  padding-left: 6rem;
  display: grid;
  height: 4rem;
  align-items: center;
  margin-top: 2rem;
  width: fit-content;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 4rem;
    height: 4rem;
    transform: translateY(-50%);
    background-image: url(../../common/img/icon-arrow-link-right.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: 0.3s;
  }
  &.arrow-right {
    width: fit-content;
    padding-inline: 0 5rem;
    &::before {
      left: unset;
      right: 0;
    }
  }
  &:hover {
    opacity: 1;
    &::before {
      transform: translateX(10%) translateY(-50%);
    }
  }
}

.common__BlueLink {
  height: 6rem;
  text-align: center;
  max-width: 30rem;
  width: 100%;
  border: 1px solid var(--colorBlue);
  position: relative;
  font-size: var(--fontSize16);
	font-family: var(--fontBIZUDPGothic);
  letter-spacing: 0.065em;
  color: var(--colorBlue);
  background: var(--colorWhite);
  border-radius: 4rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.375;
  &::after {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background-image: url(../../common/img/icon-arrow-blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 1.28rem;
    height: 1.28rem;
  }
  &:hover {
    background: var(--colorBlue);
    color: var(--colorWhite);
    opacity: 1;
    &::after {
      background-image: url(../../common/img/icon-arrow-white.svg);
    }
  }
}

/* =============================
  一覧
=================================*/

.card {
  background: var(--colorWhite);
  padding: 0 8rem 4rem;
  display: grid;
  border-radius: 4rem;
  .card__hgroup {
    position: absolute;
    transform: translateX(-50%) translateY(-71%);
    text-align: center;
		width: 100%;
    left: 50%;
    p {
      font-size: var(--fontSize20);
      font-family: var(--fontBIZUDPGothic);
      line-height: 1.75;
      letter-spacing: 0.1em;
    }
    h2 {
      font-size: var(--fontSize28);
      font-family: var(--fontBIZUDPGothic);
      line-height: 1.75;
      letter-spacing: 0.1em;
      color: var(--colorOrange);
    }
  }
  .card__text {
    font-size:var(--fontSize16);
    line-height: 1.875;
    letter-spacing: 0.025em;
    margin-top: 4rem;
  }
  .cardColumn {
    display: grid;
    grid-template-columns: 34.7% auto;
    gap: 4rem;
    margin-top: 4rem;
    .cardColumn__img {
      img {
        border-radius: 1rem;
      }
    }
    .cardColumn__textarea {
      .cardColumn__header {
        padding-bottom: 1.6rem;
        border-bottom: 1px solid var(--colorBlack);
        p {
          font-size: var(--fontSize13);
          font-family: var(--fontBIZUDPGothic);
					font-weight: 700;
          letter-spacing: 0.05em;
          color: var(--colorBlue);
        }
        h3 {
          font-size: var(--fontSize20);
          font-family: var(--fontBIZUDPGothic);
          line-height: 1.6;
          letter-spacing: 0.1em;
        }
      }
      .cardColumn__text {
        font-size: var(--fontSize16);
        font-family: var(--fontBIZUDPGothic);
        letter-spacing: 0.025em;
        line-height: 1.875;
        margin-top: 1.6rem;
      }

    }
  }
  .common__BlueLink {
    margin-top: 4rem;
  }
  @media (max-width:767px) {
    padding-inline: 2rem;
    border-radius: 2rem;
    .card__hgroup {
      width: 80%;
    }
    .cardColumn {
      grid-template-columns: 1fr;
    }
  }
}



/* =============================
  intro
=================================*/
#intro {
  line-height: 2;
  padding: 2rem 0 6rem;
  .intro__title {
    border-bottom: 1px solid var(--colorOrange);
    color: var(--colorOrange);
    font-size: 2.8rem;
    font-weight: normal;
    text-align: start;
    letter-spacing: 0.1em;
		line-height: 1.75;
		padding-bottom: 0.7rem;
  }
  .intro__text {
    margin-top: 2.0rem;
    font-size: var(--fontSize16);
    letter-spacing: 0.1em;
    .intro__notes {
      font-size: var(--fontSize13);
    }
  }
  .intro__img {
    margin: 2rem auto 0;
  }
  @media screen and (max-width: 767px) {
    .intro__title {
      font-size: 5.3vw;
      line-height: 1.4;
    }
  }
}

#intro {
	.intro__column {
		display: grid;
		gap: 3rem;
		grid-template-columns: auto 28rem;
		margin-top: 2rem;
		.intro__text {
			margin-top: 0;
		}
		.intro__img {
			margin-top: 0;
		}
	}
	@media (max-width:767px) {
		.intro__column {
			grid-template-columns: 1fr;
		}
	}
}

/* =============================
  こんなお悩みの解決に
=================================*/
#solution__content {
  background: var(--colorWhite);
  padding-top: 8rem;

  .solution__contentWrap {
    display: grid;
    gap: 8rem;
    grid-template-columns: 1fr 1fr;
    margin-top: 10rem;
    position: relative;

    .solutionTask__wrap {
      position: relative;

      &::after {
        border-bottom: 3rem solid transparent;
				border-left: 3rem solid var(--colorBlack);
				border-right: 0;
				border-top: 3rem solid transparent;
				content: "";
				height: 6rem;
				right: -7rem;
				position: absolute;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 3rem;
      }

      .solution__listTitle {
        background-color: #f1924c;

        &::before {
          background-image: url("../../solution/img/agentforce/solution_img02.png");
        }
      }

      .solution__listItem {
        border-bottom: 1px solid #f1924c;

        &::before {
          background-image: url("../../solution/img/majorflow/solution-list_icon01.png");
        }
      }
    }

    .solutionPlan__wrap {
      .solution__listTitle {
        background-color: #4ca7d9;

        &::before {
          background-image: url("../../solution/img/agentforce/solution_img01.png");
        }
      }

      .solution__listItem {
        border-bottom: 1px solid #4ca7d9;

        &::before {
          background-image: url("../../solution/img/majorflow/solution-list_icon02.png");
        }
      }
    }
  }

  .solution__listTitle {
    border-radius: 20px 20px 0 0;
    color: var(--colorWhite);
    font-size: var(--fontSize28);
    padding: 1rem 0;
    position: relative;
    text-align: center;

    &::before {
      background-size: cover;
      bottom: 0;
      content: "";
      height: 13rem;
      left: 6rem;
      position: absolute;
      width: 12rem;
    }
  }

  .solution__list {
    background-color: var(--colorGray);
    border-radius: 0 0 20px 20px;
    font-size: var(--fontSize20);
    padding: 2rem 4rem;
    height: calc(100% - 6.5rem);
    
    .solution__listItem {
      display: flex;
      min-height: 13.7rem;
      padding-block: 2rem;
      
      &::before {
        background-size: cover;
        content: "";
        display: block;
        height: 2rem;
        margin: 0.5rem;
        padding-right: 2rem;
        width: 2rem;
      }

      &:last-child {
        border: none;
      }
    }
    &.solution__list--small {
      .solution__listItem {
        min-height: 10rem;
      }
    }
  }
  @media screen and (max-width: 767px) {
    .solution__contentWrap {
      grid-template-columns: 1fr;
      gap: 8rem;
       .solutionTask__wrap {
        &::after {
          border-bottom: 0;
          border-left: 5vw solid transparent;
          border-right: 5vw solid transparent;
          border-top: 6vw solid var(--colorBlack);
          height: 6vw;
          top: unset;
          bottom: -5rem;
          left: 50%;
          transform: translateX(-50%);
          width: 10vw;
        }
       }

      .solution__listItem {
        height: fit-content;  
      }
    }
    .solution__listTitle {
          &::before {
            background-size: cover;
            height: 28vw;
            left: 3vw;
            width: 26vw;
          }
    }
    .solution__list {
        padding: 4vw;
    }
  }
}


/* =============================
  概要
=================================*/
#overview {
  background: var(--colorWhite);
  padding-block: 8rem;

  .overview__tableDescription {
    padding-block: 1.6rem;
    text-align: center;
    &.text-left {
      text-align: start;
    }
  }

  .overview__tableWrap {
    display: block;
    margin-top: 2.4rem;
    overflow: hidden;

    .overview__table {
      border-collapse: separate;
      border-spacing: 0.5rem;
      width: 100%;
			tbody {
				display: grid;
				gap: 4rem;
				.overview__tableRow {
					position: relative;
					&::after {
						content: "";
						position: absolute;
						left: 50%;
						bottom: -3.4rem;
						display: inline-block;
						vertical-align: middle;
						color: var(--colorBlack);
						line-height: 1;
						width: 0;
						height: 0;
						border-style: solid;
						border-color: transparent;
						border-width: 3rem;
						border-top-color: currentColor;
						border-bottom: 0;
					}
					&:nth-last-child(1) {
						&::after {
							content: none;
						}
					}
					.overview__tableHead {
						background-color: #f1924c;
						color: var(--colorWhite);
						font-size: var(--fontSize20);
						padding-block: 2rem;
						text-align: center;
						vertical-align: middle;
						width: 26rem;
						border-radius: 2rem 0 0 2rem;
						span {
							font-size: 1.8rem;
						}
					}

					.overview__tableText {
						background-color: var(--colorGray);
						padding: 2rem 4rem;
						border-radius:  0 2rem 2rem 0;
						.line {
							margin-block: 1rem;
							border-bottom: 1px solid var(--colorBlack);
							height: 1px;
						}
						span {
							color: var(--colorOrange);
						}
					}
				}
			}
      
      
    }
  }

  .overviewMajorflow__img {
    display: block;
    margin: 4rem auto;
    max-width: 81rem;
  }

  .overview__contentWrap {
    background-color: var(--colorGray);
    border-radius: 20px;
    margin-top: 0;
    padding: 4rem 3.5rem;
    position: relative;

    .overview__content {
      display: grid;
      gap: 2rem;
      grid-template-columns: repeat(3, 1fr);

      .overview__titleBorder {
        background-color: var(--colorBlack);
        border-radius: 5px;
        clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
        padding: 1px;

        .overview__title {
          border-radius: 5px;
          clip-path: polygon(0 0, 95% 0, 100% 50%, 95% 100%, 0 100%);
          color: var(--colorWhite);
          font-size: 2rem;
          padding-block: 1rem;
          text-align: center;

          &.overviewFlow__title {
            background-color: #4ca7d9;
          }

          &.overviewPrepare__title {
            background-color: #4cc9c3;
          }

          &.overviewTest__title {
            background-color: #f1924c;
          }
        }
      }

      .overview__list {
        background-color: var(--colorWhite);
        border-radius: 10px;
        margin-top: 2rem;
        padding-inline: 2rem;

        .overview__listItem {
          border-bottom: 1px solid var(--colorBlack);
          padding-block: 2rem;

          &:last-of-type {
            border: none;
          }
        }
      }
    }

    .overview__text {
      bottom: 4rem;
      font-size: var(--fontSize13);
      position: absolute;
      right: 2rem;
    }
  }
  .overviewListWrap {
    margin-top: 4rem;
    .overviewList__title {
      font-size: var(--fontSize20);
      font-family: var(--fontBIZUDPGothic);
      letter-spacing: 0.01em;
      color: var(--colorOrange);
      font-weight: 700;
      padding-bottom: 0.9em;
    }
    .overviewList {
      .overviewList__item {
        position: relative;
        line-height: 2.22222222;
        padding-left: 1.3em;
        &::before {
          position: absolute;
            content: "";
            position: absolute;
            width: 0.8rem;
            height: 0.8rem;
            background-color: var(--colorOrange);
            border-radius: 50%;
            left: 0;
            top: 0.8em;
        }
      }
      &.is-black {
        .overviewList__item {
          &::before {
            position: absolute;
            content: "";
            background-color: var(--colorBlack);
          }
        }
      }
      span {
        font-size: var(--fontSize13);
      }
    }
    .overviewList__img {
      padding-block: 4rem;
    }
    .overviewList__img--small {
      width: 80%;
      margin-inline: auto;
    }
    .overviewList__text {
      font-size: var(--fontSize18);
      line-height: 2;
      span {
        color: var(--colorOrange);
        font-weight: 700;
      }
    }
    .overviewList__word {
      background-color: #eef1f3;
      padding: 2.7rem 4rem 3.7rem;
      margin-top: 3rem;
			border-radius: 2rem;
      .overviewList__wordItem {
        margin-top: 3.5rem;
        &:nth-child(1) {
          margin-top: 0;
        }
        h4 {
          font-size:var(--fontSize18);
          line-height: 2.11111111;
          margin-bottom: 0.3em;
          font-weight: 700;
        }
        p {
          font-size: var(--fontSize15);
          line-height: 1.86666667;
        }
      }
    }
    .developmentTableWrap {
       .developmentTable {
          thead {
						border-radius: 2rem 2rem 0 0;
            tr {
							display: flex;
              th {
            		background-color: #4ca7d9;
                font-size: var(--fontSize18);
                color: var(--colorWhite);
                padding: 0.8em 0;
                border: none;
								display: flex;
								justify-content: center;
								border-left: 1px solid #e6e6e6;
                &:nth-child(1) {
                  width: 19%;
									border-radius: 1rem 0 0 0;
									border-left: none;
                }
                &:nth-child(2) {
                  width: 12%;
                }
                &:nth-child(3) {
                  width: 41%;
                }
                &:nth-child(4) {
                  width: 28%;
									border-radius: 0 1rem 0 0;
                }
              }
            }
          }
          tbody {
            tr {
							display: flex;
              td {
                font-size: var(--fontSize16);
                line-height: 1.5;
                text-align: left;
                vertical-align: middle;
                padding: 1em;
								display: flex;
								align-items: center;
								border: none;
                border-left: 1px solid #e6e6e6;
                border-bottom: 1px solid #e6e6e6;
								&:nth-child(1) {
                  width: 19%;
                }
                &:nth-child(2) {
                  width: 12%;
                  justify-content: center;
                }
                &:nth-child(3) {
                  width: 41%;
                }
                &:nth-child(4) {
                  width: 28%;
									border-right: 1px solid #e6e6e6;
                }
              }
							&:nth-last-child(1) {
								td:nth-child(1) {
									border-radius: 0 0 0 2rem;
								} 
								td:nth-last-child(1) {
									border-radius: 0 0 2rem 0;
								} 
							}
            }
          }
        }
    }
   
    .serviceList {
      background-color: #eef1f3;
      margin-top: 4rem;
			border-radius: 2rem;
      .serviceList__item { 
        padding: 3.7rem 4rem 3.7rem;
        align-items: flex-start;
        display: flex;
        justify-content: space-between;
        .serviceList__img {
          width: 28%;
					border-radius: 1rem;
					background: var(--colorWhite);
					display: flex;
					justify-content: center;
					align-items: center;
					img {
						border-radius: 1rem;
					}
        }
        .serviceList__textarea {
          width: 67%;
          .serviceList__text {
            line-height: 1.88888889;
            margin-bottom: 2rem;
            font-size: var(--fontSize18);
          }
          .serviceList__linkWrap {
            .serviceList__link {
              font-size: var(--fontSize16);
              font-weight: bold;
              display: inline-block;
              padding: 0 0.38888889em 0.22222222em 1.66666667em;
              background-image: url(/salesforce/common/img/arrow-right-black.svg);
              background-repeat: no-repeat;
              background-position: left 0.4em top 0.225em;
              position: relative;
              &::before {
                content: '';
                display: block;
                position: absolute;
                top: auto;
                bottom: -0.22222222em;
                height: 1px;
                left: 0;
                width: 100%;
                background: #000;
                -webkit-transform-origin: 100% 0;
                transform-origin: 100% 0;
              }
              &:nth-child(2) {
                margin-left: 1rem;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 767px) {
    padding-block: 5rem;
    .overviewListWrap {
      .developmentTableWrap {
        width: 100%;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
       .developmentTable {
        width: 800px;
          thead {
            tr {
              th {
                font-size: 3vw;
              }
            }
						tbody {
							tr {
								td {
									font-size: 3vw;
								}
							}
						}
            
          }
        }
      }

    }
    .overview__tableWrap {
      margin-top: 1.5rem;

      .overview__table {
        border-spacing: 0.2rem;
				tbody {
					.overview__tableRow {
						display: grid;
						&::after {
							transform: translateX(-50%);
							bottom: -3rem;
							border-width: 2rem;
						}
						.overview__tableHead {
							width: 100%;
							padding-block: 1.2rem;
							border-radius: 2rem 2rem 0 0;
						}

						.overview__tableText {
							padding: 1.5rem;
							border-radius: 0 0 2rem 2rem;
						} 
					}
				}
        

        
      }
    }

    .overviewMajorflow__img {
      width: 90%;
      max-width: none;
      margin: 3rem auto;
    }

    .overview__contentWrap {
      padding: 2rem;
      margin-top: 2rem;

      .overview__content {
        grid-template-columns: 1fr;
        gap: 1.5rem;

        .overview__titleBorder {
          .overview__title {
            padding-block: 0.8rem;
          }
        }

        .overview__list {
          padding-inline: 1rem;
          margin-top: 1rem;

          .overview__listItem {
            padding-block: 1.2rem;
          }
        }
      }

      .overview__text {
        position: static;
        margin-top: 1.5rem;
        text-align: right;
      }
    }
    .overviewListWrap {
      .serviceList { 
          .serviceList__item {
            flex-wrap: wrap;
            padding: 7vw 7vw 9vw;
            .serviceList__img {
              width: 100%;
              margin-bottom: 5vw;
            }
            .serviceList__textarea {
              width: 100%;
              .serviceList__linkWrap {
                display: flex;
                justify-content: center;
              }
            }
          }
      }
    }
  }
}

/* =============================
  関連リンク
=================================*/
#service__link {
  background-color: var(--colorGray);

  .service__linkWrap {
    padding-block: 8rem 12rem;
    text-align: center;

    .service__linkTitle {
      color: var(--colorOrange);
      font-size: var(--fontSize28);
      font-weight: normal;
      text-align: center;
    }

    .service__linkBtnWrap {
      display: block;
      margin: 4rem auto 0;
      width: 100%;
			max-width: 53rem;

      .service__linkBtnText {
        background-color: #f1924c;
        border-radius: 2rem 2rem 0 0;
        color: var(--colorWhite);
        font-size: var(--fontSize20);
        padding: 2rem;
        position: relative;

        &::after {
          background-image: url("../img/agentforce/service-link_arrow.png");
          background-size: cover;
          content: "";
          display: block;
          height: 2rem;
          position: absolute;
          right: 2rem;
          top: 50%;
          transform: translateY(-50%);
          width: 2rem;
        }
      }

      .service__linkImg {
        overflow: hidden;
        border-radius: 0 0 2rem 2rem;

        img {
          transition: 0.3s;
          width: 100%;
        }
      }

      &:hover {
        opacity: 1;

        .service__linkImg img {
          transform: scale(1.05);
        }
      }
    }
  }
  @media screen and (max-width: 767px) {
    .service__linkWrap {
      .service__linkBtnWrap {
        width: 86.4%;
        .service__linkBtnText {
          font-size: var(--fontSize18);
          border-radius: 2rem 2rem 0 0;
        }
        .service__linkImg {
          border-radius: 0 0 2rem 2rem;
        }
      }
    }
  }
}

/* =============================
  スケジュール
=================================*/
#schedule {
  padding-block: 8rem;
  background: var(--colorWhite);
  @media screen and (max-width: 767px) {
    padding-block: 3rem;
  }
}

/* =============================
  価格
=================================*/
#price {
  padding-block: 8rem;
  background: var(--colorWhite);
  @media screen and (max-width: 767px) {
    padding-block: 3rem;
  }
}

/* =============================
  作業内容と概要
=================================*/
#work {
  padding-block: 8rem;
  background: var(--colorWhite);
  .workTable {
    margin-top: 5rem;
    width: 100%;
    thead {
      tr {
				display: flex;
        th {
          background: #4ca7d9;
          color: var(--colorWhite);
          font-size: var(--fontSize18);
          font-weight: 700;
          text-align: center;
          padding: 1.4em 0;
					width: 50%;
					&:nth-child(1) {
						border-radius: 2rem 0 0 0;
					}
					&:nth-child(2) {
						border-radius: 0 2rem  0 0;
						border-left: 1px solid #e6e6e6;
					}
        }
      }
    }
    tbody {
      tr {
				display: flex;
        td {
          padding: 0.8em 1em 0.8em 4.3em;
          border: 1px solid #e6e6e6;
          vertical-align: middle;
					display: flex;
					align-items: center;
					width: 50%;
					border-bottom: none;
					&:nth-child(1) {
						border-right: none;
					}
        }
				&:nth-last-child(1) {
						td {
							border-bottom: 1px solid #e6e6e6;
						}
						td:nth-child(1) {
							border-radius: 0 0 0 2rem;
						}
						td:nth-child(2) {
							border-radius: 0 0 2rem 0;
						}
				}
      }
    }
  }
  @media screen and (max-width: 767px) {
    padding-block: 3rem;
    .workTable {
      tbody {
        tr {
          td {
            padding-left: 0.8em;
          }
        }
      }
    }
  }
}


/* =============================
  前提条件
=================================*/

#prerequisites {
  padding-block: 8rem;
  background: var(--colorWhite);
  .prerequisitesList {
    margin-top: 5rem;
    .prerequisitesList__item {
      line-height: 2.22222222;
      padding-left: 1.3em;
      position: relative;
      display: grid;
      &::before {
        content: "";
        position: absolute;
        width: 0.8rem;
        height: 0.8rem;
        background-color: var(--colorOrange);
        border-radius: 50%;
        left: 0;
        top: 0.9em;
      }
      .prerequisitesList__link {
        color: #0082c9;
      }
    }
  }
  @media screen and (max-width: 767px) {
    padding-block: 3rem;
  }
}


/* =============================
  breadcrumb
=================================*/
.breadcrumb {
  padding-block: 1.5rem;
  .breadcrumbList {
    display: flex;
    flex-wrap: wrap;
    gap:1rem 4rem;
    .breadcrumbList__item {
      font-size: 1.3rem;
      font-family: var(--fontBIZUDPGothic);
      letter-spacing: 0.1em;
      position: relative;
      &::after {
        position: absolute;
        content: "";
        right: -2rem;
        top: 50%;
        transform: translateY(-50%);
        display: inline-block;
        vertical-align: middle;
        color: var(--colorBlue);
        line-height: 1;
        width: 0.7em;
        height: 0.7em;
        border: 0.1em solid currentColor;
        border-left: 0;
        border-bottom: 0;
        box-sizing: border-box;
        transform: translateY(-50%) rotate(45deg);
      }
      &:nth-last-child(1) {
        content: none;
        &::after {
          content: none;
        }
      }
    }
  }
}
/* =============================
  contact
=================================*/
#contact {
  padding-block: 10rem 18rem;
  background-image: url(../img/img-contact_bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  .contact__title {
    font-size: var(--fontSize44);
    font-family: var(--fontBIZUDPGothic);
    letter-spacing: 0.08em;
    line-height: 1;
    text-align: center;
    color: var(--colorBlue);
  }
  .contact__text {
    font-size: var(--fontSize16);
    font-family: var(--fontBIZUDPGothic);
    line-height: 1.875;
    letter-spacing: 0.08em;
    margin-top: 3.2rem;
    text-align: center;
  }
  .common__BlueLink {
    margin-top: 4rem;
  }
  @media (max-width:767px) {
    background-position: bottom;
    background-size: contain;
    padding-block: 4rem 10rem;
  }
}

/* =============================
  footer
=================================*/
:host,
:root {
  --base-font-size: 10px;
  --body-font-size: 16px;
  --body-line-height: 1.6;
  --body-font-family: "YuGothic", "Yu Gothic", "Yu Gothic Medium",  "游ゴシック体", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  --body-display: flex;
  --body-flex-direction: column;
  --body-min-height: 100vh;
  --body-color: #606269;
  --body-overflow-wrap: anywhere;
  --body-word-break: normal;
  --body-line-break: strict;
  --hdvw: 10px;
}

@media (max-width: 1300px) {
  :host,
  :root {
    --hdvw: 0.76923077vw;
  }
}

@media screen and (min-width: 768px) and (max-width: 1158px) {
  :host,
  :root {
    --base-font-size: calc(1.3816925734vw * 0.625);
    --body-font-size: 1.3816925734vw;
  }
}

@media (max-width: 767px) {
  :host,
  :root {
    --hdvw: 2.67vw;
    --base-font-size: calc(3.7333333333vw * 0.625);
    --body-font-size: 3.7333333333vw;
  }
}

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

.common-btn {
    border: 1px solid;
    padding: 1.6rem 4.8rem;
    border-radius: 9999px;
    display: inline-block;
    position: relative;
    min-width: 30rem;
    text-align: center;
    font-size: 1.6rem;
    font-family: "BIZ UDPGothic", sans-serif;
    font-weight: normal;
    transition: background-color .3s, color .3s;
}

.common-btn:hover {
	opacity: 1;
}

.common-btn::after {
    content: "";
    display: block;
    width: 1.6rem;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../img/arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2rem;
    transition: filter .1s;
}

.footer_nav {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  overflow-wrap: var(--body-overflow-wrap);
  word-break: var(--body-word-break);
  line-break: var(--body-line-break);
  background-color: #606269;
  color: #fff;
  font-family: "BIZ UDPGothic", sans-serif;
  padding: calc(7.4 * var(--base-font-size)) 0 calc(7.6 * var(--base-font-size));
}

.footer_nav .footer_nav__list {
  flex-direction: column;
  justify-content: flex-start;
  row-gap: calc(3.2 * var(--base-font-size));
}

.footer_nav .footer_nav__list:where(:not(:has(.footer_nav__item_sub_list))) {
  row-gap: calc(2.4 * var(--base-font-size));
}

.footer_nav .footer_nav__item_link {
  display: block;
}

.footer_nav .footer_nav__item_link:where(:has(+.footer_nav__item_sub_list)) {
  margin-bottom: calc(0.8 * var(--base-font-size));
}

.footer_nav .footer_nav__item_link:where(.common-btn) {
  margin-top: calc(0.4 * var(--base-font-size));
  padding: calc(1.6 * var(--base-font-size)) calc(4.8 * var(--base-font-size));
  min-width: calc(30 * var(--base-font-size));
  font-size: var(--body-font-size);
}

.footer_nav .footer_nav__item_link:where(.common-btn)::after {
  width: calc(1.6 * var(--base-font-size));
  filter: invert(100%) sepia(17%) saturate(1%) hue-rotate(310deg)
    brightness(107%) contrast(101%);
}

@media (hover: hover) {
  .footer_nav .footer_nav__item_link:where(.common-btn):hover {
    background-color: #fff;
    color: #606269;
  }

  .footer_nav .footer_nav__item_link:where(.common-btn):hover::after {
    filter: invert(38%) sepia(3%) saturate(904%) hue-rotate(189deg)
      brightness(94%) contrast(84%);
  }
}

.footer_nav .footer_nav__item_sub_item {
  line-height: 1.3;
}

.footer_nav .footer_nav__item_sub_item_link {
  font-size: calc(1.3 * var(--base-font-size));
}

@media screen and (max-width: 767px) {
  .footer_nav {
    padding: 0;
  }

  .footer_nav .footer_nav__inner {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
  }

  .footer_nav .footer_nav__list {
    width: 100%;
    row-gap: 0;
  }

  .footer_nav .footer_nav__list:nth-child(n + 2) {
    border-top: 1px solid;
  }

  .footer_nav .footer_nav__list:last-child {
    border-bottom: 1px solid;
  }

  .footer_nav .footer_nav__item {
    padding: 4.9vw 0 0;
    position: relative;
  }

  .footer_nav .footer_nav__item:nth-child(n + 2) {
    border-top: 0.2666666667vw solid;
  }

  .footer_nav .footer_nav__item:has(.footer_nav__item_link[target=_blank])::after {
    content: "";
    display: block;
    position: absolute;
    width: 3vw;
    height: auto;
    aspect-ratio: 49 / 50;
    background-image: url(../img/external_link.svg);
    background-repeat: no-repeat;
    background-size: contain;
    filter: invert(100%) sepia(0%) saturate(7500%) hue-rotate(52deg)
      brightness(105%) contrast(101%);
    transform: translateY(-50%);
    right: 4.8vw;
    top: 50%;
  }

  .footer_nav .footer_nav__item_link {
    padding: 0 5.6vw 4.9vw;
    margin-bottom: 0;
    position: relative;
  }

  .footer_nav .footer_nav__item_link:has(+.footer_nav__item_sub_list)::before,
  .footer_nav .footer_nav__item_link:has(+.footer_nav__item_sub_list)::after {
    content: "";
    position: absolute;
    right: 5vw;
    top: 25%;
    background-color: #fff;
    width: 2.8vw;
    height: 0.4vw;
    transition: all 0.3s;
  }

  .footer_nav .footer_nav__item_link:has(+.footer_nav__item_sub_list)::after {
    transform: rotate(90deg);
  }

  .footer_nav .footer_nav__item_link:has(+.footer_nav__item_sub_list).is-active::after {
    transform: none;
  }

  .footer_nav .footer_nav__item_link.common-btn {
    margin-top: 0;
    border: none;
    text-align: left;
  }

  .footer_nav .footer_nav__item_link.common-btn::after {
    content: none;
  }

  .footer_nav .footer_nav__item_link_btn {
    height: 11.6vw;
    aspect-ratio: 1 / 1;
    width: auto;
    position: absolute;
    right: 1vw;
    bottom: 1.8vw;
    display: block;
    z-index: 2;
  }

  .footer_nav .footer_nav__item_sub_list {
    border-top: 1px solid;
    display: none;
  }

  .footer_nav .footer_nav__item_sub_item_link {
    font-size: 3.7333333333vw;
    display: inline-block;
    padding: 3.5vw 0;
    width: 100%;
    padding-left: 10vw;
    padding-right: 5.8vw;
    position: relative;
    border-bottom: 1px solid;
  }

  .footer_nav .footer_nav__item_sub_item_link:where(.footer_nav__item_sub_item:last-child *) {
    border-bottom: none;
  }

  .footer_nav .footer_nav__item_sub_item_link::before {
    content: "";
    position: absolute;
    display: block;
    width: 1.6em;
    height: auto;
    aspect-ratio: 1 / 1;
    background-image: url(../img/circle_arrow.png);
    background-repeat: no-repeat;
    background-size: cover;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }

  .footer_nav .footer_nav__item_sub_item {
    padding: 0 5.6vw;
  }
}

.gotop {
  position: fixed;
  bottom: 6.4rem;
  right: 4.2rem;
  z-index: 9998;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #0082c9;
  width: 6rem;
  aspect-ratio: 1 / 1;
  height: auto;
  transition: visibility 0.3s, opacity 0.3s, background-color 0.3s;
}

.gotop::after {
  content: "";
  position: absolute;
  display: block;
  width: 1.2rem;
  height: auto;
  aspect-ratio: 14 / 25;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/arrow_short_blue.svg);
  transform: translate(-50%, -50%) rotate(-90deg);
  left: 50%;
  top: 50%;
  transition: background-image 0.3s;
}

.gotop--active {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

@media (hover: hover) {
  .gotop:hover {
    background-color: #0082c9;
  }

  .gotop:hover::after {
    background-image: url(../img/arrow_short_blue.svg);
  }
}

@media screen and (max-width: 767px) {
  .gotop {
    bottom: 7.4vw;
    right: 5.4vw;
    width: 13.8vw;
  }

  .gotop::after {
    width: 2.4vw;
  }
}

#footer {
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  color: var(--body-color);
  overflow-wrap: var(--body-overflow-wrap);
  word-break: var(--body-word-break);
  line-break: var(--body-line-break);
  font-family: "BIZ UDPGothic", sans-serif;
  position: relative;
  padding: calc(1.75 * var(--base-font-size)) 0 calc(5.4 * var(--base-font-size));
  background-color: #fff;
}

#footer .footer__menu {
  font-size: calc(1.3 * var(--base-font-size));
  align-items: center;
  gap: 3em;
}

#footer .footer__menu_list {
  align-items: center;
  gap: 0 1.2em;
}

#footer .footer__menu_item {
  position: relative;
}

#footer .footer__menu_item:nth-child(n + 2)::before {
  content: "|";
  position: absolute;
  display: block;
  font-size: 100%;
  right: calc(100% + 0.65em);
  transform: translateX(50%);
}

#footer .footer__menu_copyright {
  font-family: "Prompt", sans-serif;
  font-weight: 400;
  font-size: calc(1.3 * var(--base-font-size));
}

@media screen and (max-width: 767px) {
  #footer {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
  }

  #footer .footer__inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 0;
    flex-direction: column-reverse;
  }

  #footer .footer__corporate_link {
    font-size: 3.7333333333vw;
    background-color: #606269;
    color: #fff;
    width: 100%;
    padding: 3.8vw 5.6vw;
    border-bottom: 1px solid #909196;
  }

  #footer .footer__corporate_link::after {
    top: 50%;
    transform: translateY(-50%);
    filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(18deg)
      brightness(106%) contrast(102%);
    right: 5vw;
    width: 3vw;
  }

  #footer .footer__menu {
    order: 0;
    font-size: 2.9333333333vw;
    width: 100%;
    gap: 0;
  }

  #footer .footer__menu_list {
    gap: 3.2vw 0;
    background-color: #606269;
    color: #fff;
    width: 100%;
    padding: 4vw 5.6vw;
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
  }

  #footer .footer__menu_item {
    padding-right: 6vw;
  }

  #footer .footer__menu_item:nth-child(n + 2)::before {
    content: none;
  }

  #footer .footer__to_top_link {
    width: 13.6vw;
    aspect-ratio: 1 / 1;
    position: fixed;
    height: auto;
    padding-top: 0;
    background-color: #fff;
    border-radius: 50%;
    bottom: 6.5vw;
    right: 5.5vw;
    border: 1px solid #0082c9;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: visibility 0.3s, opacity 0.3s;
  }

  #footer .footer__to_top_link--active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  #footer .footer__logo {
    display: none;
  }

  #footer .footer__menu_copyright {
    letter-spacing: 0.08em;
    flex: 1;
    white-space: nowrap;
    padding: 4.6vw 5.2vw;
    width: 100%;
  }

  #footer .footer__to_top_link_img {
    width: 2.4vw;
    transform: rotateZ(-90deg) translateX(0.3vw);
    filter: invert(32%) sepia(94%) saturate(1103%) hue-rotate(173deg)
      brightness(98%) contrast(105%);
  }

  #footer .footer__to_top_txt {
    width: 100%;
  }
}