@charset "UTF-8";

body.chartmake-page {
  overflow-x: clip;
}

body.chartmake-page :where(.chartmake-content p) {
  margin-bottom: 0;
  margin-top: 0;
}

body.chartmake-page .chartmake-sp-br {
  display: none;
}

body.chartmake-page .chartmake-content {
  max-width: none;
  padding: 0;
}

body.chartmake-page .chartmake-hero__inner {
  align-items: center;
  display: flex;
  gap: 24px;
  justify-content: center;
  width: calc(100% - 40px);
}

body.chartmake-page .chartmake-hero__media-slot {
  align-items: center;
  display: flex;
  flex: 0 0 80px;
  height: 80px;
  justify-content: center;
  width: 80px;
}

body.chartmake-page .chartmake-hero__media-slot img {
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  width: 67px;
}

body.chartmake-page .ta-hero__title {
  font: var(--ta-type-h1-pc);
  max-width: none;
}

body.chartmake-page .chartmake-section {
  box-sizing: border-box;
  padding: 80px 0;
  width: 100%;
}

body.chartmake-page .chartmake-section__inner {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--content-width);
  width: calc(100% - 40px);
}

body.chartmake-page .chartmake-media-slot {
  box-sizing: border-box;
  display: block;
  flex: 0 0 auto;
}

body.chartmake-page .chartmake-media-slot__image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

body.chartmake-page .chartmake-section-heading {
  align-items: center;
  display: flex;
  flex-direction: column;
}

body.chartmake-page .chartmake-section-heading .ta-heading-bar {
  margin-left: 0;
  margin-right: 0;
  margin-top: 24px;
}

body.chartmake-page .chartmake-about {
  background-color: var(--ta-color-bg);
  padding-bottom: 40px;
  padding-top: 40px;
}

body.chartmake-page .chartmake-about__inner {
  align-items: center;
  display: grid;
  gap: 60px;
  grid-template-columns: minmax(0, 1fr) 420px;
  max-width: 900px;
}

body.chartmake-page .chartmake-about__media {
  aspect-ratio: 420 / 257;
  background-color: var(--ta-color-primary-pale);
  border-radius: 12px;
  width: 100%;
}

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

body.chartmake-page .chartmake-feature-list,
body.chartmake-page .chartmake-flow-list,
body.chartmake-page .chartmake-tip-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}

body.chartmake-page .chartmake-feature-card {
  align-items: center;
  background-color: var(--ta-color-bg-light);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: 20px;
  justify-content: center;
  min-height: 240px;
  padding: 20px 32px;
}

body.chartmake-page .chartmake-feature-card__media {
  aspect-ratio: 300 / 200;
  background-color: var(--ta-color-primary-pale);
  border-radius: 12px;
  width: 300px;
}

body.chartmake-page .chartmake-feature-card__media--patent {
  background-color: transparent;
}

body.chartmake-page .chartmake-feature-card__copy {
  --ta-type-h3-pc: var(--ta-type-card-title-pc);
  --text: var(--ta-color-sub-text);
  flex: 1 1 0;
  min-width: 0;
}

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

body.chartmake-page .chartmake-flow {
  background-color: var(--ta-color-bg);
  padding-bottom: 80px;
}

body.chartmake-page .chartmake-flow-card {
  align-items: center;
  background-color: var(--ta-color-bg-light);
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  display: grid;
  gap: 16px;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 150px;
  padding: 40px 20px;
}

body.chartmake-page .chartmake-flow-card__media {
  background-color: var(--ta-color-primary-pale);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  width: 320px;
}

body.chartmake-page .chartmake-flow-card__media--step1 {
  aspect-ratio: 320 / 150;
}

body.chartmake-page .chartmake-flow-card__media--step2 {
  aspect-ratio: 320 / 150;
}

body.chartmake-page .chartmake-flow-card__media--step3 {
  aspect-ratio: 320 / 150;
}

body.chartmake-page .chartmake-flow-card__media--step4 {
  aspect-ratio: 320 / 150;
}

body.chartmake-page .chartmake-flow-card__media--step1 .chartmake-media-slot__image {
  object-fit: cover;
}

body.chartmake-page .chartmake-flow-card__media--step2 .chartmake-media-slot__image {
  height: 145.11%;
  left: -19.85%;
  max-width: none;
  object-fit: fill;
  position: absolute;
  top: -7.96%;
  width: 142.82%;
}

body.chartmake-page .chartmake-flow-card__media--step3 .chartmake-media-slot__image {
  height: 105.85%;
  left: -1.25%;
  max-width: none;
  object-fit: fill;
  position: absolute;
  top: -5.85%;
  width: 102.5%;
}

body.chartmake-page .chartmake-flow-card__media--step4 .chartmake-media-slot__image {
  height: 104.05%;
  left: 0;
  max-width: none;
  object-fit: fill;
  position: absolute;
  top: -4.03%;
  width: 100%;
}

body.chartmake-page .chartmake-flow-card__action {
  border-radius: 2px;
  height: 14.67%;
  left: 21.56%;
  overflow: hidden;
  position: absolute;
  top: 66%;
  width: 56.56%;
}

body.chartmake-page .chartmake-flow-card__action-image {
  height: 1650.21%;
  left: -7.59%;
  max-width: none;
  object-fit: fill;
  position: absolute;
  top: -1500.1%;
  width: 115.17%;
}

body.chartmake-page .chartmake-flow-card__copy {
  --ta-type-h3-pc: var(--ta-type-card-title-pc);
  --text: var(--ta-color-sub-text);
  min-width: 0;
}

body.chartmake-page .chartmake-flow-card__copy .ta-text-body {
  margin-top: 16px;
}

body.chartmake-page .chartmake-flow__arrow {
  display: block;
  flex: 0 0 18px;
  height: 18px;
  margin-left: auto;
  margin-right: auto;
  width: 18px;
}

body.chartmake-page .chartmake-tips {
  padding-bottom: 80px;
  /* 区切りバナーが境界から79px下へ出るぶんを加算し、本文との間隔を80pxに保つ */
  padding-top: 160px;
}

body.chartmake-page .chartmake-tips-divider {
  height: 0;
  position: relative;
  z-index: 1;
}

body.chartmake-page .chartmake-tips__banner-title {
  left: 50%;
  margin: 0;
  position: absolute;
  top: 20px;
  transform: translate(-50%, -50%);
  width: 477px;
}

body.chartmake-page .chartmake-tips__banner-title img {
  display: block;
  height: auto;
  width: 100%;
}

body.chartmake-page .chartmake-tips__banner-text {
  --ta-color-primary: var(--ta-color-bg);
  display: none;
}

body.chartmake-page .chartmake-tips .chartmake-tip-list {
  margin-top: 0;
}

body.chartmake-page .chartmake-tip-card {
  align-items: center;
  background-color: var(--ta-color-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  gap: 20px;
  grid-template-columns: 320px minmax(0, 1fr);
  padding: 20px;
}

body.chartmake-page .chartmake-tip-card--reverse {
  grid-template-columns: minmax(0, 1fr) 320px;
}

body.chartmake-page .chartmake-tip-card__media-wrap {
  align-items: center;
  display: flex;
  flex-direction: column;
}

body.chartmake-page .chartmake-tip-card__media {
  width: 320px;
}

body.chartmake-page .chartmake-tip-card__media--tip1 {
  aspect-ratio: 960 / 771;
}

body.chartmake-page .chartmake-tip-card__media--tip2 {
  aspect-ratio: 960 / 693;
}

body.chartmake-page .chartmake-tip-card__media--tip3 {
  aspect-ratio: 300 / 180.448;
}

body.chartmake-page .chartmake-tip-card__media--tip3-note {
  aspect-ratio: 320 / 195;
}

body.chartmake-page .chartmake-tip-card__copy {
  --ta-type-h3-pc: var(--ta-type-card-title-pc);
  --text: var(--ta-color-sub-text);
  min-width: 0;
}

body.chartmake-page .chartmake-tip-card__heading {
  align-items: center;
  display: flex;
  gap: 16px;
}

body.chartmake-page .chartmake-tip-card__number {
  align-items: center;
  display: flex;
  flex: 0 0 30px;
  height: 35px;
}

body.chartmake-page .chartmake-tip-card__number img {
  display: block;
  flex: none;
  height: 22px;
  max-width: none;
}

body.chartmake-page .chartmake-tip-card__copy > .ta-text-body {
  margin-top: 16px;
}

body.chartmake-page .chartmake-tip-card--long {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body.chartmake-page .chartmake-tip-card__main {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 320px minmax(0, 1fr);
  width: 100%;
}

body.chartmake-page .chartmake-tip-card__note {
  align-items: center;
  background-color: var(--ta-color-primary-pale);
  border-radius: 16px;
  display: grid;
  gap: 20px;
  grid-template-columns: 320px minmax(0, 1fr);
  padding: 20px;
  width: 100%;
}

body.chartmake-page .chartmake-tip-card__note-copy {
  --ta-type-h3-pc: var(--ta-type-card-title-pc);
  --text: var(--ta-color-sub-text);
  min-width: 0;
}

/* Figma node 787:4193: オレンジ縦棒は見出し行だけに掛ける（本文までは伸ばさない）。 */
body.chartmake-page .chartmake-tip-card__note-heading {
  border-left: 2px solid var(--ta-color-accent-light);
  padding-left: 20px;
}

body.chartmake-page .chartmake-tip-card__note-copy .ta-h4 {
  margin-top: 10px;
}

@media screen and (max-width: 939px) {
  body.chartmake-page .chartmake-hero__inner {
    gap: 8px;
    width: 100%;
  }

  body.chartmake-page .chartmake-hero__media-slot {
    flex-basis: 64px;
    height: 64px;
    width: 64px;
  }

  body.chartmake-page .chartmake-hero__media-slot img {
    height: 64px;
    width: 53.6px;
  }

  body.chartmake-page .ta-hero__title {
    font: var(--ta-type-h1-sp);
    letter-spacing: 0;
  }

  body.chartmake-page .chartmake-sp-br {
    display: inline;
  }

  body.chartmake-page .chartmake-section-heading {
    align-items: center;
    text-align: center;
  }

  body.chartmake-page .chartmake-section-heading .ta-heading-bar {
    margin-top: 24px;
  }

  body.chartmake-page .chartmake-section {
    padding-bottom: 40px;
    padding-top: 40px;
  }

  body.chartmake-page .chartmake-flow {
    padding-bottom: 105px;
  }

  body.chartmake-page .chartmake-tips {
    padding-top: 123px;
  }

  body.chartmake-page .chartmake-section__inner {
    width: calc(100% - 40px);
  }

  body.chartmake-page .chartmake-about {
    padding-bottom: 40px;
    padding-top: 40px;
  }

  body.chartmake-page .chartmake-about__inner {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  body.chartmake-page .chartmake-about__copy {
    display: contents;
  }

  body.chartmake-page .chartmake-about__text {
    /* 直前の .chartmake-about__media との間隔は本文側で確保する。 */
    margin-top: 20px;
    order: 2;
  }

  body.chartmake-page .chartmake-about__media {
    /* 後続本文との間隔は .chartmake-about__text の margin-top: 20px。 */
    max-width: 420px;
  }

  body.chartmake-page .chartmake-feature-list,
  body.chartmake-page .chartmake-flow-list,
  body.chartmake-page .chartmake-tip-list {
    margin-top: 40px;
  }

  body.chartmake-page .chartmake-feature-card,
  body.chartmake-page .chartmake-feature-card--reverse {
    align-items: stretch;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
  }

  body.chartmake-page .chartmake-feature-card__media {
    align-self: center;
    max-width: 300px;
    order: -1;
    width: 100%;
  }

  body.chartmake-page .chartmake-feature-card__copy .ta-h3 {
    text-align: center;
  }

  body.chartmake-page .chartmake-flow-card {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    padding: 20px 32px;
  }

  body.chartmake-page .chartmake-flow-card__copy {
    display: contents;
  }

  body.chartmake-page .chartmake-flow-card__copy .ta-h3 {
    order: -1;
    text-align: center;
  }

  body.chartmake-page .chartmake-flow-card__copy .ta-text-body {
    margin-top: 0;
    order: 1;
  }

  body.chartmake-page .chartmake-flow-card__media {
    align-self: center;
    max-width: 310px;
    width: calc(100% + 24px);
  }

  body.chartmake-page .chartmake-flow-card__media--step1 {
    aspect-ratio: 310 / 145;
  }

  body.chartmake-page .chartmake-flow-card__media--step2 {
    aspect-ratio: 310 / 145;
  }

  body.chartmake-page .chartmake-flow-card__media--step3 {
    aspect-ratio: 310 / 145;
  }

  body.chartmake-page .chartmake-flow-card__media--step4 {
    aspect-ratio: 310 / 145.313;
  }

  body.chartmake-page .chartmake-tip-card,
  body.chartmake-page .chartmake-tip-card--reverse {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    padding: 20px;
  }

  body.chartmake-page .chartmake-tip-card__main {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    padding: 0;
  }

  body.chartmake-page .chartmake-tip-card__note {
    align-self: center;
    align-items: stretch;
    display: flex;
    flex-direction: column;
    gap: 0;
    order: 4;
    padding: 20px;
    width: calc(100% + 20px);
  }

  body.chartmake-page .chartmake-tip-card__media-wrap {
    align-self: center;
    max-width: 320px;
    width: calc(100% + 10px);
  }

  body.chartmake-page .chartmake-tip-card__media {
    align-self: center;
    max-width: 320px;
    width: 100%;
  }

  body.chartmake-page .chartmake-tip-card__media--tip3 {
    max-width: 300px;
  }

  body.chartmake-page .chartmake-tip-card__media--tip3-note {
    aspect-ratio: 290 / 177;
    max-width: 290px;
  }

  /* SP は Figma 787:4398 / 787:4412 / 787:4423 の順（見出し→画像→本文）に並べ替える */
  body.chartmake-page .chartmake-tip-card__copy,
  body.chartmake-page .chartmake-tip-card__note-copy {
    display: contents;
  }

  body.chartmake-page .chartmake-tip-card__heading,
  body.chartmake-page .chartmake-tip-card__note-heading {
    order: 1;
  }

  body.chartmake-page .chartmake-tip-card__media-wrap,
  body.chartmake-page .chartmake-tip-card__main > .chartmake-tip-card__media,
  body.chartmake-page .chartmake-tip-card__note > .chartmake-tip-card__media {
    order: 2;
  }

  body.chartmake-page .chartmake-tip-card__copy > .ta-text-body {
    margin-top: 0;
    order: 3;
  }

  body.chartmake-page .chartmake-tip-card__note > .chartmake-tip-card__media {
    margin-top: 20px;
  }

  body.chartmake-page .chartmake-tip-card__note-copy > .ta-h4 {
    margin-top: 20px;
    order: 3;
  }

  body.chartmake-page .chartmake-tip-card__note-copy > .ta-text-body {
    order: 4;
  }

  body.chartmake-page .chartmake-tip-card__number {
    flex-basis: 40px;
    height: 46px;
  }

  body.chartmake-page .chartmake-tip-card:first-child .chartmake-tip-card__number {
    height: 32px;
  }

  body.chartmake-page .chartmake-tip-card--long .chartmake-tip-card__number {
    height: 34px;
  }

  body.chartmake-page .chartmake-tip-card__number img {
    transform: scale(calc(4 / 3));
    transform-origin: left center;
  }

  body.chartmake-page .chartmake-tips__banner-title {
    align-items: center;
    background-color: var(--ta-color-primary);
    box-sizing: border-box;
    display: flex;
    height: 130px;
    justify-content: center;
    padding: 0 20px;
    top: 0;
    width: 100%;
  }

  body.chartmake-page .chartmake-tips__banner-title::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%);
  }

  body.chartmake-page .chartmake-tips__banner-title img {
    display: none;
  }

  body.chartmake-page .chartmake-tips__banner-text {
    display: block;
    text-align: center;
    word-break: keep-all;
  }
}

@media screen and (max-width: 389px) {
  body.chartmake-page .ta-hero {
    padding-left: 8px;
    padding-right: 8px;
  }

  body.chartmake-page .chartmake-hero__inner {
    gap: 8px;
  }

  body.chartmake-page .chartmake-hero__media-slot {
    flex-basis: 60px;
    height: 60px;
    width: 60px;
  }

  body.chartmake-page .chartmake-hero__media-slot img {
    height: 60px;
    width: 50.25px;
  }

  body.chartmake-page .ta-hero__title {
    font: var(--ta-type-h2-sp);
  }
}