@charset "UTF-8";

body.technicalbuilder-page-body {
  margin: 0;
  overflow-x: clip;
}

.technicalbuilder-page {
  background: var(--ta-color-bg);
}

.technicalbuilder-page p,
.technicalbuilder-page h1,
.technicalbuilder-page h2,
.technicalbuilder-page h3,
.technicalbuilder-page h4 {
  margin: 0;
}

.technicalbuilder-page img,
.technicalbuilder-page picture {
  display: block;
}

.technicalbuilder-inner {
  margin: 0 auto;
  max-width: var(--content-width);
  width: 100%;
}

.technicalbuilder-text-muted {
  --text: var(--ta-color-sub-text);
}

.technicalbuilder-card-title {
  --ta-type-h3-pc: var(--ta-type-card-title-pc);
}

.technicalbuilder-patent-title {
  --ta-type-h3-sp: var(--ta-type-card-title-pc);
}

.technicalbuilder-br-pc {
  display: none;
}

.technicalbuilder-hero__inner {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: center;
  max-width: var(--content-width);
  width: 100%;
}

.technicalbuilder-hero__icon {
  align-items: center;
  display: flex;
  flex: 0 0 56px;
  height: 56px;
  justify-content: center;
  width: 56px;
}

.technicalbuilder-hero__icon img {
  height: 56px;
  width: 51.1px;
}

.technicalbuilder-hero__inner .ta-hero__title {
  font: var(--ta-type-card-title-pc);
}

.technicalbuilder-intro,
.technicalbuilder-section {
  padding: 40px 20px;
}

.technicalbuilder-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: 350px;
  width: 100%;
}

.technicalbuilder-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.technicalbuilder-heading .ta-heading-bar {
  margin: 24px 0 0;
}

.technicalbuilder-intro__media {
  /* SPの後続本文との間隔は .technicalbuilder-intro__text の margin-top: 20px。 */
  aspect-ratio: 350 / 214;
  width: 100%;
}

.technicalbuilder-intro__media img,
.technicalbuilder-feature-card__media img,
.technicalbuilder-step__media img,
.technicalbuilder-tip__media img,
.technicalbuilder-tip__media picture,
.technicalbuilder-range-note__media img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.technicalbuilder-page .technicalbuilder-intro__text {
  /* SPの直前画像 .technicalbuilder-intro__media との間隔。 */
  margin-top: 20px;
}

.technicalbuilder-features,
.technicalbuilder-tips {
  background: var(--ta-color-primary-pale);
}

.technicalbuilder-heading--center {
  text-align: center;
}

.technicalbuilder-feature-list,
.technicalbuilder-flow-list {
  margin-top: 40px;
}

.technicalbuilder-feature-card {
  align-items: center;
  background: var(--ta-color-bg-light);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.technicalbuilder-feature-card + .technicalbuilder-feature-card,
.technicalbuilder-tip + .technicalbuilder-tip {
  margin-top: 20px;
}

.technicalbuilder-feature-card__media {
  aspect-ratio: 3 / 2;
  flex: none;
  max-width: 100%;
  width: 300px;
}

.technicalbuilder-feature-card__media--patent {
  aspect-ratio: 1;
  width: 200px;
}

.technicalbuilder-feature-card__copy {
  margin-top: 20px;
  min-width: 0;
  width: 100%;
}

.technicalbuilder-feature-card .technicalbuilder-card-title {
  text-align: center;
}

.technicalbuilder-feature-card__copy .ta-text-body {
  margin-top: 20px;
}

.technicalbuilder-flow-list {
  align-items: center;
  display: flex;
  flex-direction: column;
}

.technicalbuilder-step {
  align-items: center;
  background: var(--ta-color-bg-light);
  border-radius: var(--ta-radius-l);
  display: flex;
  flex-direction: column;
  max-width: 100%;
  padding: 20px;
  width: 350px;
}

.technicalbuilder-step__title {
  text-align: center;
}

.technicalbuilder-step__media {
  flex: none;
  height: 250px;
  margin-top: 16px;
  width: 170px;
}

.technicalbuilder-step__media--wide {
  width: 180px;
}

.technicalbuilder-page .technicalbuilder-step__text {
  margin-top: 16px;
  max-width: 100%;
  width: 286px;
}

.technicalbuilder-page .technicalbuilder-flow-arrow {
  align-items: center;
  display: flex;
  height: 23px;
  justify-content: center;
  margin-top: 20px;
  width: 29px;
}

.technicalbuilder-flow-arrow img {
  height: 17.75px;
  width: 17.25px;
}

.technicalbuilder-flow-arrow + .technicalbuilder-step {
  margin-top: 20px;
}

.technicalbuilder-tips {
  padding-top: 140px;
  position: relative;
}

.technicalbuilder-tips-divider {
  align-items: center;
  background: var(--ta-color-primary);
  display: flex;
  height: 100px;
  justify-content: center;
  left: 50%;
  max-width: 100%;
  padding: 0 20px;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 390px;
}

.technicalbuilder-tips-divider::after {
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 18px solid var(--ta-color-primary);
  content: "";
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
}

.technicalbuilder-tips-divider__title {
  --ta-color-primary: var(--ta-color-bg);
  text-align: center;
}

.technicalbuilder-tip {
  align-items: center;
  background: var(--ta-color-bg);
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.technicalbuilder-tip__copy,
.technicalbuilder-tip__main {
  display: contents;
}

.technicalbuilder-tip__heading {
  align-items: center;
  display: flex;
  gap: 16px;
  order: -2;
  width: 100%;
}

.technicalbuilder-tip--indicators .technicalbuilder-tip__heading {
  justify-content: center;
}

.technicalbuilder-tip__number {
  --ta-color-primary: var(--ta-color-accent);
  --ta-type-h1-sp: var(--ta-en-pc-display-bold);
  align-items: center;
  display: flex;
  flex: 0 0 40px;
  height: 36px;
  width: 40px;
}

.technicalbuilder-tip--indicators .technicalbuilder-tip__number {
  height: 32px;
}

.technicalbuilder-tip--review .technicalbuilder-tip__number {
  height: 46px;
}

.technicalbuilder-tip__media {
  flex: none;
  margin-top: 20px;
  max-width: 100%;
  order: -1;
  width: 300px;
}

.technicalbuilder-tip__media--indicators {
  aspect-ratio: 300 / 200;
}

.technicalbuilder-tip__media--signals {
  aspect-ratio: 300 / 183;
}

.technicalbuilder-tip__media--combination {
  aspect-ratio: 300 / 238;
}

.technicalbuilder-tip__media--rework {
  aspect-ratio: 300 / 184;
}

.technicalbuilder-tip__media--review {
  aspect-ratio: 300 / 180.4476;
}

.technicalbuilder-tip__copy .ta-text-body {
  margin-top: 20px;
  width: 100%;
}

.technicalbuilder-range-note {
  align-self: center;
  background: var(--ta-color-primary-pale);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 20px;
  padding: 20px;
  width: calc(100% + 20px);
}

.technicalbuilder-range-note__title {
  border-left: 2px solid var(--ta-color-accent-light);
  padding-left: 20px;
}

.technicalbuilder-range-note__media {
  aspect-ratio: 290 / 177.5867;
  margin-top: 20px;
  width: 100%;
}

.technicalbuilder-range-note__body {
  margin-top: 20px;
}

@media (max-width: 389px) {
  .technicalbuilder-hero__icon {
    flex-basis: 40px;
    height: 40px;
    width: 40px;
  }

  .technicalbuilder-hero__icon img {
    height: 40px;
    width: 36.5px;
  }

  .technicalbuilder-heading--center .ta-h1 {
    --ta-type-h1-sp: var(--ta-type-h2-sp);
  }

  .technicalbuilder-range-note {
    width: 100%;
  }
}

@media (min-width: 940px) {
  .technicalbuilder-br-pc {
    display: inline;
  }

  .technicalbuilder-br-sp {
    display: none;
  }

  .technicalbuilder-hero__inner {
    gap: 40px;
  }

  .technicalbuilder-hero__icon {
    flex-basis: 80px;
    height: 80px;
    width: 80px;
  }

  .technicalbuilder-hero__icon img {
    height: 80px;
    width: 73px;
  }

  .technicalbuilder-hero__inner .ta-hero__title {
    font: var(--ta-type-h1-pc);
  }

  .technicalbuilder-intro {
    padding-bottom: 80px;
  }

  .technicalbuilder-intro__inner {
    align-items: center;
    grid-template-columns: 377px 420px;
    justify-content: space-between;
    max-width: 900px;
  }

  .technicalbuilder-intro__media {
    aspect-ratio: 420 / 256;
    grid-column: 2;
    grid-row: 1;
  }

  .technicalbuilder-page .technicalbuilder-intro__text {
    grid-column: 1;
    grid-row: 1;
    margin-top: 0;
  }

  .technicalbuilder-section {
    padding: 80px 20px;
  }

  .technicalbuilder-feature-list,
  .technicalbuilder-flow-list {
    margin-top: 80px;
  }

  .technicalbuilder-feature-card {
    display: grid;
    gap: 20px;
    grid-template-columns: 300px 500px;
    justify-content: center;
    min-height: 240px;
  }

  .technicalbuilder-feature-card__copy {
    margin-top: 0;
  }

  .technicalbuilder-feature-card .technicalbuilder-card-title {
    text-align: left;
  }

  .technicalbuilder-feature-card--reverse {
    grid-template-columns: 500px 300px;
  }

  .technicalbuilder-feature-card--reverse .technicalbuilder-feature-card__media {
    grid-column: 2;
  }

  .technicalbuilder-feature-card--reverse .technicalbuilder-feature-card__copy {
    grid-column: 1;
    grid-row: 1;
  }

  .technicalbuilder-feature-card--patent {
    column-gap: 30px;
    grid-template-columns: 200px 500px;
  }

  .technicalbuilder-flow {
    padding-bottom: 140px;
  }

  .technicalbuilder-flow-list {
    column-gap: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  }

  .technicalbuilder-step {
    align-self: stretch;
    min-height: 592px;
    padding: 40px 20px;
    width: 100%;
  }

  .technicalbuilder-step__media {
    margin-top: 0;
    order: -1;
  }

  .technicalbuilder-page .technicalbuilder-step__title {
    margin-top: 16px;
    white-space: nowrap;
  }

  .technicalbuilder-page .technicalbuilder-step__text {
    width: 180px;
  }

  .technicalbuilder-page .technicalbuilder-flow-arrow {
    height: 29px;
    margin-top: 0;
    width: 20px;
  }

  .technicalbuilder-flow-arrow img {
    height: 17.25px;
    width: 17.75px;
  }

  .technicalbuilder-flow-arrow + .technicalbuilder-step {
    margin-top: 0;
  }

  .technicalbuilder-tips {
    padding-top: 140px;
  }

  .technicalbuilder-tips-divider {
    top: -65px;
    width: 535px;
  }

  .technicalbuilder-tip,
  .technicalbuilder-tip__main {
    align-items: center;
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
  }

  .technicalbuilder-tip__media {
    margin-top: 0;
    order: 0;
    width: 320px;
  }

  .technicalbuilder-tip__media--indicators {
    aspect-ratio: 320 / 200;
  }

  .technicalbuilder-tip__media--signals {
    aspect-ratio: 320 / 195;
  }

  .technicalbuilder-tip__media--combination {
    aspect-ratio: 320 / 254;
  }

  .technicalbuilder-tip__media--rework {
    aspect-ratio: 320 / 196;
  }

  .technicalbuilder-tip__media--review {
    aspect-ratio: 320 / 192.4775;
  }

  .technicalbuilder-tip__copy {
    display: block;
    flex: 1 1 0;
    min-width: 0;
  }

  .technicalbuilder-tip__copy .ta-text-body {
    margin-top: 16px;
  }

  .technicalbuilder-tip--indicators .technicalbuilder-tip__heading {
    justify-content: flex-start;
  }

  .technicalbuilder-tip__number {
    --ta-type-h1-pc: var(--ta-en-pc-h2-bold);
    flex-basis: 30px;
    height: 35px;
    width: 30px;
  }

  .technicalbuilder-tip--reverse {
    flex-direction: row-reverse;
  }

  .technicalbuilder-tip--review {
    display: block;
  }

  .technicalbuilder-range-note {
    align-items: center;
    column-gap: 20px;
    grid-template-columns: 320px minmax(0, 1fr);
    grid-template-rows: auto auto;
    width: 100%;
  }

  .technicalbuilder-range-note__title {
    align-self: end;
    grid-column: 2;
    grid-row: 1;
  }

  .technicalbuilder-range-note__media {
    aspect-ratio: 320 / 196;
    grid-column: 1;
    grid-row: 1 / 3;
    margin-top: 0;
  }

  .technicalbuilder-range-note__body {
    align-self: start;
    grid-column: 2;
    grid-row: 2;
    margin-top: 10px;
  }
}