:root {
      --blue: #35a4e9;
      --blue-dark: #0878bd;
      --blue-pale: #e4f6ff;
      --ink: #333;
      --muted: #707070;
      --line: #dedede;
      --shell: 960px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
      font-size: 11.56px;
      line-height: 17.34px;
      background: #fff;
    }
    a { color: inherit; }
    button { font: inherit; }

    .demo-main {
      min-height: 580px;
      padding: 44px 20px 70px;
      background: linear-gradient(#f4f4f4 0 42px, #fff 42px);
    }
    .demo-main__inner { width: min(100%, var(--shell)); margin: 0 auto; }
    .demo-main h1 { margin: 0 0 22px; font-size: 22px; font-weight: 500; }
    .demo-card {
      display: grid;
      min-height: 220px;
      place-items: center;
      border: 1px dashed #b8dcef;
      border-radius: 4px;
      color: #64808f;
      background: #f7fcff;
      text-align: center;
    }

    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      clip-path: inset(50%);
    }

    .glossary-main {
      min-height: 100vh;
      background: #fff;
      font-family: "Noto Sans JP", "Yu Gothic", YuGothic, sans-serif;
      visibility: hidden;
    }
    .glossary-main.is-ready { visibility: visible; }
    .glossary-content {
      width: min(calc(100% - 32px), 965px);
      margin: 0 auto;
      padding: 22px 0 78px;
    }
    .glossary-hero {
      position: relative;
      display: grid;
      height: 90px;
      overflow: hidden;
      align-items: center;
      border: 2px solid #213b92;
      background: #fff;
      grid-template-columns: 18px 92px minmax(0, 1fr) 72px;
    }
    .glossary-hero::before {
      width: 18px;
      height: 100%;
      background: var(--blue);
      content: "";
    }
    .glossary-hero__tiger {
      width: 111px;
      height: 71px;
      align-self: flex-end;
      margin-left: -14px;
      object-fit: contain;
      object-position: center bottom;
    }
    .glossary-hero__copy { min-width: 0; margin-left: 3px; color: #142f87; }
    .glossary-hero__copy p { margin: 0 0 4px; color: #333; font-size: 10px; font-weight: 700; }
    .glossary-hero__copy h1 { margin: 0; font-size: 24px; line-height: 1.15; font-weight: 700; }
    .glossary-hero__book { width: 64px; height: 64px; margin: 0 auto; object-fit: contain; }

    .glossary-search {
      display: flex;
      margin-top: 30px;
      padding: 10px;
      border: 2px solid #bcbaba;
      background: #f5f7fb;
      box-shadow: 0 4px 4px rgba(0,0,0,.25);
      gap: 16px;
    }
    .glossary-search__word { display: flex; min-width: 0; flex: 1; }
    .glossary-search__input-wrap { position: relative; display: block; min-width: 0; flex: 1; }
    .glossary-search input {
      width: 100%;
      height: 40px;
      padding: 0 44px 0 14px;
      border: 2px solid #d9dee8;
      border-right: 0;
      border-radius: 6px 0 0 6px;
      outline: 0;
      color: #333;
      font-size: 16px;
    }
    .glossary-search input::placeholder { color: #d9d9d9; }
    .glossary-search input:focus {
      border-color: #213b92;
      border-right: 2px solid #213b92;
      box-shadow: inset 0 0 0 1px #213b92;
    }
    .glossary-search__icon {
      position: absolute;
      top: 50%;
      right: 13px;
      width: 16px;
      height: 16px;
      background: url("../images/search.png") center / contain no-repeat;
      transform: translateY(-50%);
    }
    .glossary-search__suggestions {
      position: absolute;
      z-index: 30;
      top: calc(100% + 1px);
      right: 0;
      left: 0;
      max-height: 322px;
      overflow-y: auto;
      margin: 0;
      padding: 6px 0;
      border: 1px solid #c8cdd6;
      border-radius: 0 0 4px 4px;
      background: #fff;
      box-shadow: 2px 4px 6px rgba(0,0,0,.25);
      list-style: none;
    }
    .glossary-search__suggestions[hidden] { display: none; }
    .glossary-search__suggestion {
      display: block;
      min-height: 36px;
      padding: 7px 18px;
      color: #333;
      font-size: 15px;
      font-weight: 500;
      line-height: 22px;
      cursor: pointer;
    }
    .glossary-search__suggestion:hover,
    .glossary-search__suggestion.is-active { background: #e9f7fc; }
    .glossary-search__suggestion mark {
      color: inherit;
      background: #ffeec2;
      font-weight: 700;
    }

    .glossary-view { margin-top: 40px; }
    .glossary-view[hidden] { display: none; }
    .glossary-view__title {
      position: relative;
      display: flex;
      height: 60px;
      overflow: hidden;
      align-items: center;
      margin: 0 0 18px;
      padding: 0 36px;
      border: 2px solid #c9dbe6;
      border-radius: 6px;
      color: #17358f;
      background: #edf8fe;
      font-size: 20px;
    }
    .glossary-view__title::before,
    .glossary-view__title::after {
      position: absolute;
      width: 40px;
      height: 40px;
      background: #cee6fe;
      content: "";
      transform: rotate(45deg);
    }
    .glossary-view__title::before { top: -22px; left: -22px; }
    .glossary-view__title::after { right: -22px; bottom: -22px; }
    .glossary-view__title-icon {
      width: 19px;
      height: 19px;
      margin-right: 15px;
      background: url("../images/search.png") center / contain no-repeat;
    }
    .glossary-results {
      overflow: hidden;
      margin: 0 16px;
      padding: 0;
      border: 2px solid #d8dde7;
      border-radius: 5px;
      background: #fff;
      list-style: none;
    }
    .glossary-results li + li { border-top: 2px solid #d8dde7; }
    .glossary-result {
      display: flex;
      width: 100%;
      min-height: 60px;
      align-items: center;
      justify-content: space-between;
      padding: 10px 28px 10px 34px;
      border: 0;
      color: #17358f;
      background: #fff;
      font-size: 15px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
    }
    .glossary-result:hover,
    .glossary-result:focus-visible { background: #eef8ff; }
    .glossary-result mark { color: inherit; background: #ffeec2; }
    .glossary-result__arrow { color: #111; font-size: 27px; font-weight: 400; line-height: 1; }
    .glossary-no-results {
      min-height: 490px;
      padding: 25px 0 0;
      color: #18348c;
      text-align: center;
    }
    .glossary-no-results__title {
      margin: 0 0 50px;
      font-size: 24px;
      font-weight: 700;
      line-height: 1.5;
    }
    .glossary-no-results__image {
      display: block;
      width: 180px;
      height: auto;
      margin: 0 auto 78px;
    }
    #glossary-view:has(.glossary-no-results) + .glossary-guide { margin-top: 0; }
    .glossary-detail-groups {
      display: grid;
      width: calc(100% - 16px);
      margin: 0 auto;
      gap: 18px;
    }
    .glossary-detail-group {
      overflow: hidden;
      border: 2px solid #3ba3ed;
      border-radius: 6px;
      background: #fff;
    }
    .glossary-detail-group__title {
      display: grid;
      width: 100%;
      min-height: 60px;
      align-items: center;
      margin: 0;
      padding: 0;
      border: 0;
      color: #17358f;
      background: #fff;
      font-family: inherit;
      font-size: 22px;
      font-weight: 700;
      text-align: left;
      grid-template-columns: 60px 1fr 42px;
    }
    button.glossary-detail-group__title { cursor: pointer; }
    button.glossary-detail-group__title:hover,
    button.glossary-detail-group__title:focus-visible { background: #eef7fb; }
    .glossary-detail-group__symbol {
      display: grid;
      height: 100%;
      place-items: center;
      color: #fff;
      background: #3ba3ed;
      font-size: 22px;
    }
    .glossary-detail-group__arrow {
      position: relative;
      width: 26px;
      height: 26px;
      border: 0;
      border-radius: 0;
      background-image: url("../images/arrow_1.svg");
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
    }
    .glossary-detail-group__arrow::after { display: none; }
    .glossary-detail-group.is-open .glossary-detail-group__arrow { transform: rotate(90deg); }
    .glossary-detail-group__label { padding-left: 20px; }
    .glossary-detail-group__toggle { text-align: center; font-size: 25px; font-weight: 400; }
    .glossary-detail-group.is-disabled {
      border-color: #d9dee8;
      background: #f4f4f4;
    }
    .glossary-detail-group.is-disabled .glossary-detail-group__title,
    .glossary-detail-group.is-disabled .glossary-detail-group__title:hover,
    .glossary-detail-group.is-disabled .glossary-detail-group__title:focus-visible {
      color: #999;
      background: #f4f4f4;
      cursor: not-allowed;
    }
    .glossary-detail-group.is-disabled .glossary-detail-group__symbol { background: #c8cdd6; }
    .glossary-detail-group.is-disabled .glossary-detail-group__arrow { opacity: .55; }
    .glossary-detail-group.is-disabled .glossary-detail-group__toggle { color: #999; }
    .glossary-detail {
      padding: 18px 64px 28px 60px;
      border-top: 2px solid #3ba3ed;
      font-weight: 500;
    }
    .glossary-detail__heading {
      display: flex;
      width: 100%;
      min-height: 42px;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      padding: 2px 0 10px 24px;
      border-bottom: 1px solid #17358f;
    }
    .glossary-detail__name { display: flex; align-items: center; gap: 8px; margin: 0; color: #172a88; font-size: 16px; font-weight: 700; }
    .glossary-detail__name-button {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0;
      padding: 0;
      border: 0;
      color: inherit;
      background: transparent;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .glossary-detail__name-button:focus-visible { outline: 2px solid #213b92; outline-offset: 3px; }
    .glossary-detail__term-arrow {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      background: url("../images/figma-triangle-open.svg") center / contain no-repeat;
      transform: scaleY(-1);
    }
    .glossary-detail__registered {
      flex: 0 0 auto;
      min-width: 42px;
      height: 24px;
      padding: 1px 12px;
      border: 1px solid #3ba3ed;
      border-radius: 14px;
      color: #172a88;
      background: #eef8ff;
      font-size: 12px;
      font-weight: 500;
      line-height: 20px;
      text-align: center;
      white-space: nowrap;
    }
    .glossary-detail__main {
      display: grid;
      align-items: start;
      gap: 22px;
      grid-template-columns: minmax(0, 1fr) 240px;
    }
    .glossary-detail__main.is-no-image { grid-template-columns: 1fr; }
    .glossary-detail__text { min-width: 0; }
    .glossary-detail__description { margin: 0; padding-left: 52px; color: #444; font-size: 14px; font-weight: 400; line-height: 1.5; white-space: pre-line; }
    .glossary-detail__description strong,
    .glossary-detail__service strong { font-weight: 700; }
    .glossary-detail__description ul,
    .glossary-detail__service ul { margin: 8px 0; padding-left: 1.5em; white-space: normal; }
    .glossary-detail__description li,
    .glossary-detail__service li { margin: 2px 0; }
    .glossary-detail__description hr,
    .glossary-detail__service hr { height: 0; margin: 10px 0; border: 0; border-top: 1px solid #d9dfe8; }
    .glossary-detail__service {
      margin: 20px 0 0 12px;
      padding: 10px 40px;
      border-radius: 6px;
      background: #f5f7fb;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.8;
      white-space: pre-line;
    }
    .glossary-detail__image { width: auto; max-width: 240px; height: auto; margin-top: 17px; object-fit: contain; }
    .glossary-detail__extras { margin: 20px 5px 0 12px; padding: 20px; border-radius: 6px; background: #eef8ff; }
    .glossary-detail__panel { overflow: hidden; border-radius: 6px; background: #fff; }
    .glossary-detail__panel + .glossary-detail__panel { margin-top: 12px; }
    .glossary-detail__panel h4 {
      display: flex;
      height: 44px;
      align-items: center;
      margin: 0;
      padding: 0 10px;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
    }
    .glossary-detail__panel h4::before { display: block; flex: 0 0 auto; margin-right: 10px; background: center / contain no-repeat; content: ""; }
    .glossary-detail__panel--related h4 { background: #ff9cc4; font-weight: 700; }
    .glossary-detail__panel--related h4::before {
      width: 20px;
      height: 18px;
      background-image: url("../images/figma-check-square.svg");
    }
    .glossary-detail__panel--features h4 { background: #5bbfe1; font-weight: 700; }
    .glossary-detail__panel--features h4::before { width: 18px; height: 18px; background-image: url("../images/figma-star.svg"); }
    .glossary-detail__panel--links h4 { background: #eab654; }
    .glossary-detail__panel--links h4::before { width: 22px; height: 22px; background-image: url("../images/figma-cast.svg"); }
    .glossary-detail__chips { display: flex; min-height: 47px; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 40px; }
    .glossary-detail__chips a {
      display: inline-flex;
      min-width: 42px;
      height: 24px;
      align-items: center;
      justify-content: center;
      padding: 1px 12px;
      border: 1px solid #ffc7dd;
      border-radius: 14px;
      color: #0679ca;
      background: #fff0f6;
      cursor: pointer;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      text-decoration: none;
    }
    .glossary-detail__chips a:hover,
    .glossary-detail__chips a:focus-visible { text-decoration: underline; }
    @media (min-width: 761px) {
      .glossary-detail__chips a {
        height: 24px;
        min-height: 24px;
        padding: 0 12px;
        line-height: 22px;
        white-space: nowrap;
      }
    }
    .glossary-detail__links { margin: 0; padding: 16px 40px 18px; list-style: none; }
    .glossary-detail__links li + li { margin-top: 10px; }
    .glossary-detail__links a { display: inline-flex; align-items: flex-start; color: #0679ca; font-size: 14px; font-weight: 400; line-height: 1.5; text-decoration: underline; }
    .glossary-detail__links a::before { width: 18px; height: 18px; flex: 0 0 18px; margin-right: 2px; background: url("../images/figma-arrow-right.svg") center / contain no-repeat; content: ""; }
    .glossary-detail__siblings { margin: 0; padding: 0; border-top: 2px solid #35a4e9; list-style: none; }
    .glossary-detail__siblings > li + li { border-top: 2px solid #35a4e9; }
    .glossary-detail__siblings > li > .glossary-detail { border-top: 0; }
    .glossary-detail__siblings > li > button {
      display: flex;
      width: 100%;
      min-height: 64px;
      align-items: center;
      padding: 10px 70px 10px 78px;
      border: 0;
      color: #17358f;
      background: #fff;
      font-size: 16px;
      font-weight: 700;
      text-align: left;
      text-decoration: underline;
      cursor: pointer;
    }
    .glossary-detail__siblings > li > button::before {
      width: 21px;
      height: 20px;
      flex: 0 0 21px;
      margin-right: 11px;
      background: url("../images/figma-triangle-closed.svg") center / contain no-repeat;
      content: "";
      transform: translateX(5px) rotate(90deg);
    }
    .glossary-detail__siblings > li > button:hover { background: #e9f7fc; }
    .glossary-search button {
      width: 72px;
      height: 40px;
      border: 2px solid #d9dee8;
      border-radius: 0 6px 6px 0;
      color: #172a88;
      background: rgba(217,222,232,.7);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .12em;
      cursor: pointer;
      transition: background-color .2s ease;
    }
    .glossary-search button:hover { border-color: #d4dae5; background: #eef8ff; }
    .glossary-search button:focus-visible { outline: 2px solid #213b92; outline-offset: 2px; }
    .kana-nav { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; }
    .kana-nav a {
      display: grid;
      width: 42px;
      min-width: 42px;
      height: 40px;
      flex: 0 0 42px;
      place-items: center;
      border: 1px solid #d9dee8;
      border-radius: 6px;
      color: #172a88;
      background: #fff;
      font-size: 16px;
      font-weight: 700;
      text-decoration: none;
      transition: background-color .2s ease;
    }
    .kana-nav a:nth-child(n + 9) { width: 62px; flex-basis: 62px; }
    .kana-nav a:hover,
    .kana-nav a:focus-visible { border-color: #213b92; background: #eef8ff; }
    .kana-nav a[aria-current="page"] {
      border-color: #2c47cc;
      color: #fff;
      background: #2c47cc;
      font-size: 20px;
    }

    .glossary-guide { margin-top: 40px; }
    #glossary-view:not([hidden]) + .glossary-guide { margin-top: 32px; }
    .glossary-guide > h2 {
      position: relative;
      display: flex;
      height: 60px;
      overflow: hidden;
      align-items: center;
      margin: 0;
      padding: 0 38px;
      border: 2px solid #d9dee8;
      border-radius: 6px;
      color: #17358f;
      background: #eef7fb;
      font-size: 20px;
    }
    .glossary-guide > h2::before,
    .glossary-guide > h2::after {
      position: absolute;
      width: 40px;
      height: 40px;
      background: #cee6fe;
      content: "";
      transform: rotate(45deg);
    }
    .glossary-guide > h2::before { top: -22px; left: -22px; }
    .glossary-guide > h2::after { right: -22px; bottom: -22px; }
    .guide-book-icon {
      width: 19px;
      height: 19px;
      margin-right: 20px;
      flex: 0 0 19px;
      background: url("../images/book-open.png") center / contain no-repeat;
    }
    .guide-cards { width: min(84.25%, 813px); margin: 32px auto 0; padding: 0; list-style: none; }
    .guide-card {
      position: relative;
      display: grid;
      min-height: 120px;
      overflow: hidden;
      padding: 22px 46px;
      border: 2px solid #ffeec2;
      border-radius: 6px;
      background: #fff;
      box-shadow: 4px 4px 4px rgba(0,0,0,.25);
      grid-template-columns: 34px 1fr;
      gap: 16px;
    }
    .guide-card + .guide-card { margin-top: 18px; }
    .guide-card:first-child { min-height: 183px; }
    .guide-card:nth-child(2) { min-height: 143px; }
    .guide-card:nth-child(3) { min-height: 123px; }
    .guide-card::before,
    .guide-card::after { position: absolute; width: 55px; height: 55px; background: #ffeec2; content: ""; transform: rotate(45deg); }
    .guide-card::before { top: -28px; left: -28px; }
    .guide-card::after { right: -28px; bottom: -28px; }
    .guide-card__number {
      position: relative;
      z-index: 1;
      display: grid;
      width: 32px;
      height: 32px;
      place-items: center;
      border-radius: 50%;
      color: #fff;
      background: #ffd158;
      font-size: 15px;
    }
    .guide-card__body { position: relative; z-index: 1; min-width: 0; }
    .guide-card h3 { margin: 4px 0 14px; color: #000; font-size: 16px; font-weight: 500; line-height: 1.4; }
    .guide-card ul { margin: 0; padding: 0; list-style: none; }
    .guide-card li { padding-left: 1em; color: #444; font-size: 14px; font-weight: 400; line-height: 1.45; text-indent: -1em; }
    .guide-card li::before { content: "・"; }
    .guide-card li + li { margin-top: 12px; }

    @media (max-width: 760px) {
      html,
      body { width: 100%; max-width: 100%; overflow-x: hidden; }
      .glossary-main { margin-top: 0; padding-top: 0; }
      .glossary-content { width: 100%; padding: 23px 0 86px; }
      .glossary-hero {
        width: calc(100% - 32px);
        max-width: 343px;
        height: 90px;
        margin: 0 auto;
        grid-template-columns: 18px 100px minmax(0, 1fr) 54px;
      }
      .glossary-hero__tiger { width: 112px; height: 90px; margin-left: -18px; }
      .glossary-hero__copy { min-width: 0; margin-left: -5px; overflow: visible; transform: none; display: flex; flex-direction: column; justify-content: space-between; padding: 16px 0 22px; }
      .glossary-hero__copy p { position: relative; z-index: 2; margin: 0; font-size: 10px; line-height: 12px; white-space: nowrap; }
      .glossary-hero__copy h1 { position: relative; top: 5px; overflow: hidden; font-size: 24px; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; text-overflow: clip; }
      .glossary-hero__book { width: 39px; height: 35px; margin: 0 auto; transform: translate(-4px, 18px); }
      .glossary-search {
        display: block;
        width: calc(100% - 32px);
        max-width: 343px;
        height: 195px;
        margin: 22px auto 24px;
        padding: 14px;
        border-color: #d9d9d9;
        background: #f9fafc;
        box-shadow: none;
      }
      .glossary-search__word { height: 40px; }
      .glossary-search input { height: 40px; padding-right: 50px; padding-left: 14px; font-size: 16px; font-weight: 700; line-height: 24px; }
      .glossary-search button { width: 72px; height: 40px; font-size: 16px; }
      .glossary-search__icon { right: 18px; width: 16px; height: 16px; }
      .kana-nav { width: 100%; margin: 16px 0 0; flex-wrap: wrap; justify-content: flex-start; gap: 15px 8.75px; }
      .kana-nav a { width: 46px; min-width: 46px; height: 46px; flex-basis: 46px; font-size: 16px; }
      .kana-nav a:nth-child(n + 9) { width: 69px; flex-basis: 69px; }
      .kana-nav a:nth-child(9) { font-size: 16px; white-space: nowrap; }
      .kana-nav a[aria-current="page"] { font-size: 20px; }
      .kana-nav a:nth-child(n + 9)[aria-current="page"] { font-size: 20px; }
      .glossary-view { margin-top: 0; padding: 0 19px; }
      .glossary-view__title {
        height: 60px;
        margin: 0 0 16px;
        padding: 0 34px;
        font-size: 19px;
      }
      .glossary-results { margin: 0; }
      .glossary-result { min-height: 44px; padding: 10px 15px 10px 18px; font-size: 14px; }
      .glossary-no-results { min-height: 0; padding: 0; }
      #glossary-view:has(.glossary-no-results) .glossary-view__title { margin-top: 24px; }
      .glossary-no-results__title { margin-bottom: 22px; font-size: 19px; }
      .glossary-no-results__image { width: 144px; margin-bottom: 40px; }
    .glossary-detail-groups {
      margin-top: 24px;
      gap: 12px;
    }
      .glossary-detail-group__title { min-height: 40px; font-size: 16px; grid-template-columns: 48px 1fr 38px; }
      .glossary-detail-group__label { padding-left: 13px; }
      .glossary-detail { padding: 18px 15px 22px; }
      .glossary-detail__heading { width: 100%; padding-left: 6px; }
      .glossary-detail__name { font-size: 16px; }
      .glossary-detail__registered { padding: 2px 8px; font-size: 10px; }
      .glossary-detail__main { display: block; }
      .glossary-detail__description { font-size: 14px; line-height: 1.75; }
      .glossary-detail__description { padding-left: 0; }
      .glossary-detail__service { margin-left: 0; padding: 10px; }
      .glossary-detail__image { display: block; max-height: 210px; margin: 16px auto 0; }
      .glossary-detail__extras { margin-right: 0; margin-left: 0; padding: 10px; }
      .glossary-detail__panel h4 { font-weight: 700; }
      .glossary-detail__chips { padding-right: 8px; padding-left: 8px; }
      .glossary-detail__chips a {
        max-width: 100%;
        height: auto;
        min-height: 24px;
        padding: 3px 10px;
        line-height: 18px;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
      }
      .glossary-detail__chips a.is-long { text-align: left; }
      .glossary-detail__links { padding-right: 8px; padding-left: 8px; }
      .glossary-detail__siblings > li > button { min-height: 46px; padding: 9px 18px; font-size: 14px; }
      .glossary-guide { margin-top: 0; }
      .glossary-guide > h2 {
        height: 60px;
        margin: 0 19px;
        padding: 0 44px;
        font-size: 20px;
        white-space: nowrap;
      }
      .guide-book-icon {
        position: relative;
        z-index: 1;
        display: block;
        width: 19px;
        height: 19px;
        margin-right: 17px;
        flex: 0 0 19px;
        background: url("../images/book-open.png") center / 19px 19px no-repeat;
      }
      .guide-cards { width: auto; margin: 21px 21px 0; }
      .guide-card,
      .guide-card:first-child {
        min-height: 0;
        padding: 27px 18px 29px;
        grid-template-columns: 34px 1fr;
        gap: 9px;
        box-shadow: 3px 4px 3px rgba(0,0,0,.24);
      }
      .guide-card + .guide-card { margin-top: 21px; }
      .guide-card__number { width: 34px; height: 34px; font-size: 16px; }
      .guide-card h3 { margin: 4px 0 28px; font-size: 18px; line-height: 25px; }
      .guide-card ul { width: calc(100% + 36px); margin-left: -36px; }
      .guide-card li { padding-left: 1.05em; font-size: 14px; line-height: 1.6; }
      .guide-card li + li { margin-top: 17px; }
      .guide-card br { display: none; }
      .demo-main { min-height: 500px; padding: 0 0 48px; background: #fff; }
      .demo-main__inner { width: 100%; }
      .demo-main .page-lead-title {
        display: flex;
        min-height: 64px;
        align-items: center;
        margin: 0;
        padding: 9px 12px;
        color: #fff;
        background: #3ba5e9;
        font-size: 15px;
        font-weight: 700;
        line-height: 20px;
      }
      .demo-card { margin: 0 12px; }
    }
    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }