.chart-page {
    --brown: #806549;
    --dark: #3b2d24;
    --line: rgba(255, 255, 255, 0.9);
    --cream: #fffdf0;
    --pale: #fffbe6;
    --yellow: #ffe930;
    --blue: #71aebd;
    --blue-dark: #6a9db1;
    --green: #9aa75d;
    --pink: #ee8d99;
    --orange: #efb647;
  }

  .chart-page, .chart-page * {
    box-sizing: border-box;
  }

  .chart-page {
    margin: 0;
    color: var(--brown);
    font-family: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Hiragino Sans", Meiryo, serif;
    background:
      linear-gradient(180deg, #fffdf3 0%, #fff39a 23%, #ffe825 72%, #ffe51c 100%);
    line-height: 1.65;
  }

  .chart-page img {
    display: block;
    max-width: 100%;
  }

  .chart-page a {
    color: inherit;
    text-decoration: none;
  }

  .chart-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 38px 20px 56px;
  }

  .chart-page::before {
    content: "";
    position: absolute;
    left: -82px;
    top: 418px;
    width: 236px;
    height: 236px;
    opacity: 0.42;
    background: url("../image/chart/アセット 19.png") center / contain no-repeat;
  }

  .chart-page .intro {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 62px;
  }

  .chart-page .intro__brand {
    margin: 0 0 16px;
    font-size: 14px;
    letter-spacing: 0.08em;
  }

  .chart-page h1 {
    margin: 0;
    color: var(--brown);
    font-size: 38px;
    font-weight: 700;
    letter-spacing: 0.11em;
    line-height: 1.25;
  }

  .chart-page .intro__lead {
    margin: 8px 0 28px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.12em;
  }

  .chart-page .intro__line {
    display: block;
    width: 146px;
    height: 1px;
    margin: 0 auto;
    background: var(--brown);
  }

  .chart-page .chat-flow {
    display: none;
  }

  .chart-page .chart {
    position: relative;
    z-index: 1;
    width: 1260px;
    height: 1120px;
    margin: 0 auto;
  }

  .chart-page .node,
  .chart-page .product,
  .chart-page .panel {
    position: absolute;
    z-index: 1;
  }

  .chart-page .branch-panel {
    position: absolute;
    top: 116px;
    width: 224px;
    height: 392px;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(220, 205, 133, 0.7);
    border-radius: 20px;
    box-shadow: 0 10px 24px rgba(128, 101, 73, 0.08);
    z-index: 0;
  }

  .chart-page .branch-panel--renovation {
    left: 784px;
  }

  .chart-page .branch-panel--reform {
    left: 1024px;
  }

  .chart-page .node {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 86px;
    padding: 18px 32px;
    color: var(--brown);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.08em;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #d7d0c7;
    border-radius: 20px;
    box-shadow: 0 12px 28px rgba(128, 101, 73, 0.13);
  }

  .chart-page .node--new {
    left: 0;
    top: 0;
    width: 770px;
    font-family: "Hiragino Mincho ProN", "serif";
  }

  .chart-page .node--reform-main {
    left: 784px;
    top: 0;
    width: 480px;
    min-height: 86px;
    padding-top: 14px;
    padding-bottom: 14px;
    font-family: "Hiragino Mincho ProN", "serif";
  }

  .chart-page .node--custom {
    left: 0;
    top: 124px;
    width: 280px;
    height: 96px;
    border-color: var(--pink);
  }

  .chart-page .node--semi {
    left: 294px;
    top: 124px;
    width: 476px;
    height: 96px;
    border-color: #9ca46a;
  }

  .chart-page .node--small {
    flex-direction: column;
    top: 124px;
    width: 200px;
    height: 96px;
    padding: 14px 16px 12px;
    border-color: #abb45f;
    border-radius: 18px;
    color: #7f674e;
    font-size: 17px;
    line-height: 1.4;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: none;
  }

  .chart-page .node--renovation {
    left: 796px;
  }

  .chart-page .node--reform {
    left: 1036px;
  }

  .chart-page .node .sub {
    display: block;
    margin-top: 7px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.04em;
  }

  .chart-page .line {
    position: absolute;
    z-index: -1;
    background: var(--line);
  }

  .chart-page .vline {
    width: 2px;
  }

  .chart-page .hline {
    height: 2px;
  }

  .chart-page .line-new-center {
    left: 532px;
    top: 86px;
    height: 44px;
  }

  .chart-page .line-new-left {
    left: 140px;
    top: 86px;
    height: 44px;
  }

  .chart-page .line-reform-left {
    left: 896px;
    top: 86px;
    height: 42px;
  }

  .chart-page .line-reform-right {
    left: 1136px;
    top: 86px;
    height: 42px;
  }

  .chart-page .line-custom-down {
    left: 140px;
    top: 220px;
    height: 32px;
  }

  .chart-page .line-semi-down {
    left: 532px;
    top: 220px;
    height: 32px;
  }

  .chart-page .line-reno-down {
    left: 896px;
    top: 220px;
    height: 32px;
    z-index: 1;
    background: transparent;
  }

  .chart-page .line-reform-down {
    left: 1136px;
    top: 220px;
    height: 32px;
    z-index: 1;
    background: transparent;
  }

  .chart-page .line-reno-down.arrow::after,
  .chart-page .line-reform-down.arrow::after {
    border-left-width: 7px;
    border-right-width: 7px;
    border-top-width: 12px;
    border-top-color: rgba(128, 101, 73, 0.46);
  }

  .chart-page .arrow::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 0;
    height: 0;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid var(--line);
  }

  .chart-page .product {
    overflow: hidden;
    text-align: center;
    background: rgba(255, 255, 255, 0.84);
    border: 1.5px solid;
    border-radius: 18px;
    box-shadow: 0 8px 20px rgba(128, 101, 73, 0.08);
  }

  .chart-page .product img {
    width: 100%;
    height: 118px;
    object-fit: cover;
  }

  .chart-page .product__body {
    padding: 16px 14px 18px;
  }

  .chart-page .product__kicker {
    margin: 0;
    font-size: 12px;
    letter-spacing: 0.18em;
  }

  .chart-page .product__name {
    margin: 0;
    color: #1f1914;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 44px;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .chart-page .product img.product__logo {
    width: auto;
    height: auto;
    margin: 4px auto 8px;
    object-fit: contain;
  }

  .chart-page .product img.product__logo--mua {
    max-width: 124px;
    max-height: 58px;
    margin: 0 auto 3px;
  }

  .chart-page .product img.product__logo--linera {
    max-width: 136px;
    max-height: 15px;
    margin: 6px auto 7px;
  }

  .chart-page .product img.product__logo--hanahou {
    max-width: 132px;
    max-height: 24px;
    margin-top: 2px;
    margin-bottom: 4px;
  }

  .chart-page .product img.product__logo--trettio {
    max-width: 110px;
    max-height: 40px;
    margin-bottom: 2px;
  }

  .chart-page .product__caption {
    margin: 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.55;
  }

  .chart-page .product__more,
  .chart-page .tiny-more {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }

  .chart-page .product__more,
  .chart-page .tiny-more,
  .chart-page .trettio-card__more,
  .chart-page .trettio-flat__more,
  .chart-page .uakoko__text a,
  .chart-page .chat-pet-card__more {
    font-family: inherit;
  }

  .chart-page .product--mua {
    left: 0;
    top: 258px;
    width: 280px;
    height: 295px;
    border-color: var(--pink);
    border-radius: 18px;
    background: #fdece4;
  }

  .chart-page .product--mua > img {
    height: 142px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0, 0, 0, 0.72) 80%, transparent 100%);
  }

  .chart-page .product--mua::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background:
      radial-gradient(ellipse at 0% 63%, rgba(253, 236, 228, 0.28) 0%, rgba(253, 236, 228, 0) 36%),
      radial-gradient(ellipse at 100% 63%, rgba(253, 236, 228, 0.28) 0%, rgba(253, 236, 228, 0) 36%),
      linear-gradient(180deg, rgba(253, 236, 228, 0) 32%, rgba(253, 236, 228, 0.18) 50%, rgba(253, 236, 228, 0.72) 68%, #fdece4 84%, #fdece4 100%);
  }

  .chart-page .product--mua .product__body {
    position: relative;
    z-index: 3;
    height: 194px;
    margin-top: -50px;
    padding: 36px 18px 12px;
    background: linear-gradient(180deg, rgba(253, 236, 228, 0) 0%, rgba(253, 236, 228, 0.36) 24%, #fdece4 48%, #fdece4 100%);
  }

  .chart-page .product--mua .product__kicker {
    margin-bottom: 1px;
    color: #8b604f;
    font-size: 11px;
    line-height: 1.25;
    letter-spacing: 0.16em;
  }

  .chart-page .product--mua .product__caption {
    margin-top: 4px;
    color: #8b604f;
    font-size: 13px;
    line-height: 1.45;
  }

  .chart-page .product--mua .product__caption-small {
    display: block;
    margin-bottom: 3px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.04em;
  }

  .chart-page .product--mua .product__more {
    margin-top: 8px;
    color: #8b604f;
    font-size: 9.5px;
  }

  .chart-page .panel--semi {
    left: 294px;
    top: 258px;
    width: 476px;
    height: 548px;
    padding: 18px 18px 22px;
    background: rgba(255, 255, 238, 0.88);
    border: 1px solid #d9d4bd;
    border-radius: 18px;
  }

  .chart-page .panel__question {
    margin: 0 0 16px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.08em;
  }

  .chart-page .choice-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
  }

  .chart-page .mini-choice {
    display: flex;
    min-height: 78px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 11px 8px;
    text-align: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #d6d0c6;
    border-radius: 14px;
  }

  .chart-page .mini-choice strong {
    display: block;
    color: var(--brown);
    font-size: 20px;
    line-height: 1.2;
  }

  .chart-page .mini-choice span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.2;
  }

  .chart-page .product--linera {
    left: 18px;
    top: 172px;
    width: 216px;
    height: 212px;
    border: 0;
    border-radius: 18px;
    background: #ffffd9;
  }

  .chart-page .product--linera::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background:
      radial-gradient(ellipse at 0% 56%, rgba(255, 255, 217, 0.34) 0%, rgba(255, 255, 217, 0) 32%),
      radial-gradient(ellipse at 100% 56%, rgba(255, 255, 217, 0.34) 0%, rgba(255, 255, 217, 0) 32%),
      linear-gradient(180deg, rgba(255, 255, 217, 0) 0%, rgba(255, 255, 217, 0) 42%, rgba(255, 255, 217, 0.48) 57%, #ffffd9 72%, #ffffd9 100%);
  }

  .chart-page .product--linera > img {
    position: absolute;
    top: -1px;
    right: -1px;
    left: -1px;
    z-index: 1;
    width: calc(100% + 2px);
    max-width: none;
    height: 64%;
    object-fit: cover;
    object-position: center top;
    border-radius: inherit;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%);
  }

  .chart-page .product--linera::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border: 1.5px solid #9daa5d;
    border-radius: 18px;
  }

  .chart-page .product--linera .product__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 13px;
    z-index: 3;
    height: auto;
    margin-top: 0;
    padding: 0 14px;
  }

  .chart-page .product--linera .product__kicker {
    color: #8d7b57;
    font-size: 9px;
    line-height: 1.3;
    letter-spacing: 0.12em;
  }

  .chart-page .product--linera .product__caption {
    margin-top: 0;
    color: #8d7b57;
    font-size: 9.5px;
    line-height: 1.45;
  }

  .chart-page .product--linera .product__more {
    margin-top: 5px;
    color: #8d7b57;
    font-size: 9px;
  }

  .chart-page .trettio-stack {
    position: absolute;
    left: 244px;
    top: 172px;
    width: 216px;
    height: 246px;
    overflow: hidden;
    display: block;
    background: #fff;
    border-radius: 19px;
    box-shadow: 0 4px 10px rgba(112, 161, 172, 0.12);
  }

  .chart-page .trettio-stack::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border: 1.5px solid #79bfcd;
    border-radius: 19px;
  }

  .chart-page .trettio-card {
    position: relative;
    overflow: hidden;
    height: 74px;
    display: block;
    background: #fff;
    border: 0;
    border-radius: 0;
  }

  .chart-page .trettio-card:first-child {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
    background: #d7f4f2;
    border-top: 0;
  }

  .chart-page .trettio-card__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue-dark);
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.12em;
  }

  .chart-page .trettio-card__brand img {
    width: 104px;
    max-height: 18px;
    height: auto;
    object-fit: contain;
  }

  .chart-page .trettio-card__series {
    margin-left: 5px;
    color: var(--blue-dark);
    font-size: 10px;
    font-weight: 700;
  }

  .chart-page .trettio-card__text {
    display: block;
    width: 100px;
    padding: 15px 5px 0 17px;
    position: relative;
    z-index: 4;
    white-space: nowrap;
  }

  .chart-page .trettio-card__title {
    display: block;
    color: var(--blue-dark);
    font-family: Arial, sans-serif;
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1;
    white-space: nowrap;
  }

  .chart-page .trettio-card__floor {
    margin-left: 3px;
    color: var(--blue-dark);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .chart-page .trettio-card__kana {
    display: block;
    margin-top: 8px;
    color: #9c907f;
    font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    font-size: 8.4px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .chart-page .trettio-card__more {
    display: block;
    margin-top: 17px;
    margin-left: 6px;
    color: #9c907f;
    font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    font-size: 9.2px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .chart-page .trettio-card:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 1.5px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      #fff 0%,
      #fff 39%,
      rgba(255, 255, 255, 0.96) 45%,
      rgba(255, 255, 255, 0.76) 50%,
      rgba(255, 255, 255, 0.38) 56%,
      rgba(255, 255, 255, 0) 64%
    );
  }

  .chart-page .trettio-card:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 1.5px;
    z-index: 5;
    pointer-events: none;
    background: #79bfcd;
  }

  .chart-page .trettio-card > img {
    position: absolute;
    top: 0;
    right: 0;
    width: 126px;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    transform: none;
    transform-origin: center;
  }

  .chart-page .trettio-stack .trettio-card {
    height: 68px;
  }

  .chart-page .trettio-stack .trettio-card:first-child {
    height: 42px;
    padding: 0 9px;
  }

  .chart-page .trettio-stack .trettio-card__brand img {
    width: 76px;
    max-height: 14px;
  }

  .chart-page .trettio-stack .trettio-card__series {
    margin-left: 6px;
    font-size: 8px;
  }

  .chart-page .trettio-stack .trettio-card__text {
    width: 94px;
    padding: 12px 5px 0 13px;
  }

  .chart-page .trettio-stack .trettio-card__title {
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  .chart-page .trettio-stack .trettio-card__kana {
    margin-top: 6px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card__more {
    margin-top: 10px;
    margin-left: 3px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card:not(:first-child)::before {
    background: linear-gradient(
      90deg,
      #fff 0%,
      #fff 41%,
      rgba(255, 255, 255, 0.96) 47%,
      rgba(255, 255, 255, 0.78) 52%,
      rgba(255, 255, 255, 0.4) 58%,
      rgba(255, 255, 255, 0) 66%
    );
  }

  .chart-page .trettio-stack .trettio-card > img {
    width: 124px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2) .trettio-card__text {
    width: 94px;
    padding: 12px 5px 0 13px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2) .trettio-card__title {
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2) .trettio-card__floor {
    margin-left: 2px;
    font-size: 11px;
    letter-spacing: 0.02em;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2) .trettio-card__kana {
    margin-top: 6px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2) .trettio-card__more {
    margin-top: 10px;
    margin-left: 3px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2)::before {
    background: linear-gradient(
      90deg,
      #fff 0%,
      #fff 40%,
      rgba(255, 255, 255, 0.98) 45%,
      rgba(255, 255, 255, 0.78) 50%,
      rgba(255, 255, 255, 0.34) 56%,
      rgba(255, 255, 255, 0) 64%
    );
  }

  .chart-page .trettio-stack .trettio-card:nth-child(2) > img {
    width: 126px;
    object-position: center;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(3) .trettio-card__text {
    width: 94px;
    padding: 12px 5px 0 13px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(3) .trettio-card__title {
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(3) .trettio-card__kana {
    margin-top: 6px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(3) .trettio-card__more {
    margin-top: 10px;
    margin-left: 3px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(3)::before {
    background: linear-gradient(
      90deg,
      #fff 0%,
      #fff 40%,
      rgba(255, 255, 255, 0.98) 45%,
      rgba(255, 255, 255, 0.78) 50%,
      rgba(255, 255, 255, 0.34) 56%,
      rgba(255, 255, 255, 0) 64%
    );
  }

  .chart-page .trettio-stack .trettio-card:nth-child(3) > img {
    width: 126px;
    object-position: center;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(4) .trettio-card__text {
    width: 94px;
    padding: 12px 5px 0 13px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(4) .trettio-card__title {
    font-size: 15px;
    letter-spacing: 0.08em;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(4) .trettio-card__kana {
    margin-top: 6px;
    font-size: 7.2px;
  }

  .chart-page .trettio-stack .trettio-card:nth-child(4) .trettio-card__more {
    margin-top: 10px;
    margin-left: 3px;
    font-size: 7.2px;
  }

  .chart-page .trettio-flat {
    position: absolute;
    left: 18px;
    top: 398px;
    width: 216px;
    height: 119px;
    overflow: hidden;
    display: block;
    font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 10px rgba(112, 161, 172, 0.12);
  }

  .chart-page .trettio-flat::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    border: 1.5px solid #79bfcd;
    border-radius: 18px;
  }

  .chart-page .trettio-flat__head {
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    text-align: center;
    background: #d8f5f2;
    border-bottom: 1px solid rgba(113, 174, 189, 0.42);
  }

  .chart-page .trettio-flat .trettio-card__brand img {
    width: 82px;
    max-height: 15px;
  }

  .chart-page .trettio-flat .trettio-card__series {
    margin-left: 5px;
    color: #6c9caf;
    font-size: 8.5px;
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .chart-page .trettio-flat__text {
    position: relative;
    z-index: 3;
    display: block;
    width: 100px;
    min-height: 81px;
    padding: 12px 4px 0 15px;
    white-space: nowrap;
  }

  .chart-page .trettio-flat .trettio-card__title {
    color: #6c9caf;
    font-size: 14px;
    letter-spacing: 0.08em;
    white-space: nowrap;
  }

  .chart-page .trettio-flat .trettio-card__kana {
    margin-top: 3px;
    color: #b1a06d;
    font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    font-size: 7.5px;
    line-height: 1.45;
    letter-spacing: 0.02em;
    white-space: nowrap;
  }

  .chart-page .trettio-flat__more {
    display: block;
    position: relative;
    z-index: 4;
    margin-top: 10px;
    margin-left: 3px;
    color: #9c907f;
    font-family: "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
    font-size: 7.2px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.95);
  }

  .chart-page .trettio-flat > img {
    position: absolute;
    top: 38px;
    right: 0;
    bottom: auto;
    width: 118px;
    max-width: none;
    height: calc(100% - 38px);
    object-fit: cover;
    object-position: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 15%, rgba(0, 0, 0, 0.58) 32%, #000 54%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 15%, rgba(0, 0, 0, 0.58) 32%, #000 54%, #000 100%);
  }

  .chart-page .product--reno {
    left: 796px;
    top: 266px;
    width: 200px;
    height: 232px;
    border-color: var(--blue);
    border-radius: 16px;
    background: linear-gradient(180deg, #dff7f7 0%, #cbe9e7 100%);
  }

  .chart-page .product--reno > img {
    height: 118px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.62) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 50%, rgba(0, 0, 0, 0.62) 70%, transparent 100%);
  }

  .chart-page .product--reno::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background:
      radial-gradient(ellipse at 0% 52%, rgba(223, 247, 247, 0.5) 0%, rgba(223, 247, 247, 0) 36%),
      radial-gradient(ellipse at 100% 52%, rgba(223, 247, 247, 0.5) 0%, rgba(223, 247, 247, 0) 36%),
      linear-gradient(180deg, rgba(223, 247, 247, 0) 18%, rgba(223, 247, 247, 0.42) 40%, rgba(223, 247, 247, 0.9) 58%, rgba(223, 247, 247, 0.2) 86%, rgba(223, 247, 247, 0) 100%);
  }

  .chart-page .product--reno .product__body {
    margin-top: -24px;
    padding: 30px 12px 12px;
    position: relative;
    z-index: 3;
  }

  .chart-page .product--reno .product__logo--trettio {
    max-width: 118px;
    max-height: 28px;
    margin: 2px auto 3px;
  }

  .chart-page .product--reno .product__caption {
    margin-top: 5px;
    color: #8a7357;
    font-size: 10px;
    line-height: 1.55;
  }

  .chart-page .product--reno .product__caption:first-of-type {
    margin-top: 2px;
    color: #668f9a;
    font-family: Arial, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.18em;
  }

  .chart-page .product--reno .product__more {
    margin-top: 12px;
    color: #8a7357;
    font-size: 9.5px;
  }

  .chart-page .product--reform {
    left: 1036px;
    top: 266px;
    width: 200px;
    height: 232px;
    border-color: var(--orange);
    border-radius: 16px;
    background: linear-gradient(180deg, #fff8cf 0%, #fff0ad 100%);
  }

  .chart-page .product--reform > img {
    height: 118px;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.66) 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 48%, rgba(0, 0, 0, 0.66) 70%, transparent 100%);
  }

  .chart-page .product--reform::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    background:
      radial-gradient(ellipse at 0% 52%, rgba(255, 248, 207, 0.5) 0%, rgba(255, 248, 207, 0) 36%),
      radial-gradient(ellipse at 100% 52%, rgba(255, 248, 207, 0.5) 0%, rgba(255, 248, 207, 0) 36%),
      linear-gradient(180deg, rgba(255, 248, 207, 0) 18%, rgba(255, 248, 207, 0.42) 40%, rgba(255, 248, 207, 0.9) 58%, rgba(255, 248, 207, 0.2) 86%, rgba(255, 248, 207, 0) 100%);
  }

  .chart-page .product--reform .product__body {
    margin-top: -30px;
    padding: 24px 10px 8px;
    position: relative;
    z-index: 3;
  }

  .chart-page .product--reform .product__kicker {
    margin-bottom: 1px;
    color: #8a7357;
    font-size: 8.2px;
    letter-spacing: 0.08em;
  }

  .chart-page .product--reform .product__logo--hanahou {
    max-width: 126px;
    max-height: 22px;
    margin-top: 2px;
    margin-bottom: 5px;
  }

  .chart-page .product--reform .product__caption {
    margin-top: 10px;
    color: #8a7357;
    font-size: 10px;
    line-height: 1.42;
  }

  .chart-page .product--reform .product__more {
    margin-top: 7px;
    color: #806549;
    font-size: 9px;
  }

  .chart-page .plus {
    position: absolute;
    left: 50%;
    top: 832px;
    width: 64px;
    height: 64px;
    transform: translateX(-50%);
  }

  .chart-page .plus::before,
  .chart-page .plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 999px;
    transform: translate(-50%, -50%);
  }

  .chart-page .plus::before {
    width: 64px;
    height: 16px;
  }

  .chart-page .plus::after {
    width: 16px;
    height: 64px;
  }

  .chart-page .uakoko {
    position: absolute;
    left: 50%;
    top: 922px;
    width: 780px;
    min-height: 176px;
    display: grid;
    grid-template-columns: 235px 265px 280px;
    align-items: center;
    overflow: hidden;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.94);
    border: 1.5px solid var(--brown);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(128, 101, 73, 0.12);
  }

  .chart-page .uakoko__logo {
    padding: 26px 24px;
    text-align: center;
    align-self: center;
  }

  .chart-page .uakoko__logo small {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  .chart-page .uakoko__mark {
    width: 195px;
    margin: 0 auto;
  }

  .chart-page .uakoko__mark img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .chart-page .uakoko__text {
    padding: 20px 10px;
    text-align: center;
    align-self: center;
  }

  .chart-page .uakoko__text h2 {
    margin: 0 0 10px;
    color: var(--brown);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.55;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  .chart-page .uakoko__text p {
    margin: 0;
    font-size: 13px;
    line-height: 1.8;
    white-space: nowrap;
  }

  .chart-page .uakoko__text a {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
  }

  .chart-page .uakoko__image {
    min-height: 176px;
    align-self: stretch;
    overflow: hidden;
  }

  .chart-page .uakoko__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: none;
    transform-origin: center;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 10%, rgba(0, 0, 0, 0.72) 22%, #000 34%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.16) 10%, rgba(0, 0, 0, 0.72) 22%, #000 34%, #000 100%);
    user-select: none;
    -webkit-user-drag: none;
  }

  @media (min-width: 901px) and (max-width: 1320px) {
    .chart-page .chart {
      left: 50%;
      width: 1260px;
      max-width: none;
      margin-left: -630px;
      margin-right: 0;
      transform-origin: top center;
    }
  }

  @media (min-width: 1281px) and (max-width: 1320px) {
    .chart-page .chart {
      height: 1098px;
      transform: scale(0.98);
    }
  }

  @media (min-width: 1201px) and (max-width: 1280px) {
    .chart-page .chart {
      height: 1030px;
      transform: scale(0.92);
    }
  }

  @media (min-width: 1121px) and (max-width: 1200px) {
    .chart-page .chart {
      height: 963px;
      transform: scale(0.86);
    }
  }

  @media (min-width: 1041px) and (max-width: 1120px) {
    .chart-page .chart {
      height: 885px;
      transform: scale(0.79);
    }
  }

  @media (min-width: 961px) and (max-width: 1040px) {
    .chart-page .chart {
      height: 818px;
      transform: scale(0.73);
    }
  }

  @media (min-width: 901px) and (max-width: 960px) {
    .chart-page .chart {
      height: 762px;
      transform: scale(0.68);
    }
  }

  @media (max-width: 900px) {
    .chart-page {
      min-height: auto;
      padding: 28px 14px 24px;
    }

    .chart-page::before {
      left: -96px;
      top: 420px;
      width: 210px;
      height: 210px;
      opacity: 0.26;
    }

    .chart-page .intro {
      margin-bottom: 24px;
    }

    .chart-page .intro__brand {
      margin-bottom: 12px;
      font-size: 12px;
    }

    .chart-page h1 {
      font-size: clamp(20px, 5.7vw, 28px);
      letter-spacing: 0.03em;
      white-space: nowrap;
    }

    .chart-page .intro__lead {
      margin: 8px 0 24px;
      font-size: clamp(12px, 3.55vw, 15px);
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .chart-page .chart {
      display: none;
    }

    .chart-page .chat-flow {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      max-width: 430px;
      margin: 0 auto;
    }

    .chart-page .chat-panel {
      display: block;
    }

    .chart-page .chat-screen {
      display: grid;
      gap: 12px;
    }

    .chart-page .chat-question {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 44px;
      padding: 12px 18px;
      color: var(--brown);
      font-size: 14px;
      font-weight: 700;
      line-height: 1.55;
      text-align: center;
      letter-spacing: 0.04em;
      word-break: keep-all;
      overflow-wrap: normal;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid rgba(128, 101, 73, 0.28);
      border-radius: 16px;
      box-shadow: 0 10px 22px rgba(128, 101, 73, 0.14);
    }

    .chart-page .chat-step-label {
      display: block;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      text-align: center;
      letter-spacing: 0.16em;
    }

    .chart-page .chat-choice-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }

    .chart-page .chat-choice-card {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 148px;
      padding: 16px 12px;
      color: var(--brown);
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.55;
      text-align: center;
      letter-spacing: 0;
      word-break: keep-all;
      overflow-wrap: normal;
      cursor: pointer;
      background: rgba(255, 255, 255, 0.92);
      border: 1px solid rgba(128, 101, 73, 0.36);
      border-radius: 14px;
      box-shadow: 0 10px 22px rgba(128, 101, 73, 0.12);
      appearance: none;
      transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }

    .chart-page .chat-choice-card:hover,
    .chart-page .chat-choice-card:focus-visible {
      border-color: var(--brown);
      box-shadow: 0 12px 26px rgba(128, 101, 73, 0.17);
      transform: translateY(-1px);
    }

    .chart-page .chat-choice-card:focus-visible,
    .chart-page .chat-reset:focus-visible,
    .chart-page .chat-result-grid a:focus-visible {
      outline: 2px solid var(--brown);
      outline-offset: 4px;
    }

    .chart-page .chat-result-grid {
      display: grid;
      width: 100%;
      gap: 12px;
    }

    .chart-page .chat-result-grid > * {
      width: 100%;
      min-width: 0;
    }

    .chart-page .chat-result-grid .product,
    .chart-page .chat-result-grid .trettio-stack,
    .chart-page .chat-result-grid .trettio-flat {
      position: relative;
      left: auto;
      top: auto;
      bottom: auto;
      width: 100%;
      transform: none;
      margin: 0;
    }

    .chart-page .chat-result-grid .product {
      display: block;
      min-height: 0;
      height: auto;
      overflow: hidden;
      text-align: center;
      box-shadow: 0 12px 28px rgba(128, 101, 73, 0.13);
    }

    .chart-page .chat-result-grid .product--mua {
      border-radius: 24px;
    }

    .chart-page .chat-result-grid .product--mua > img,
    .chart-page .chat-result-grid .product--linera > img,
    .chart-page .chat-result-grid .product--reno > img,
    .chart-page .chat-result-grid .product--reform > img {
      width: 100%;
      height: 178px;
      object-fit: cover;
    }

    .chart-page .chat-result-grid .product--mua > img {
      height: clamp(220px, 58vw, 280px);
      object-position: center top;
    }

    .chart-page .chat-result-grid .product--mua::before,
    .chart-page .chat-result-grid .product--linera::before,
    .chart-page .chat-result-grid .product--reno::before,
    .chart-page .chat-result-grid .product--reform::before {
      height: 100%;
    }

    .chart-page .chat-result-grid .product--mua .product__body {
      height: auto;
      min-height: 240px;
      margin-top: -42px;
      padding: 26px 28px 26px;
    }

    .chart-page .chat-result-grid .product--mua .product__kicker {
      font-size: 14px;
      letter-spacing: 0.2em;
    }

    .chart-page .chat-result-grid .product--mua img.product__logo--mua {
      max-width: 143px;
      max-height: 112px;
      margin-bottom: 8px;
    }

    .chart-page .chat-result-grid .product--mua .product__caption {
      font-size: 15px;
      line-height: 1.75;
    }

    .chart-page .chat-result-grid .product--mua .product__caption-small {
      font-size: 13px;
    }

    .chart-page .chat-result-grid .product--mua .product__more {
      margin-top: 8px;
      font-size: 13px;
    }

    .chart-page .chat-result-grid .product--linera,
    .chart-page .chat-result-grid .product--reno,
    .chart-page .chat-result-grid .product--reform {
      border-radius: 18px;
    }

    .chart-page .chat-result-grid .product--linera {
      height: clamp(390px, 96vw, 460px);
      border: 0;
      border-radius: 30px;
      background: #ffffd9;
    }

    .chart-page .chat-result-grid .product--linera::after {
      border-color: #a9b747;
      border-radius: 30px;
    }

    .chart-page .chat-result-grid .product--linera > img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 64%;
      object-fit: cover;
      object-position: center top;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0, 0, 0, 0.58) 86%, transparent 100%);
    }

    .chart-page .chat-result-grid .product--linera::before {
      background:
        linear-gradient(180deg, rgba(255, 255, 217, 0) 0%, rgba(255, 255, 217, 0) 42%, rgba(255, 255, 217, 0.46) 55%, #ffffd9 70%, #ffffd9 100%),
        radial-gradient(ellipse at 0% 58%, rgba(255, 255, 217, 0.32) 0%, rgba(255, 255, 217, 0) 34%),
        radial-gradient(ellipse at 100% 58%, rgba(255, 255, 217, 0.32) 0%, rgba(255, 255, 217, 0) 34%);
    }

    .chart-page .chat-result-grid .product--linera .product__body,
    .chart-page .chat-result-grid .product--reno .product__body,
    .chart-page .chat-result-grid .product--reform .product__body {
      height: auto;
      min-height: 150px;
      margin-top: -28px;
      padding: 34px 18px 22px;
    }

    .chart-page .chat-result-grid .product--linera .product__body {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 22px;
      min-height: 0;
      margin-top: 0;
      padding: 0 28px;
    }

    .chart-page .chat-result-grid .product--linera .product__kicker {
      font-size: 17px;
      line-height: 1.25;
      letter-spacing: 0.14em;
    }

    .chart-page .chat-result-grid .product--linera img.product__logo--linera {
      width: 80%;
      max-width: 304px;
      max-height: 64px;
      margin: 18px auto 13px;
    }

    .chart-page .chat-result-grid .product--linera .product__caption,
    .chart-page .chat-result-grid .product--reno .product__caption,
    .chart-page .chat-result-grid .product--reform .product__caption {
      font-size: 12px;
      line-height: 1.65;
    }

    .chart-page .chat-result-grid .product--linera .product__caption {
      font-size: 16px;
      line-height: 1.5;
      letter-spacing: 0.08em;
    }

    .chart-page .chat-result-grid .product--linera .product__more,
    .chart-page .chat-result-grid .product--reno .product__more,
    .chart-page .chat-result-grid .product--reform .product__more {
      margin-top: 10px;
      font-size: 11px;
    }

    .chart-page .chat-result-grid .product--linera .product__more {
      margin-top: 18px;
      font-size: 14px;
      letter-spacing: 0.08em;
    }

    .chart-page .chat-result-grid .product--reno {
      position: relative;
      height: clamp(340px, 96vw, 410px);
      border-color: var(--blue);
      border-radius: 30px;
      background: #dff7f7;
    }

    .chart-page .chat-result-grid .product--reno > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      max-width: none;
      height: 62%;
      object-position: center top;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.66) 84%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.66) 84%, transparent 100%);
    }

    .chart-page .chat-result-grid .product--reno::before {
      inset: 0;
      background:
        linear-gradient(180deg, rgba(223, 247, 247, 0) 0%, rgba(223, 247, 247, 0) 36%, rgba(223, 247, 247, 0.56) 50%, #dff7f7 66%, #dff7f7 100%),
        radial-gradient(ellipse at 0% 58%, rgba(223, 247, 247, 0.52) 0%, rgba(223, 247, 247, 0) 34%),
        radial-gradient(ellipse at 100% 58%, rgba(223, 247, 247, 0.52) 0%, rgba(223, 247, 247, 0) 34%);
    }

    .chart-page .chat-result-grid .product--reno .product__body {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 18px;
      min-height: 0;
      margin-top: 0;
      padding: 0 20px;
    }

    .chart-page .chat-result-grid .product--reno img.product__logo--trettio {
      width: clamp(160px, 48vw, 200px);
      max-width: none;
      max-height: none;
      margin: 0 auto 6px;
    }

    .chart-page .chat-result-grid .product--reno .product__caption {
      color: #8a7357;
      margin-top: 14px;
      font-size: clamp(14px, 3.9vw, 17px);
      line-height: 1.55;
      letter-spacing: 0.05em;
    }

    .chart-page .chat-result-grid .product--reno .product__caption:first-of-type {
      color: #6a9db1;
      font-family: Arial, sans-serif;
      margin-top: 0;
      font-size: clamp(18px, 4.8vw, 22px);
      font-weight: 700;
      line-height: 1.15;
      letter-spacing: 0.18em;
    }

    .chart-page .chat-result-grid .product--reno .product__more {
      margin-top: 14px;
      color: #8a7357;
      font-size: clamp(12px, 3.4vw, 14px);
      letter-spacing: 0.08em;
    }

    .chart-page .chat-result-grid .product--reform {
      position: relative;
      height: clamp(340px, 94vw, 410px);
      border-color: var(--orange);
      border-radius: 24px;
      background: #fff0ad;
    }

    .chart-page .chat-result-grid .product--reform > img {
      position: absolute;
      top: 0;
      left: -1px;
      width: calc(100% + 4px);
      max-width: none;
      height: 44%;
      max-height: none;
      object-position: center top;
      -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.58) 78%, transparent 100%);
      mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.58) 78%, transparent 100%);
    }

    .chart-page .chat-result-grid .product--reform::before {
      inset: 0;
      background:
        linear-gradient(180deg, rgba(255, 240, 173, 0) 0%, rgba(255, 240, 173, 0) 28%, rgba(255, 240, 173, 0.62) 39%, #fff0ad 49%, #fff0ad 100%),
        radial-gradient(ellipse at 0% 50%, rgba(255, 240, 173, 0.48) 0%, rgba(255, 240, 173, 0) 34%),
        radial-gradient(ellipse at 100% 50%, rgba(255, 240, 173, 0.48) 0%, rgba(255, 240, 173, 0) 34%);
    }

    .chart-page .chat-result-grid .product--reform .product__body {
      position: absolute;
      left: 0;
      right: 0;
      top: 46%;
      bottom: auto;
      min-height: 0;
      margin-top: 0;
      padding: 0 20px;
    }

    .chart-page .chat-result-grid .product--reform .product__kicker {
      color: #9d875f;
      margin-bottom: 4px;
      font-size: clamp(12px, 3.4vw, 14px);
      line-height: 1.35;
      letter-spacing: 0.08em;
      white-space: nowrap;
    }

    .chart-page .chat-result-grid .product--reform img.product__logo--hanahou {
      width: clamp(150px, 46vw, 190px);
      max-width: none;
      max-height: none;
      margin: 0 auto 4px;
    }

    .chart-page .chat-result-grid .product--reform .product__caption {
      color: #8a7357;
      margin-top: 15px;
      font-size: clamp(13px, 3.8vw, 16px);
      line-height: 1.42;
      letter-spacing: 0.04em;
    }

    .chart-page .chat-result-grid .product--reform .product__more {
      margin-top: 27px;
      color: #8a7357;
      font-size: clamp(11px, 3.2vw, 13px);
      letter-spacing: 0.04em;
    }

    .chart-page .chat-result-grid .trettio-stack {
      height: auto;
      border-radius: 30px;
    }

    .chart-page .chat-result-grid .trettio-stack::after {
      border-radius: 30px;
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card {
      display: block;
      height: clamp(126px, 34vw, 158px);
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card:first-child {
      display: flex;
      height: clamp(62px, 17vw, 86px);
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card__brand img {
      width: clamp(138px, 36vw, 184px);
      max-height: 34px;
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card__series {
      margin-left: 10px;
      font-size: clamp(12px, 3.4vw, 16px);
      font-weight: 700;
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card__text,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(2) .trettio-card__text,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(3) .trettio-card__text,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(4) .trettio-card__text {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 43%;
      padding: 0 6px 0 clamp(18px, 5.4vw, 32px);
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card__title,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(2) .trettio-card__title,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(3) .trettio-card__title,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(4) .trettio-card__title {
      font-size: clamp(19px, 4.8vw, 22px);
      line-height: 1;
      letter-spacing: 0.05em;
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(2) .trettio-card__floor {
      margin-left: 3px;
      font-size: clamp(12px, 3.1vw, 14px);
      letter-spacing: 0.02em;
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card__kana,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(2) .trettio-card__kana,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(3) .trettio-card__kana,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(4) .trettio-card__kana {
      margin-top: 10px;
      font-size: 13px;
      line-height: 1.2;
      letter-spacing: 0.04em;
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(2) .trettio-card__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(3) .trettio-card__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(4) .trettio-card__more {
      margin-top: clamp(22px, 6vw, 34px);
      margin-left: 3px;
      font-size: clamp(11px, 3.25vw, 16px);
    }

    .chart-page .chat-result-grid .trettio-stack .trettio-card > img {
      width: 63%;
      height: 100%;
      object-position: center;
    }

    .chart-page .chat-result-grid .trettio-flat {
      height: 196px;
      border-radius: 18px;
    }

    .chart-page .chat-result-grid .trettio-flat__head {
      height: 60px;
    }

    .chart-page .chat-result-grid .trettio-flat__text {
      width: 43%;
      min-height: 136px;
      padding: 27px 5px 0 22px;
    }

    .chart-page .chat-result-grid .trettio-flat .trettio-card__brand img {
      width: 128px;
      max-height: 24px;
    }

    .chart-page .chat-result-grid .trettio-flat .trettio-card__series {
      font-size: 12px;
    }

    .chart-page .chat-result-grid .trettio-flat .trettio-card__title {
      font-size: 22px;
    }

    .chart-page .chat-result-grid .trettio-flat .trettio-card__kana {
      margin-top: 8px;
      font-size: 10px;
    }

    .chart-page .chat-result-grid .trettio-flat__more {
      margin-top: 24px;
      font-size: 10px;
    }

    .chart-page .chat-result-grid .trettio-flat > img {
      top: 60px;
      width: 62%;
      max-width: none;
      height: calc(100% - 60px);
    }

    .chart-page .chat-reset {
      display: block;
      margin: 16px auto 0;
      padding: 6px 10px;
      color: var(--brown);
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      cursor: pointer;
      background: transparent;
      border: 0;
      text-decoration: underline;
      text-underline-offset: 4px;
    }

    .chart-page .chat-pet-addon {
      display: grid;
      width: 100%;
      gap: 12px;
      margin-top: 0;
    }

    .chart-page .chat-pet-plus {
      position: relative;
      width: 52px;
      height: 52px;
      margin: 0 auto;
    }

    .chart-page .chat-pet-plus::before,
    .chart-page .chat-pet-plus::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      background: #fff;
      border-radius: 999px;
      transform: translate(-50%, -50%);
    }

    .chart-page .chat-pet-plus::before {
      width: 52px;
      height: 13px;
    }

    .chart-page .chat-pet-plus::after {
      width: 13px;
      height: 52px;
    }

    .chart-page .chat-pet-card {
      position: relative;
      width: 100%;
      aspect-ratio: 777 / 432;
      min-height: 220px;
      overflow: hidden;
      color: var(--brown);
      text-align: center;
      background: rgba(255, 255, 255, 0.94);
      border: 1.5px solid var(--brown);
      border-radius: 18px;
      box-shadow: 0 12px 28px rgba(128, 101, 73, 0.13);
    }

    .chart-page .chat-pet-card::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.95) 47%, rgba(255, 255, 255, 0.36) 61%, rgba(255, 255, 255, 0) 76%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 100%);
      pointer-events: none;
    }

    .chart-page .chat-pet-card__image {
      position: absolute;
      top: 0;
      right: -4%;
      bottom: auto;
      left: auto;
      width: auto;
      height: 100%;
      object-fit: contain;
      object-position: right center;
      opacity: 1;
      user-select: none;
      -webkit-user-drag: none;
    }

    .chart-page .chat-pet-card__body {
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: block;
      width: 60%;
      padding: 0 6px 0 10px;
    }

    .chart-page .chat-pet-card__small {
      display: block;
      margin-bottom: 4px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.08em;
    }

    .chart-page .chat-pet-card__logo {
      width: clamp(128px, 34vw, 180px);
      margin: 0 auto 5px;
    }

    .chart-page .chat-pet-card__title {
      display: block;
      margin: 0 0 4px;
      font-size: clamp(12px, 3.35vw, 14px);
      font-weight: 500;
      line-height: 1.48;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .chart-page .chat-pet-card__text {
      display: block;
      margin: 0;
      font-size: clamp(11px, 3vw, 12px);
      line-height: 1.45;
      letter-spacing: 0.04em;
      white-space: nowrap;
    }

    .chart-page .chat-pet-card__more {
      display: inline-block;
      margin-top: 4px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.04em;
    }

    .chart-page .chat-result-grid .product--mua .product__more,
    .chart-page .chat-result-grid .product--linera .product__more,
    .chart-page .chat-result-grid .product--reno .product__more,
    .chart-page .chat-result-grid .product--reform .product__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(2) .trettio-card__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(3) .trettio-card__more,
    .chart-page .chat-result-grid .trettio-stack .trettio-card:nth-child(4) .trettio-card__more,
    .chart-page .chat-result-grid .trettio-flat__more {
      font-size: 12px;
    }

    @media (prefers-reduced-motion: no-preference) {
      .chart-page .chat-screen {
        animation: chatScreenIn 1.8s cubic-bezier(0.16, 0.72, 0.18, 1) both;
      }

      .chart-page .chat-result-grid > *,
      .chart-page .chat-pet-addon {
        animation: chatResultIn 2.15s cubic-bezier(0.16, 0.72, 0.18, 1) both;
      }

      .chart-page .chat-result-grid > *:nth-child(2) {
        animation-delay: 0.5s;
      }

      .chart-page .chat-result-grid > *:nth-child(3) {
        animation-delay: 1s;
      }

      .chart-page .chat-pet-addon {
        animation-delay: 0.9s;
      }

      @keyframes chatScreenIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes chatResultIn {
        from {
          opacity: 0;
          transform: translateY(14px) scale(0.985);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }
    }
  }