.service-page {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
height: 100%;
margin: 0px;
padding: 0px;
width: 100%;
}

.service-flow {
background: var(--color-bg-white);
margin: 120px 0px 0px;
padding: 0px;
max-width: 1080px;
width: 100%;
}

.service-flow__inner {
padding: 0px;
max-width: 1080px;
width: 100%;
}

.service-flow__inner.appear {
flex-direction: column;
}

.service-flow .section-heading {
align-items: center;
margin: 0px 0px 48px;
}

.service-flow .section-heading__en {
text-align: center;
margin: 0px;
width: 100%;
}

.service-flow .section-heading__line {
margin: 10px auto;
}

.service-flow .section-heading__ja {
text-align: center;
margin: 0px;
width: 100%;
}

.service-flow__nav {
place-content: center space-around;
align-items: center;
background: rgb(255, 250, 234);
border-radius: var(--radius-lg);
flex-flow: row;
height: 84px;
max-width: 900px;
width: 100%;
}

.service-flow__link {
flex-flow: row;
place-content: center;
height: 50px;
width: 210px;
}

.service-flow__icon {
background: var(--color-accent);
border-radius: var(--radius-full);
height: 48px;
justify-content: center;
margin: 0px;
width: 48px;
}

.service-flow__icon-img {
height: 24px;
width: 24px;
}

.service-flow__icon-img::before {
background-repeat: no-repeat;
background-size: contain;
}

.service-flow__label {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column;
margin: 0px 0px 0px 24px;
padding: 0px;
max-width: calc(100% - 24px);
}

.service-flow__label-ja {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-md);
font-weight: 700;
line-height: 1.4;
text-align: center;
}

.service-flow__label-en {
color: var(--color-text);
font-family: var(--font-jp);
font-size: 10px;
font-weight: 700;
line-height: 1.4;
text-align: center;
}

.service-planning {
place-content: center flex-end;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
margin: 80px 0px 0px;
padding: 80px 0px 0px;
}

.service-planning__inner {
padding: 0px;
flex-flow: column;
place-content: center flex-end;
align-items: center;
}

.service-phase__header {
flex-flow: row;
place-content: center;
margin: 0px 0px 40px;
padding: 0px;
max-width: 880px;
width: 100%;
}

.service-phase__icon {
background: var(--color-accent);
border-radius: var(--radius-2xl);
height: 120px;
justify-content: center;
width: 120px;
}

.service-phase__icon-img {
height: 64px;
padding: 0px;
width: 64px;
}

.service-phase__icon-img::before {
background-repeat: no-repeat;
background-size: contain;
}

.service-phase__title-wrap {
place-content: flex-start flex-end;
align-items: flex-start;
flex-flow: column;
padding: 0px 0px 0px 24px;
}

.service-phase__title-ja {
color: var(--color-text);
font-family: var(--font-accent);
font-size: var(--fs-3xl);
font-weight: 700;
letter-spacing: 0.15em;
line-height: 1;
text-align: left;
}

.service-phase__title-en {
color: rgb(0, 0, 0);
font-family: var(--font-heading);
font-size: var(--fs-base);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.4;
margin: 12px 0px 0px;
padding: 0px 0px 0px 8px;
text-align: left;
}

.service-planning__desc {
color: rgb(0, 0, 0);
font-family: var(--font-jp);
font-size: var(--fs-lg);
font-weight: 500;
letter-spacing: 0.1em;
line-height: 1.8;
margin: 12px 0px 80px;
padding: 0px 0px 0px 8px;
text-align: center;
}

.service-plan-step {
place-content: center space-between;
align-items: center;
background: var(--color-bg-white);
flex-flow: row;
gap: 48px;
margin: 0px 0px 64px;
max-width: 880px;
width: 100%;
}

.service-plan-step__image {
border-radius: 96px;
height: 260px;
width: 460px;
object-fit: cover;
}

.service-plan-step__content {
place-content: flex-start;
align-items: flex-start;
background: var(--color-bg-white);
flex-flow: column;
gap: 16px;
width: 346px;
}

.service-plan-step__header {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column;
padding: 0px;
width: 100%;
}

.service-step__number {
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-base-sm);
font-weight: 400;
letter-spacing: 0.08em;
line-height: 1.4;
text-align: left;
}

.service-step__divider {
background: var(--color-accent);
border-radius: var(--radius-md);
height: 1px;
margin: 0px;
width: 46px;
}

.service-plan-step__name {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-lg);
font-weight: 600;
line-height: 1.4;
margin: 8px 0px 0px;
text-align: left;
width: 257px;
}

.service-plan-step__desc {
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-base);
font-weight: 400;
line-height: 1.85;
padding: 0px;
text-align: left;
width: 100%;
}

.service-production {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
margin: 40px 0px 0px;
padding: 0px;
max-width: 880px;
width: 100%;
}

.service-production__inner {
padding: 0px;
max-width: 880px;
width: 100%;
flex-flow: column;
place-content: center flex-start;
align-items: center;
}

.service-production__desc {
color: rgb(0, 0, 0);
font-family: var(--font-heading);
font-size: var(--fs-lg);
font-weight: 700;
letter-spacing: 0.1em;
line-height: 1.8;
margin: 12px 0px 80px;
padding: 0px 0px 0px 8px;
text-align: center;
}

.service-production__separator {
flex-flow: row;
place-content: center;
margin: 0px 0px 67px;
padding: 0px;
}

.service-production__separator--bottom {
place-content: center space-between;
align-items: center;
flex-flow: row;
margin: 0px 0px 67px;
padding: 0px;
max-width: 880px;
width: 100%;
}

.service-prod-step {
place-content: stretch space-between;
align-items: stretch;
flex-flow: row;
margin: 0px 0px 64px;
padding: 0px;
transition-duration: 600ms;
transition-timing-function: var(--ease-sine);
width: 100%;
}

.service-prod-step__content {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column;
line-height: 1.7;
margin: 0px 48px 0px 0px;
padding: 0px;
width: 340px;
max-width: calc(100% - 48px);
}

.service-prod-step__content--step5 {
letter-spacing: 0.1em;
}

.service-prod-step__number {
color: rgb(0, 0, 0);
font-family: var(--font-sans);
font-size: var(--fs-base-sm);
font-weight: 400;
line-height: 1.4;
margin: 0px;
text-align: left;
width: 100%;
}

.service-prod-step__name {
color: rgb(0, 0, 0);
font-family: var(--font-jp);
font-size: var(--fs-lg);
font-weight: 700;
line-height: 1.4;
margin: 8px 0px 0px;
text-align: left;
width: 100%;
}

.service-prod-step__desc {
color: rgb(0, 0, 0);
font-family: var(--font-jp);
font-size: var(--fs-base);
font-weight: 400;
line-height: 1.85;
margin: 24px 0px 0px;
text-align: left;
width: 100%;
}

.service-prod-step__note {
background: rgb(245, 245, 245);
border-radius: var(--radius-md);
color: var(--color-text);
font-family: var(--font-jp);
font-size: var(--fs-xs);
font-weight: 500;
height: 30px;
line-height: 1.7;
margin: 24px 0px 0px;
padding: 0px;
text-align: center;
width: 100%;
}

.service-prod-step__image {
border-radius: 96px;
height: 260px;
width: 460px;
object-fit: cover;
}

.service-quality {
place-content: center flex-end;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
margin: 40px 0px 0px;
padding: 0px;
}

.service-quality__inner {
padding: 0px;
flex-flow: column;
place-content: center flex-end;
align-items: center;
}

.service-quality__content {
background: var(--color-bg-white);
margin: 0px;
padding: 0px;
width: 100%;
}

.service-quality__detail {
place-content: center space-between;
align-items: center;
background: var(--color-bg-white);
flex-flow: row;
gap: 48px;
margin: 0px 0px 64px;
max-width: 880px;
width: 100%;
}

.service-quality__image {
border-radius: 96px;
height: 260px;
width: 460px;
object-fit: cover;
}

.service-quality__text {
place-content: flex-start;
align-items: flex-start;
background: var(--color-bg-white);
flex-flow: column;
gap: 16px;
width: 346px;
}

.service-quality__text-header {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column;
padding: 0px;
width: 100%;
}

.service-quality__heading {
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 600;
letter-spacing: 0.1em;
line-height: 1.5;
margin: 8px 0px 0px;
text-align: left;
width: 100%;
}

.service-quality__examples {
background: rgb(245, 245, 245);
border-radius: 12px;
color: var(--color-text);
font-family: var(--font-heading);
font-size: var(--fs-sm);
font-weight: 400;
line-height: 1.7;
padding: 12px;
text-align: left;
width: 100%;
}

.service-products {
place-content: center flex-end;
align-items: center;
background: var(--color-bg-white);
flex-flow: column;
padding: 0px;
max-width: 927px;
width: 100%;
}

.service-products__inner {
padding: 0px;
max-width: 927px;
width: 100%;
flex-flow: column;
place-content: center flex-end;
align-items: center;
}

.service-products__wrap {
background: var(--color-bg-white);
margin: 0px;
padding: 0px;
width: 100%;
}

.service-products__container {
margin: 0px 0px 80px;
padding: 40px 0px;
max-width: 960px;
width: 100%;
}

.service-products__title {
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-lg);
font-weight: 700;
line-height: 1.4;
margin: 0px 0px 24px;
text-align: center;
}

.service-products__carousel {
place-content: center flex-start;
align-items: center;
flex-flow: row;
padding: 0px;
}

.service-products__prev {
background: var(--color-bg-white);
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
border-radius: var(--radius-full);
cursor: pointer;
display: none;
height: 50px;
margin: 0px 16px 0px 0px;
padding: 0px;
width: 50px;
max-width: calc(100% - 16px);
}

.service-products__prev:hover {
background: rgb(0, 0, 0);
}

.service-products__prev-icon {
color: var(--color-text);
font-size: var(--fs-xl);
}

.service-products__prev:hover .service-products__prev-icon {
color: var(--color-white);
}

.service-products__track {
place-content: center flex-start;
align-items: center;
flex-flow: row;
overflow: hidden;
padding: 0px;
max-width: 750px;
width: 100%;
}

.service-products__slide {
place-content: center flex-start;
align-items: center;
flex-flow: row;
padding: 0px;
}

.service-product__card {
place-content: flex-start flex-end;
align-items: flex-start;
flex-flow: column-reverse;
}

.service-product__card--first {
place-content: flex-start flex-end;
align-items: flex-start;
flex-flow: column-reverse;
}

.service-product__card--spaced {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column-reverse;
margin: 0px 0px 0px 16px;
max-width: calc(100% - 16px);
}

.service-product__card--wide {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column-reverse;
margin: 0px 0px 0px 16px;
width: 240px;
max-width: calc(100% - 16px);
}

.service-product__label {
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-xs);
font-weight: 400;
line-height: 1.4;
margin: 12px 0px 0px;
text-align: center;
}

.service-product__img {
height: 160px;
width: 240px;
object-fit: cover;
}

.service-product__img--first {
object-position: left bottom;
}

.service-products__slide-group {
place-content: center flex-start;
align-items: center;
flex-flow: row;
margin: 0px 0px 0px 16px;
padding: 0px;
max-width: calc(100% - 16px);
}

.service-products__slide-group--last {
flex-flow: row;
place-content: center;
margin: 0px 0px 0px 16px;
padding: 0px;
max-width: calc(100% - 16px);
}

.service-products__slide-inner {
flex-flow: row;
place-content: center;
padding: 0px;
}

.service-products__scroll-wrap {
flex-flow: row;
place-content: center;
margin: 0px 0px 0px 16px;
overflow: auto hidden;
padding: 0px;
max-width: calc(100% - 16px);
}

.service-products__scroll-inner {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column-reverse;
margin: 0px 0px 0px 16px;
max-width: calc(100% - 16px);
}

.service-products__next {
background: var(--color-bg-white);
border-width: 1px;
border-style: solid;
border-color: rgb(0, 0, 0);
border-radius: var(--radius-full);
cursor: pointer;
display: none;
height: 50px;
margin: 0px 0px 0px 16px;
width: 50px;
max-width: calc(100% - 16px);
}

.service-products__next:hover {
background: rgb(0, 0, 0);
}

.service-products__next-icon {
color: var(--color-text);
font-size: var(--fs-xl);
}

.service-products__next:hover .service-products__next-icon {
color: var(--color-white);
}

.service-facility {
background: rgb(248, 248, 248);
padding: 72px 32px;
width: 100%;
}

.service-facility > .section-heading {
align-items: center;
text-align: center;
}

.service-facility > .section-heading .section-heading__en,
.service-facility > .section-heading .section-heading__ja {
text-align: center;
justify-content: center;
margin: 0px;
width: 100%;
}

.service-facility__tables {
flex-flow: row;
place-content: center;
height: 845px;
margin: 0px 0px 64px;
padding: 0px;
}

.service-facility__table-wrap {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
border-radius: var(--radius-base);
flex-flow: row;
overflow: auto hidden;
padding: 0px;
}

.service-facility__table-wrap--second {
margin: 0px 0px 0px 24px;
max-width: calc(100% - 24px);
}

.service-facility__table {
place-content: flex-start center;
align-items: flex-start;
flex-flow: column;
padding: 0px;
width: 100%;
}

.service-facility__thead {
place-content: center flex-start;
align-items: center;
background: var(--color-accent-warm);
flex-flow: row;
height: 64px;
padding: 0px;
width: 430px;
}

.service-facility__th-name {
background: var(--color-accent-warm);
border-width: 0px 1px 0px 0px;
border-style: solid;
border-color: var(--color-white);
color: rgb(0, 0, 0);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 700;
height: 100%;
line-height: 1.4;
padding: 0px 16px;
text-align: left;
width: 257px;
}

.service-facility__th-count {
background: var(--color-accent-warm);
border-width: 0px 1px 0px 0px;
border-style: solid;
border-color: var(--color-white);
color: rgb(0, 0, 0);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 700;
height: 100%;
line-height: 1.4;
padding: 0px 16px;
text-align: left;
width: 176px;
}

.service-facility__tbody {
place-content: flex-start;
align-items: flex-start;
margin: 0px 16px 24px;
padding: 0px;
width: calc(100% - 32px);
max-width: calc(100% - 32px);
}

.service-facility__tr {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
flex-flow: row;
height: 64px;
padding: 0px;
width: 257px;
}

.service-facility__td-name {
background: var(--color-bg-white);
border-width: 0px 0px 1px;
border-style: solid;
border-color: var(--color-gray-border);
color: var(--color-text-dark);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 400;
height: 64px;
line-height: 1.4;
padding: 0px 0px 0px 8px;
text-align: left;
width: 242px;
}

.service-facility__td-count {
background: var(--color-bg-white);
border-width: 0px 0px 1px;
border-style: solid;
border-color: var(--color-gray-border);
color: var(--color-text-dark);
font-family: var(--font-sans);
font-size: var(--fs-sm);
font-weight: 400;
height: 64px;
line-height: 1.4;
padding: 16px;
text-align: left;
width: 157px;
}

.service-facility__extra {
place-content: flex-start center;
align-items: flex-start;
flex-flow: row;
margin: 0px 0px 64px;
padding: 0px;
}

.service-facility__extra-inner {
place-content: center;
padding: 0px;
}

.service-facility__extra-heading {
flex-flow: row;
place-content: center;
margin: 0px 0px 32px;
padding: 0px;
}

.service-facility__subtitle {
color: var(--color-text);
font-family: var(--font-sans);
font-size: var(--fs-xl);
font-weight: 600;
line-height: 1.4;
text-align: left;
width: 430px;
}

.service-facility__subtitle--inspection {
margin: 0px 0px 32px;
}

.service-facility__extra-table-wrap {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
border-radius: var(--radius-base);
flex-flow: row;
overflow: auto hidden;
padding: 0px;
}

.service-facility__inspection {
place-content: center;
margin: 0px 0px 0px 24px;
padding: 0px;
max-width: calc(100% - 24px);
}

.service-facility__inspection-table-wrap {
place-content: center flex-start;
align-items: center;
background: var(--color-bg-white);
border-radius: var(--radius-base);
flex-flow: row;
overflow: auto hidden;
padding: 0px;
width: 430px;
}

.image[data-img="service-planning"]::before {
background-image: url(/images/service-planning.webp);
}

.image[data-img="service-production"]::before {
background-image: url(/images/service-production.webp);
}

.image[data-img="service-quality"]::before {
background-image: url(/images/service-quality.webp);
}


/* Scroll animation visible state */

@media screen and (max-width: 840px) {
.service-phase__title-ja {
  font-size: var(--fs-4xl);
  }

.service-phase__title-en {
  font-size: var(--fs-sm);
  }

.service-planning__desc {
  font-size: var(--fs-sm);
  }

.service-plan-step {
  flex-flow: column;
  }

.service-plan-step__image {
  margin: 0px 0px 24px;
  }

.service-plan-step__content {
  place-content: flex-start center;
  width: 460px;
  }

.service-plan-step__header {
  place-content: center flex-start;
  align-items: center;
  }

.service-step__number {
  line-height: 1;
  }

.service-step__divider {
  height: 48px;
  width: 48px;
  }

.service-production__desc {
  font-size: var(--fs-sm);
  }

.service-quality__detail {
  flex-flow: column;
  }

.service-quality__image {
  margin: 0px 0px 24px;
  }

.service-quality__text {
  place-content: flex-start center;
  width: 460px;
  }

.service-quality__text-header {
  place-content: center flex-start;
  align-items: center;
  }

.service-facility__tbody {
  width: 2560px;
  }
}

@media screen and (max-width: 540px) {
.service-flow {
  margin: 48px 0px 0px;
  }

.service-flow__inner {
  flex-direction: column;
  }

.service-flow__nav {
  flex-wrap: wrap;
  height: auto;
  padding: 16px;
  width: 100%;
  }

.service-flow__link--production,
  .service-flow__link--quality {
  margin: 0px 0px 0px 8px;
  max-width: calc(100% - 8px);
  }

.service-flow__icon {
  height: 28px;
  width: 28px;
  }

.service-flow__icon-img {
  height: 16px;
  width: 16px;
  }

.service-flow__label {
  margin: 0px 0px 0px 4px;
  max-width: calc(100% - 4px);
  }

.service-flow__label-ja {
  font-size: var(--fs-base);
  }

.service-flow__label-en {
  font-size: 8px;
  }

.service-production .service-phase__header {
  margin: 0px 0px 24px;
  }

.service-phase__icon {
  height: 56px;
  width: 56px;
  }

.service-phase__icon-img {
  height: 32px;
  width: 32px;
  }

.service-phase__title-wrap {
  padding: 0px 0px 0px 16px;
  }

.service-phase__title-ja {
  font-size: var(--fs-2xl);
  }

.service-phase__title-en {
  font-size: var(--fs-xs);
  margin: 4px 0px 0px;
  padding: 0px;
  }

  .service-production .service-phase__title-en {
  margin: 8px 0px 0px;
  }

.service-planning__desc {
  font-size: var(--fs-md);
  line-height: 1.6;
  margin: 12px 0px 24px;
  }

.service-plan-step {
  margin: 0px 0px 40px;
  padding: 48px 24px;
  }

.service-plan-step__content--step2 {
  width: 100%;
  }

.service-plan-step__header {
  place-content: flex-start;
  }

.service-step__number {
  font-size: var(--fs-lg);
  font-weight: 500;
  text-align: center;
  }

.service-step__divider {
  height: 2px;
  width: 40px;
  }

.service-plan-step__name {
  font-size: var(--fs-md);
  text-align: center;
  }

.service-prod-step__name {
  text-align: center;
  }

.service-production__inner {
  flex-direction: column;
  }

.service-production__desc {
  font-size: var(--fs-base);
  margin: 0px;
  padding: 0px 16px;
  }

.service-production__desc br {
  display: none;
  }

.service-production__separator--bottom {
  place-content: center;
  flex-flow: column;
  }

.service-prod-step {
  flex-flow: column-reverse;
  margin: 0px 0px 40px;
  padding: 48px 24px;
  }

  .service-prod-step--step4 {
  margin: 0px;
  }

  .service-prod-step--step5 {
  margin: 0px;
  padding: 48px 24px;
  }

.service-prod-step__content {
  margin: 24px 0px 0px;
  width: 100%;
  max-width: 100%;
  align-items: center;
  }

.service-prod-step__header {
  place-content: center;
  }

.service-prod-step__number {
  font-size: var(--fs-lg);
  font-weight: 500;
  text-align: center;
  }

.service-prod-step__name {
  font-size: var(--fs-md);
  }

.service-prod-step__desc {
  font-size: var(--fs-base);
  line-height: 1.8;
  width: 100%;
  }

.service-flow__nav {
  align-items: flex-start;
  margin: 0px 40px;
  padding: 40px 32px;
  width: auto;
  }

.service-flow__link {
  place-content: flex-start;
  justify-content: flex-start;
  }

.service-quality__detail {
  padding: 48px 24px;
  }

.service-quality__heading {
  font-size: var(--fs-md);
  }

.service-products__carousel {
  place-content: center;
  width: 100%;
  }

.service-products__track {
  width: 240px;
  }

.service-products__slide {
  width: 100%;
  }

.service-product__card--first {
  width: 100%;
  }

.service-product__img--first {
  width: 260px;
  }

.service-facility__tables {
  place-content: center flex-start;
  flex-flow: column;
  height: auto;
  width: 100%;
  }

.service-facility__table-wrap--second {
  margin: 40px 0px 0px;
  max-width: 100%;
  }

.service-facility__thead {
  width: 100%;
  }

.service-facility__tr {
  width: 100%;
  }

.service-facility__th-name {
  width: 65%;
  }

.service-facility__th-count {
  width: 35%;
  }

.service-facility__td-name {
  width: 65%;
  }

.service-facility__td-count {
  width: 35%;
  }

.service-facility__table-wrap,
.service-facility__extra-table-wrap,
.service-facility__inspection-table-wrap {
  width: 100%;
  }

.service-facility__extra {
  flex-flow: column;
  width: 100%;
  }

.service-facility__extra-inner {
  width: 100%;
  }

.service-facility__extra-heading {
  height: auto;
  }

.service-facility__subtitle {
  width: 100%;
  text-align: center;
  }

.service-facility__inspection {
  margin: 40px 0px 0px;
  max-width: 100%;
  width: 100%;
  }
}