:root {
      --navy: #12304a;
      --text: #243341;
      --muted: #697782;
      --green: #46b066;
      --teal: #22a8ad;
      --red: #f05867;
      --yellow: #ffd45a;
      --line: #e6ebef;
      --soft: #f6f8f9;
      --white: #fff;
      --shadow: 0 16px 32px rgba(28, 42, 55, .12);
      --radius: 8px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      font-family: "Yu Gothic", "Meiryo", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      font-size: 16px;
      line-height: 1.7;
      background: #fff;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

    button {
      font: inherit;
    }

    .site {
      overflow: hidden;
      min-width: 320px;
    }

    .hero {
      position: relative;
      min-height: 0;
      background: #fff;
    }

    .hero::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 760px;
      background:
        linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 30%, rgba(255,255,255,.3) 62%, rgba(255,255,255,.85) 100%),
        url("../img/mainvisual.png") center top / cover no-repeat;
      pointer-events: none;
    }

    .hero::after {
      content: "";
      position: absolute;
      top: 575px;
      right: 0;
      left: 0;
      height: 190px;
      background: linear-gradient(180deg, rgba(255,255,255,0), #fff 75%);
      pointer-events: none;
    }

    .container {
      width: min(1240px, calc(100% - 48px));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      padding: 18px 0 24px;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 8px;
      width: 172px;
      color: var(--navy);
      line-height: 1.1;
      font-weight: 900;
    }

    .logo img {
      flex: 0 0 45px;
      width: 45px;
      height: auto;
    }

    .logo strong {
      display: block;
      font-size: 24px;
      letter-spacing: 0;
    }

    .logo small {
      display: block;
      margin-top: 1px;
      font-size: 9px;
      color: #5e6c75;
      font-weight: 800;
      letter-spacing: 0;
    }

    .nav {
      display: flex;
      align-items: center;
      gap: min(3vw, 42px);
      font-size: 14px;
      font-weight: 700;
      color: #293947;
      white-space: nowrap;
    }

    .nav a {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .nav img {
      width: 18px;
      height: 18px;
      object-fit: contain;
      filter: grayscale(1) brightness(.45);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 14px;
    }



/* Survey page common layout */
.header .nav a.is-active {
  color: var(--green);
  position: relative;
}

.header .nav a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -22px;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--green);
}

.header .nav a.is-active img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.header-actions .line-register::before {
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 8px;
  background: url("../img/line.svg") center / contain no-repeat;
}

.survey-page {
  background: #fff;
}

.survey-page .header {
  padding-bottom: 26px;
}

.survey-main {
  padding-bottom: 42px;
}

.survey-breadcrumb {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 24px;
  color: #63717b;
  font-size: 13px;
  font-weight: 700;
}

.survey-breadcrumb a::after {
  content: ">";
  margin-left: 12px;
  color: #99a4ac;
}

.survey-hero {
  min-height: 220px;
  display: flex;
  align-items: center;
  margin-bottom: 36px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.96) 33%, rgba(255,255,255,.36) 66%, rgba(255,255,255,.08) 100%),
    url("../img/mainvisual.png") center 38% / cover no-repeat;
}

.survey-hero h1 {
  margin: 0 0 18px;
  color: var(--navy);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.2;
}

.survey-hero p {
  margin: 0;
  color: #263642;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.9;
}

.survey-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.survey-sidebar {
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 24px 20px;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .04);
}

.survey-sidebar h2,
.survey-filter h3 {
  margin: 0 0 14px;
  color: #243341;
  font-size: 15px;
  font-weight: 900;
}

.survey-search {
  display: grid;
  grid-template-columns: 1fr 42px;
  min-height: 48px;
  margin-bottom: 26px;
  border: 1px solid #d9e1e7;
  border-radius: 8px;
  overflow: hidden;
}

.survey-search input {
  width: 100%;
  border: 0;
  padding: 0 14px;
  color: #2f3f4b;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  outline: none;
}

.survey-search button {
  display: grid;
  place-items: center;
  border: 0;
  background: #fff;
  cursor: pointer;
}

.survey-search button img {
  width: 18px;
  height: 18px;
  filter: brightness(0) saturate(100%) invert(21%) sepia(16%) saturate(1510%) hue-rotate(165deg) brightness(89%) contrast(87%);
}

.survey-filter {
  display: grid;
  gap: 10px;
  padding: 24px 0;
  border-top: 1px solid #e7ecef;
}

.survey-filter ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.survey-filter a,
.survey-filter label {
  min-height: 34px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  color: #394852;
  font-size: 13px;
  font-weight: 800;
}

.survey-filter a {
  padding: 0 12px;
}

.survey-filter a.is-current {
  background: linear-gradient(90deg, #edf9f5, #eef7e8);
  color: #31a968;
}

.survey-filter input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 0 10px 0 0;
  border: 1px solid #cbd5dc;
  border-radius: 3px;
  background: #fff;
}

.survey-filter input:checked {
  border-color: var(--green);
  background: var(--green);
  box-shadow: inset 0 0 0 3px #fff;
}

.survey-content {
  min-width: 0;
}

.survey-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 16px;
}

.survey-toolbar p {
  margin: 0;
  color: #344451;
  font-size: 14px;
  font-weight: 800;
}

.survey-toolbar strong {
  color: var(--green);
  font-size: 22px;
  font-weight: 900;
}

.survey-toolbar select {
  min-width: 142px;
  min-height: 42px;
  border: 1px solid #d9e1e7;
  border-radius: 8px;
  background: #fff;
  color: #344451;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

.survey-list {
  display: grid;
  gap: 12px;
}

.survey-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 176px;
  gap: 24px;
  align-items: center;
  min-height: 158px;
  border: 1px solid #e0e6ea;
  border-radius: 8px;
  background: #fff;
  padding: 20px 22px;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .04);
}

.survey-card-icon {
  display: grid;
  width: 136px;
  height: 136px;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffe5e2, #fff4f0);
}

.survey-card:nth-child(2) .survey-card-icon { background: linear-gradient(135deg, #d8f4ec, #edf9f3); }
.survey-card:nth-child(3) .survey-card-icon { background: linear-gradient(135deg, #d7f1fb, #eef9fc); }
.survey-card:nth-child(4) .survey-card-icon { background: linear-gradient(135deg, #fff0c9, #fff9e8); }
.survey-card:nth-child(5) .survey-card-icon { background: linear-gradient(135deg, #efe0ff, #f9f1ff); }
.survey-card:nth-child(6) .survey-card-icon { background: linear-gradient(135deg, #e2f3df, #f3faee); }
.survey-card:nth-child(7) .survey-card-icon { background: linear-gradient(135deg, #f4eadf, #fbf5ef); }
.survey-card:nth-child(8) .survey-card-icon { background: linear-gradient(135deg, #eeeeee, #fafafa); }

.survey-card-icon img {
  width: 62px;
  height: 62px;
  object-fit: contain;
  filter: grayscale(1) brightness(.38);
    opacity: 0.8;
}

.survey-tags {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.survey-tags span {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border-radius: 6px;
  background: #eef2f3;
  color: #5f6d76;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 9px;
}

.survey-tags .survey-new {
  background: #ff6b5f;
  color: #fff;
}

.survey-card:nth-child(2) .survey-tags span:last-child { background: #edf7f0; color: #4c9d6b; }
.survey-card:nth-child(3) .survey-tags span:last-child { background: #e8f8ff; color: #3196be; }
.survey-card:nth-child(4) .survey-tags span:last-child { background: #fff2d4; color: #b28433; }
.survey-card:nth-child(5) .survey-tags span:last-child { background: #f2e8ff; color: #8260b1; }
.survey-card:nth-child(6) .survey-tags span:last-child { background: #eaf8e8; color: #519c5d; }
.survey-card:nth-child(7) .survey-tags span:last-child { background: #f5ecdf; color: #947149; }

.survey-card h2 {
  margin: 0 0 6px;
  color: #22313d;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.45;
}

.survey-card-body p {
  margin: 0 0 18px;
  color: #53616b;
  font-size: 13px;
  font-weight: 700;
}

.survey-meta {
  display: flex;
  gap: 34px;
  color: #5b6871;
  font-size: 13px;
  font-weight: 800;
}

.survey-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.survey-meta img {
  width: 15px;
  height: 15px;
  filter: grayscale(1) brightness(.55);
}

.survey-meta b {
  margin-left: 6px;
  color: #162a3a;
  font-size: 17px;
  font-weight: 900;
}

.survey-card-action {
  display: grid;
  gap: 14px;
}

.survey-card-action p {
  display: grid;
  min-height: 92px;
  place-items: center;
  margin: 0;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffe8e7, #fff2ee);
  color: #f05867;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
    padding: 10px;
}

.survey-card-action strong {
  display: block;
  font-size: 44px;
  font-weight: 900;
  line-height: .95;
}

.survey-card-action span {
  font-size: 19px;
}

.survey-card-action a {
  display: grid;
  min-height: 42px;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(90deg, #29aa65, #48bd63);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 8px 16px rgba(55, 176, 100, .18);
}

.survey-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin: 32px 0 34px;
  color: #293947;
  font-size: 14px;
  font-weight: 900;
}

.survey-pagination a {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
}

.survey-pagination a.is-current {
  background: #35b670;
  color: #fff;
}

.survey-page-arrow {
  border: 1px solid #e0e6ea;
  color: #8a969e;
}

.survey-notice {
  display: grid;
  grid-template-columns: 94px 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 18px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f2faf5, #f6fbf1);
  padding: 26px 58px;
}

.survey-notice img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(31%) sepia(11%) saturate(875%) hue-rotate(164deg) brightness(86%) contrast(88%);

    filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.survey-notice h2 {
  margin: 0 0 8px;
  color: #243341;
  font-size: 20px;
  font-weight: 900;
}

.survey-notice p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #59666f;
  font-size: 13px;
  font-weight: 800;
}

.survey-notice p span {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  position: relative;
}

.survey-notice p span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 2px;
  width: 4px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 980px) {
  .survey-layout {
    grid-template-columns: 1fr;
  }

  .survey-sidebar {
    order: 2;
  }

  .survey-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .survey-card-action {
    grid-column: 1 / -1;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .header .nav a.is-active::after {
    display: none;
  }

  .survey-breadcrumb {
    margin-top: 6px;
  }

  .survey-hero {
    min-height: 250px;
    align-items: flex-end;
    padding-bottom: 24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.92) 64%, #fff 100%),
      url("../img/mainvisual.png") 58% top / auto 260px no-repeat;
  }

  .survey-hero h1 {
    font-size: 32px;
  }

  .survey-layout {
    gap: 22px;
  }

  .survey-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .survey-toolbar select {
    width: 100%;
  }

  .survey-card {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
  }

  .survey-card-icon {
    width: 86px;
    height: 86px;
  }

  .survey-card-icon img {
    width: 42px;
    height: 42px;
  }

  .survey-card h2 {
    font-size: 16px;
  }

  .survey-meta {
    flex-direction: column;
    gap: 4px;
  }

  .survey-card-action {
    grid-template-columns: 1fr;
  }

  .survey-card-action p {
    min-height: 74px;
  }

  .survey-card-action strong {
    font-size: 34px;
  }

  .survey-pagination {
    gap: 8px;
  }

  .survey-notice {
    grid-template-columns: 1fr;
    padding: 22px;
    text-align: left;
  }
.survey-notice img { margin: 0 auto;}
}

    .outline-btn,
    .fill-btn,
    .gradient-btn {
      display: inline-flex;
      min-height: 50px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      font-weight: 700;
      letter-spacing: 0;
      white-space: nowrap;
    }

    .outline-btn {
      min-width: 118px;
      border: 1px solid #96a4ad;
      background: rgba(255,255,255,.7);
      color: #40505b;
    }

    .fill-btn {
      min-width: 160px;
      background: linear-gradient(90deg, #28a9b4, #5ab849);
      color: #fff;
      box-shadow: 0 10px 22px rgba(55, 169, 92, .25);
    }

    .gradient-btn {
      min-width: 310px;
      padding: 0 30px;
      background: linear-gradient(90deg, #23a9b4, #60b542);
      color: #fff;
      font-size: 18px;
      box-shadow: 0 14px 26px rgba(40, 164, 130, .3);
    }
.gradient-btn::after, .link-btn::after {
    content: "";
    width: 13px;
    height: 13px;
    margin-left: 18px;
    border-top: 3px solid currentColor;
    border-right: 3px solid currentColor;
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translate(-50%, -50%) rotate(45deg);
}
    .hero-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 44px;
      padding-top: 64px;
    }

    .page-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 44px;
      align-items: start;
      padding-top: 64px;
      position: relative;
      z-index: 1;
    }

    .page-layout > .index-left {
      min-width: 0;
    }

    .page-layout > .index-right {
      display: grid;
      gap: 18px;
      min-width: 0;
    }

    .hero-copy {
      max-width: 720px;
      padding-top: 52px;
    }

    .hero-copy h1 {
      margin: 0 0 24px;
      color: var(--navy);
      font-size: clamp(38px, 4vw, 56px);
      line-height: 1.45;
      font-weight: 900;
      letter-spacing: 0;
    }

    .hero-copy h1 span {
      color: #31ac6c;
    }

    .hero-copy h1 .phrase {
      color: var(--navy);
      white-space: nowrap;
    }

    .hero-copy h1 .accent {
      color: #31ac6c;
    }

    .lead {
      margin: 0 0 16px;
      color: var(--navy);
      font-size: 21px;
      font-weight: 800;
    }

    .check-list {
      display: grid;
      gap: 6px;
      margin: 0 0 24px;
      padding: 0;
      list-style: none;
      color: var(--navy);
      font-size: 17px;
      font-weight: 800;
    }

    .check-list li {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .check-list li::before {
    content: "";
    flex: 0 0 20px;
    width: 25px;
    height: 25px;
    background: url(../img/check.svg) center / 20px auto no-repeat;
    filter: brightness(0) saturate(100%) invert(56%) sepia(34%) saturate(701%) hue-rotate(88deg) brightness(91%) contrast(91%);
    }

    .cta-row {
      display: flex;
      align-items: center;
      gap: 22px;
      margin-top: 20px;
    }

    .cta-note {
      margin: 10px 0 0 78px;
      color: #6d777f;
      font-size: 12px;
      font-weight: 700;
    }

    .hero-badges {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
      position: absolute;
      top: 470px;
      right: 300px;
      z-index: 3;
      margin: 0;
    }

    .badge {
      display: grid;
      width: 106px;
      height: 106px;
      place-items: center;
      border: 4px solid #d9f1e4;
      border-radius: 50%;
      background: rgba(255,255,255,.92);
      color: #2da866;
      box-shadow: 0 8px 18px rgba(34, 69, 91, .12);
      text-align: center;
      font-weight: 900;
      line-height: 1.2;
      font-size: 14px;
    }

    .badge img {
      width: 25px;
      height: 25px;
    display: block;
    margin: 0 auto 3px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(60%) saturate(600%) hue-rotate(96deg) brightness(91%) contrast(96%);
    }

    .badge b {
      display: block;
      font-size: 16px;
    }

    .side-card {
      border-radius: var(--radius);
      background: rgba(255,255,255,.94);
      box-shadow: var(--shadow);
    }

    .ranking-card {
      align-self: start;
      margin-top: 54px;
      padding: 24px 18px 18px;
    }

    .side-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      margin: 0 0 16px;
      color: #344451;
      font-size: 16px;
      font-weight: 900;
    }

    .side-title img {
      width: 18px;
      height: 18px;
    }

    .tabs {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5px;
      margin-bottom: 14px;
      padding: 3px;
      border: 1px solid #c8d0d6;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
    }

    .tabs button {
      border: 0;
      background: transparent;
      color: var(--text);
      cursor: pointer;
      font: inherit;
      font-weight: 800;
      border-radius: 999px;
      padding: 5px 8px;
    }

    .tabs button.is-active {
      background: #35b670;
      color: #fff;
    }

    .ranking-panel[hidden] {
      display: none;
    }

    .ranking-list {
      display: grid;
      gap: 14px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .ranking-list li {
      display: grid;
      grid-template-columns: 30px 1fr 48px;
      gap: 8px;
      align-items: center;
      font-size: 13px;
      font-weight: 800;
      line-height: 1.35;
    }

    .rank-no {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 8px;
      background: #eef2f4;
      color: #243341;
      font-size: 18px;
      font-weight: 900;
    }

    .ranking-list li:nth-child(1) .rank-no {
      background: #fff1c4;
      color: #f1a400;
    }

    .ranking-list li:nth-child(2) .rank-no {
      background: #dcebf4;
      color: #42677d;
    }

    .rank-price {
      color: var(--red);
      font-size: 12px;
      font-weight: 900;
      text-align: right;
    }

    .side-more,
    .link-btn {
      display: inline-flex;
      min-height: 40px;
      align-items: center;
      justify-content: center;
      border: 1px solid #e0e5e9;
      border-radius: 999px;
      background: #fff;
      color: #687780;
      font-size: 13px;
      font-weight: 800;
      box-shadow: inset 0 -2px 0 rgba(29, 46, 58, .03);
    }

    .side-more {
      width: 100%;
      margin-top: 16px;
    }

    .intro-cards {
      margin-top: 88px;
    }

    .intro-cards ul {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .intro-cards li {
      min-height: 155px;
      border: 1px solid #e6ebef;
      border-radius: var(--radius);
      background: rgba(255,255,255,.96);
      box-shadow: var(--shadow);
      padding: 22px 18px 18px;
      text-align: center;
    }

    .icon-circle {
      display: grid;
      width: 64px;
      height: 64px;
      place-items: center;
      margin: 0 auto 12px;
      border-radius: 50%;
      background: #e4f8ed;
    }

    .intro-cards li:nth-child(2) .icon-circle { background: #ffe7ee; }
    .intro-cards li:nth-child(3) .icon-circle { background: #e4f5ff; }
    .intro-cards li:nth-child(4) .icon-circle { background: #fff4cf; }
    .intro-cards li:nth-child(1) .icon-circle img {
      width: 31px;
      height: 31px;
      object-fit: contain;
filter: brightness(0) saturate(100%) invert(40%) sepia(60%) saturate(600%) hue-rotate(96deg) brightness(91%) contrast(96%);
    }
    .intro-cards li:nth-child(2) .icon-circle img {
      width: 31px;
      height: 31px;
      object-fit: contain;

    filter: brightness(0) saturate(100%) invert(27%) sepia(88%) saturate(3718%) hue-rotate(342deg) brightness(96%) contrast(96%);
    }
    .intro-cards li:nth-child(3) .icon-circle img {
      width: 31px;
      height: 31px;
      object-fit: contain;
filter: brightness(0) saturate(100%) invert(30%) sepia(55%) saturate(615%) hue-rotate(160deg) brightness(102%) contrast(95%);
    }
    .intro-cards li:nth-child(4) .icon-circle img {
      width: 31px;
      height: 31px;
      object-fit: contain;
filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(720%) hue-rotate(359deg) brightness(101%) contrast(105%);
    }

    .intro-cards h3 {
      margin: 0 0 2px;
      color: #2c3844;
      font-size: 16px;
      font-weight: 900;
    }

    .intro-cards p {
      margin: 0;
      color: #6d767e;
      font-size: 13px;
      font-weight: 700;
    }

    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 260px;
      gap: 44px;
      align-items: start;
      padding-top: 30px;
    }
.monitor-section {
    margin-top: 50px;}

.design-image-section {
    margin-top: 82px;
}

.design-image-section picture {
    display: block;
}

.design-image-section img {
    width: 100%;
    height: auto;
    display: block;
}

.point-change,
.other-point {
    margin-top: 82px;
}

.point-change h2,
.other-point h2 {
    margin: 0 0 26px;
    color: var(--navy);
    font-size: 26px;
    font-weight: 900;
    line-height: 1.55;
    text-align: center;
}

.point-change h2 span,
.other-point h2 span {
    color: #31ac6c;
}

.point-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.point-flow li {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 10px 22px rgba(30, 45, 60, .08);
    padding: 24px 18px;
    text-align: center;
}

.point-flow .step {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e5faed;
    color: #23a86b;
    font-size: 12px;
    font-weight: 900;
    padding: 2px 12px;
}

.point-flow img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    margin: 14px auto 12px;
}

.point-flow p {
    margin: 0;
    color: #263642;
    font-weight: 900;
}

.point-notes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
}

.point-notes li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-radius: var(--radius);
    background: #f8fafb;
    color: #35424e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.6;
    padding: 14px;
}

.point-notes img {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.point-notes span {
    color: var(--red);
}

.exchange-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.exchange-grid li {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 10px 22px rgba(30, 45, 60, .08);
    padding: 18px;
    text-align: center;
}

.exchange-grid img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin: 10px auto;
}

.exchange-grid .top,
.exchange-grid .btm {
    margin: 0;
    color: #35424e;
    font-size: 13px;
    font-weight: 800;
}

.exchange-grid strong {
    color: var(--navy);
    font-size: 17px;
}

.point-banner {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 20px;
    align-items: center;
    margin-top: 22px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, #e7f9f6, #f4fbef);
    padding: 18px;
}

.point-banner img {
    width: 100%;
}

.point-banner p {
    margin: 0;
    color: var(--navy);
    font-size: 17px;
    font-weight: 900;
}

.point-banner span {
    color: #31ac6c;
}

.point-tips {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
}
    .section-title {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 0 0 22px;
      color: #303c47;
      font-size: 24px;
      font-weight: 900;
      letter-spacing: 0;
    }

    .section-title img {
      width: 26px;
      height: 26px;
    filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(720%) hue-rotate(359deg) brightness(101%) contrast(105%);
    }

    .monitor-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .monitor-card {
      overflow: hidden;
      border: 1px solid #e6ebef;
      border-radius: var(--radius);
      background: #fff;
      box-shadow: 0 10px 22px rgba(30, 45, 60, .08);
    }

    .monitor-thumb {
      height: 136px;
      background: #bcbcbc;
    }

    .monitor-detail {
      padding: 16px 16px 14px;
    }

    .monitor-detail h3 {
      margin: 0 0 4px;
      color: #202c36;
      font-size: 15px;
      font-weight: 900;
      line-height: 1.45;
    }

    .tag {
      margin: 0 0 4px;
      color: #202c36;
      font-size: 13px;
      font-weight: 900;
    }

    .price {
      margin: 0 0 8px;
      color: var(--red);
      font-size: 14px;
      font-weight: 900;
      text-align: center;
    }

    .price b {
      font-size: 32px;
      line-height: 1;
    }

    .meta {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      color: #66727c;
      font-size: 11px;
      font-weight: 800;
      white-space: nowrap;
    }

    .meta span {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .meta img {
      width: 13px;
      height: 13px;
      filter: grayscale(1) brightness(.5);
    }

    .center {
      display: flex;
      justify-content: center;
      margin-top: 40px;
    }

    .sidebar {
      display: grid;
      gap: 18px;
      padding-top: 0;
    }

    .guide-card {
      padding: 25px 18px 22px;
    }

    .steps {
      display: grid;
      gap: 0;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .steps li {
      display: grid;
      grid-template-columns: 62px 1fr;
      gap: 12px;
      min-height: 86px;
      position: relative;
    }

    .steps li:not(:last-child)::after {
      content: "";
      position: absolute;
      left: 31px;
      top: 58px;
      bottom: -18px;
      width: 4px;
      border-radius: 999px;
      background: #4fbd8a;
    }

    .step-icon {
      display: grid;
      width: 62px;
      height: 62px;
      place-items: center;
      border-radius: 50%;
      background: #e5faed;
      position: relative;
      z-index: 1;
    }

    .steps li:nth-child(3) .step-icon {
      background: #fff4cf;
    }

    .step-icon img {
      width: 30px;
      height: 30px;
    }

    .steps h3 {
      margin: 4px 0 1px;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 900;
    }

    .steps h3 span {
      display: block;
      color: #7a868e;
      font-size: 12px;
    }

    .steps p {
      margin: 0;
      color: #6a767f;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.45;
    }
    .steps p span {
    color: #f00;
    display: block;
}
    .safety {
      padding-top: 26px;
      text-align: center;
    }

    .safety h2 {
      margin: 0 0 18px;
      color: #344451;
      font-size: 16px;
      font-weight: 900;
    }

    .safety-list {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .safety-list div {
    width: 40px;
    height: 40px;
    margin: 0 auto 6px;
    background: #e9f5e9;
    border-radius: 50%;
    padding: 8px;}
    .safety-list img {
    width: 24px;
    height: 24px;
    margin: 0 auto 6px;
    filter: brightness(0) saturate(100%) invert(40%) sepia(60%) saturate(600%) hue-rotate(96deg) brightness(91%) contrast(96%);
    }
    .safety-list div {}


    .safety-list li:nth-child(1) img {}
    .safety-list li:nth-child(2) img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(60%) saturate(600%) hue-rotate(96deg) brightness(91%) contrast(96%);}
    .safety-list li:nth-child(3) img {}
    .safety-list li:nth-child(4) img {
    filter: brightness(0) saturate(100%) invert(40%) sepia(60%) saturate(600%) hue-rotate(96deg) brightness(91%) contrast(96%);}


    .safety-list p {
      margin: 0;
      font-size: 10px;
      font-weight: 800;
      line-height: 1.35;
    }
.safety-list li:nth-child(4) img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(96%) saturate(720%) hue-rotate(359deg) brightness(101%) contrast(105%);}

    .faq {
      padding: 82px 0 112px;
    }

    .faq .section-title {
      margin-bottom: 24px;
    }

    .faq-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px 14px;
      max-width: 900px;
      margin: 0 auto;
      padding: 0;
      list-style: none;
    }

    .faq-list li {
      display: inline-block;
      min-height: 46px;
      align-items: center;
      gap: 12px;
      border: 1px solid #e1e7eb;
      border-radius: 999px;
      background: #fff;
      box-shadow: 0 8px 16px rgba(31, 47, 62, .06);
      padding: 8px 20px 8px 12px;
      color: #263642;
      font-size: 14px;
      font-weight: 900;
    }

    .q-mark {
      display: grid;
      flex: 0 0 28px;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 50%;
      background: #37bf78;
      color: #fff;
      font-weight: 900;
    }


    .accordion-list {
      align-items: flex-start;
    }

    .accordion-list li {
      align-items: stretch;
      flex-direction: column;
      padding: 0;
      overflow: hidden;
    border-radius: 30px;
    }

    .faq-question {
      display: inline-flex;
      width: 100%;
      min-height: 46px;
      align-items: center;
      gap: 12px;
      border: 0;
      background: transparent;
      color: #263642;
      cursor: pointer;
      font-size: 14px;
      font-weight: 900;
      padding: 8px 44px 8px 12px;
      position: relative;
      text-align: left;
    }

    .faq-question::after {
      content: "+";
      position: absolute;
      right: 18px;
      color: #37bf78;
      font-size: 20px;
      font-weight: 900;
      line-height: 1;
    }

    .faq-question::after {
      transition: transform 0.3s ease;
    }

    .faq-question[aria-expanded="true"]::after {
      content: "+";
      transform: rotate(45deg);
    }

    .faq-answer {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 12px;
      border-top: 1px solid #e8eef1;
      padding: 12px 18px 16px 12px;
      text-align: left;
      opacity: 0;
      overflow: hidden;
      transition: height 0.36s ease, opacity 0.28s ease;
    }

    .faq-answer.is-open {
      opacity: 1;
    }

    @media (prefers-reduced-motion: reduce) {
      .faq-answer,
      .faq-question::after {
        transition: none;
      }
    }

    .a-mark {
      display: grid;
      width: 28px;
      height: 28px;
      place-items: center;
      border-radius: 50%;
      background: #f05867;
      color: #fff;
      font-weight: 900;
    }

    .faq-answer p {
      margin: 2px 0 0;
      color: #56636d;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.7;
    }
    .footer {
      background: #f7f8f9;
      border-top: 1px solid #eef1f3;
      padding: 28px 0;
    }

    .login-modal {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(18, 35, 50, .42);
    }

    .login-modal.is-open {
      display: flex;
    }

    .login-dialog {
      width: min(420px, 100%);
      border-radius: 8px;
      background: #fff;
      box-shadow: 0 24px 60px rgba(16, 31, 45, .24);
      padding: 30px;
      position: relative;
    }

    .login-close {
      position: absolute;
      top: 14px;
      right: 14px;
      display: grid;
      width: 34px;
      height: 34px;
      place-items: center;
      border: 1px solid var(--line);
      border-radius: 50%;
      background: #fff;
      color: #52616d;
      cursor: pointer;
      font-size: 20px;
      line-height: 1;
    }

    .login-dialog h2 {
      margin: 0 0 18px;
      color: var(--navy);
      font-size: 24px;
      font-weight: 900;
      text-align: center;
    }

    .login-form {
      display: grid;
      gap: 14px;
    }

    .login-form label {
      display: grid;
      gap: 6px;
      color: #33424f;
      font-size: 13px;
      font-weight: 900;
    }

    .login-form input {
      width: 100%;
      min-height: 48px;
      border: 1px solid #d9e0e5;
      border-radius: 8px;
      padding: 10px 14px;
      font: inherit;
    }

    .login-form button[type="submit"] {
      border: 0;
      cursor: pointer;
      margin-top: 4px;
    position: relative;
    }

    .login-help {
      margin: 10px 0 0;
      color: #697782;
      font-size: 13px;
      font-weight: 700;
      text-align: center;
    }

    .login-help a {
      color: var(--teal);
      font-weight: 900;
    }

    .footer-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      font-size: 12px;
      font-weight: 700;
      color: #34424f;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 26px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .copyright {
      color: #54616b;
      white-space: nowrap;
    }

    @media (max-width: 1120px) {
      .nav {
        gap: 18px;
      }

      .hero-grid,
      .layout,
      .page-layout {
        grid-template-columns: 1fr;
      }

      .page-layout > .index-right {
        grid-template-columns: 1fr;
      }

      .hero-badges {
        position: static;
        justify-content: flex-start;
        margin: 0;
        position: absolute;
        top: 400px;
        right: 0;
      }

      .intro-cards {
        margin-top: 50px;
      }
    }

    @media (max-width: 860px) {
      .container {
        width: min(100% - 28px, 1240px);
      }

      .header {
        align-items: flex-start;
        gap: 14px;
      }

      .nav {
        display: none;
      }

      .header-actions {
        gap: 8px;
      }

      .outline-btn,
      .fill-btn {
        min-width: auto;
        min-height: 42px;
        padding: 0 16px;
        font-size: 13px;
      }

      .hero {
        min-height: 760px;
        background-position: 58% top;
      }

      .hero-copy {
        max-width: 520px;
        padding-top: 22px;
      }

      .hero-copy h1 {
        font-size: 34px;
      }

      .cta-row {
        align-items: stretch;
        flex-direction: column;
        /*max-width: 340px;*/
      }

      .gradient-btn,
      .cta-row .outline-btn {
        width: 100%;
      }

      .cta-note {
        margin-left: 0;
        text-align: center;
      }

      .hero-badges {
        margin-left: 0;
      }

      .intro-cards ul,
      .monitor-grid,
      .point-flow,
      .point-notes,
      .exchange-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 560px) {
      .logo {
        width: 150px;
      }

      .header-actions .fill-btn {
        display: none;
      }

      .hero {
        min-height: auto;
        padding-bottom: 92px;
      }

      .hero::before {
        height: 560px;
        background:
          linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 48%, rgba(255,255,255,.95) 100%),
          url("../img/mainvisual.png") 62% top / auto 460px no-repeat;
      }

      .hero::after {
        top: 410px;
      }

      .hero-grid {
        padding-top: 20px;
      }

      .hero-copy {
        padding-top: 230px;
      }

      .hero-copy h1 {
        font-size: 20px;
        margin: 0;
      }

      .hero-copy h1 .phrase {
        white-space: normal;
      }

      .lead {
        font-size: 10px;
      }

      .check-list {
        font-size: 13px;
      }

      .hero-badges {
        gap: 8px;
        top: 180px;
        right: 0;
        left: 0;
        width: max-content;
        margin: 0 auto !important;
      }

      .badge {
        width: 92px;
        height: 92px;
        font-size: 12px;
      }

      .badge b {
        font-size: 18px;
      }

      .intro-cards {
        margin-top: 30px;
      }

      .intro-cards ul,
      .monitor-grid,
      .point-flow,
      .point-notes,
      .exchange-grid,
      .point-banner {
        grid-template-columns: 1fr;
      }

      .section-title {
        font-size: 22px;
      }

      .faq-list {
        justify-content: stretch;
      }

      .faq-list li {
        width: 100%;
      }
.intro-cards ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}
.intro-cards li {
    width: calc((100% / 2) - 8px);
    padding: 22px 5px 18px;
}
.intro-cards h3 {
    font-size: 12px;
}
.point-change, .other-point {
    margin-top: 50px;
}

.faq {
    padding: 50px 0 10px;
}
.ranking-card {
    margin-top: 0;
}
.login-form {
    display: block;
    gap: 14px;
}
.login-form label {
    margin-bottom: 14px;
}
.login-form button[type="submit"] {
    min-width: max-content;
}



    }


/* Monitor page */
.monitor-page .survey-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.34) 68%, rgba(255,255,255,.05) 100%),
    url("../img/mainvisual.png") center 38% / cover no-repeat;
}

.monitor-layout {
  grid-template-columns: 250px minmax(0, 1fr);
}

.monitor-toolbar h2,
.monitor-all-section h2 {
  margin: 0;
  color: #243341;
  font-size: 22px;
  font-weight: 900;
}

.monitor-all-section {
  margin-top: 36px;
}

.monitor-all-section h2 {
  margin-bottom: 20px;
}

.monitor-all-section h2 span {
  font-size: 15px;
}

.monitor-area-select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d9e1e7;
  border-radius: 8px;
  background: #fff;
  color: #344451;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

.monitor-featured-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.monitor-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.monitor-work-card {
  overflow: hidden;
  border: 1px solid #e0e6ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.monitor-work-card a {
  display: block;
  height: 100%;
}

.monitor-work-thumb {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: #eef3f5;
}

.monitor-work-card.is-featured .monitor-work-thumb {
  height: 164px;
}

.monitor-work-thumb > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.monitor-work-thumb button {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  box-shadow: 0 6px 14px rgba(28,42,55,.16);
  cursor: pointer;
}

.monitor-work-thumb button img {
  width: 18px;
  height: 18px;
  filter: grayscale(1) brightness(.55);
    opacity: 0.5;
}

.monitor-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  min-width: 98px;
  background: linear-gradient(90deg, #2daf67, #66b941);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 11px 14px;
  clip-path: polygon(0 0, 100% 0, 86% 100%, 0% 100%);
}

.monitor-work-body {
  padding: 17px 17px 18px;
}

.monitor-category {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-bottom: 11px;
  border-radius: 6px;
  background: #fff2d7;
  color: #8b6b32;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 9px;
}

.monitor-work-card:nth-child(2) .monitor-category,
.monitor-featured-grid .monitor-work-card:nth-child(2) .monitor-category {
  background: #e4f7ef;
  color: #3e9a69;
}

.monitor-work-card:nth-child(3) .monitor-category,
.monitor-featured-grid .monitor-work-card:nth-child(3) .monitor-category {
  background: #eef2f8;
  color: #687489;
}

.monitor-card-grid .monitor-work-card:nth-child(5) .monitor-category {
  background: #f5ecd9;
  color: #8b6b32;
}

.monitor-card-grid .monitor-work-card:nth-child(6) .monitor-category {
  background: #e7f0ff;
  color: #5070a2;
}

.monitor-card-grid .monitor-work-card:nth-child(7) .monitor-category {
  background: #e9f5e7;
  color: #519c5d;
}

.monitor-card-grid .monitor-work-card:nth-child(8) .monitor-category {
  background: #e7f5f2;
  color: #3f9689;
}

.monitor-work-body h3 {
  margin: 0 0 12px;
  color: #22313d;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.55;
}

.monitor-work-card.is-featured .monitor-work-body h3 {
  font-size: 19px;
}

.monitor-kind,
.monitor-work-meta {
  display: flex;
  align-items: center;
  color: #4e5c66;
  font-size: 12px;
  font-weight: 800;
}

.monitor-kind {
  gap: 6px;
  margin: 0 0 12px;
}

.monitor-kind img,
.monitor-work-meta img {
  width: 14px;
  height: 14px;
  object-fit: contain;
  filter: grayscale(1) brightness(.48);
}

.monitor-reward {
  margin: 0 0 16px;
  color: #293947;
  font-size: 13px;
  font-weight: 900;
}

.monitor-reward strong {
  color: #f05867;
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.monitor-reward + .monitor-work-meta {
  justify-content: space-between;
  gap: 10px;
}

.monitor-work-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.monitor-flow {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  margin-top: 26px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f0faf3, #f6fbef);
  padding: 28px 44px;
}

.monitor-flow h2 {
  margin: 0;
  color: #243341;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.4;
  text-align: center;
}

.monitor-flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.monitor-flow li {
  position: relative;
  min-height: 100px;
  padding-left: 74px;
}

.monitor-flow li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #fff;
}

.monitor-flow li:not(:last-child)::after {
  content: ">";
  position: absolute;
  top: 28px;
  right: -19px;
  color: #38aa6c;
  font-weight: 900;
}

.monitor-flow li > img {
  position: absolute;
  top: 23px;
  left: 17px;
  z-index: 1;
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.monitor-flow span {
  display: block;
  color: #71808a;
  font-size: 12px;
  font-weight: 900;
}

.monitor-flow strong {
  display: block;
  color: #243341;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.4;
}

.monitor-flow p {
  margin: 2px 0 0;
  color: #59666f;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

@media (max-width: 1120px) {
  .monitor-featured-grid,
  .monitor-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .monitor-flow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .monitor-layout {
    grid-template-columns: 1fr;
  }

  .monitor-sidebar {
    order: 2;
  }
}

@media (max-width: 560px) {
  .monitor-featured-grid,
  .monitor-card-grid,
  .monitor-flow ol {
    grid-template-columns: 1fr;
  }

  .monitor-work-thumb,
  .monitor-work-card.is-featured .monitor-work-thumb {
    height: 190px;
  }

  .monitor-flow {
    padding: 22px;
  }

  .monitor-flow li {
    min-height: 84px;
  }

  .monitor-flow li:not(:last-child)::after {
    display: none;
  }
}


/* Ranking page */
.ranking-page .ranking-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.34) 68%, rgba(255,255,255,.05) 100%),
    url("../img/mainvisual.png") center 38% / cover no-repeat;
}

.ranking-type-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 8px 0 36px;
  border: 1px solid #dfe8e7;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.ranking-type-tabs a {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #61707b;
  font-size: 17px;
  font-weight: 900;
}

.ranking-type-tabs a.is-active {
  background: linear-gradient(90deg, #eaf8ef, #f2f8ec);
  color: #2da866;
}

.ranking-type-tabs img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(1) brightness(.55);
}

.ranking-type-tabs a.is-active img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.ranking-sub-tabs {
  display: flex;
  justify-content: center;
  gap: 52px;
  margin-bottom: 26px;
  font-size: 14px;
  font-weight: 900;
}

.ranking-sub-tabs a {
  position: relative;
  padding-bottom: 14px;
}

.ranking-sub-tabs a.is-active {
  color: #2da866;
}

.ranking-sub-tabs a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  border-radius: 999px;
  background: #2da866;
}

.ranking-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
}

.ranking-updated {
  margin: 0 0 16px;
  color: #8a969e;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.ranking-main-card,
.ranking-side-card,
.ranking-cta-card,
.ranking-monitor-section {
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.ranking-main-card {
  padding: 30px 22px 28px;
}

.ranking-main-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  color: #243341;
  font-size: 20px;
  font-weight: 900;
}

.ranking-main-card h2 img {
  width: 22px;
  height: 22px;
  filter: brightness(0) saturate(100%) invert(72%) sepia(100%) saturate(1086%) hue-rotate(354deg) brightness(101%) contrast(101%);
}

.ranking-main-card ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-main-item {
  display: grid;
  grid-template-columns: 56px 108px minmax(0, 1fr) 96px 24px;
  gap: 18px;
  align-items: center;
  min-height: 134px;
  border-bottom: 1px solid #edf1f3;
}

.ranking-main-item:last-child {
  border-bottom: 0;
}

.ranking-rank {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #dfe6ea;
  border-radius: 50%;
  color: #253442;
  font-size: 24px;
  font-weight: 900;
}

.ranking-rank.crown {
  border: 0;
  background: linear-gradient(135deg, #ffd761, #c0833e);
  color: #fff;
}

.ranking-rank.crown::before {
  content: "♛";
  position: absolute;
  margin-top: -54px;
  color: #f0b638;
  font-size: 20px;
}

.ranking-item-icon {
  display: grid;
  width: 100px;
  height: 100px;
  place-items: center;
  border-radius: 7px;
  background: linear-gradient(135deg, #ffe8e2, #fff4ed);
}

.ranking-main-item:nth-child(2) .ranking-item-icon { background: linear-gradient(135deg, #ddf1df, #f0f9ef); }
.ranking-main-item:nth-child(3) .ranking-item-icon { background: linear-gradient(135deg, #fff1cd, #fff9e8); }
.ranking-main-item:nth-child(4) .ranking-item-icon { background: linear-gradient(135deg, #def5fb, #effbfc); }
.ranking-main-item:nth-child(5) .ranking-item-icon { background: linear-gradient(135deg, #f1e4ff, #fbf4ff); }

.ranking-item-icon img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  filter: grayscale(1) brightness(.4);
}

.ranking-label {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  margin-bottom: 8px;
  border-radius: 6px;
  background: #eef5ef;
  color: #53705e;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 9px;
}

.ranking-item-body h3 {
  margin: 0 0 8px;
  color: #22313d;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
}

.ranking-item-body p {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: #4e5c66;
  font-size: 12px;
  font-weight: 800;
}

.ranking-item-body p img {
  width: 14px;
  height: 14px;
  filter: grayscale(1) brightness(.5);
}

.ranking-point {
  color: #f05867;
  font-weight: 900;
  text-align: center;
}

.ranking-point small {
  display: block;
  font-size: 10px;
}

.ranking-point strong {
  font-size: 34px;
  line-height: 1;
}

.ranking-point span {
  font-size: 16px;
}

.ranking-arrow {
  color: #1b2f40;
  font-size: 28px;
  font-weight: 400;
}

.ranking-more {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}

.ranking-more a,
.ranking-monitor-more {
  display: inline-flex;
  min-width: 230px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid #dfe6ea;
  border-radius: 999px;
  color: #52616d;
  font-size: 14px;
  font-weight: 900;
}

.ranking-side {
  display: grid;
  gap: 18px;
}

.ranking-side-card {
  padding: 20px 16px;
}

.ranking-side-card.is-soft {
  background: linear-gradient(135deg, #f2fbf4, #f8fbf0);
}

.ranking-side-card h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  color: #243341;
  font-size: 15px;
  font-weight: 900;
}

.ranking-side-card h2 img {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.ranking-side-card ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ranking-side-card li {
  display: grid;
  grid-template-columns: 26px 52px 1fr;
  gap: 9px;
  align-items: center;
}

.ranking-side-card li > span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #ffd35a;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.ranking-side-card li > img {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: #e7f5f2;
  padding: 12px;
  object-fit: contain;
}

.ranking-side-card p {
  margin: 0;
  color: #253442;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.45;
}

.ranking-side-card strong,
.ranking-side-card small {
  display: block;
  color: #f05867;
  text-align: right;
}

.ranking-side-card small {
  color: #8a969e;
}

.ranking-cta-card {
  padding: 24px 18px 20px;
  text-align: center;
}

.ranking-cta-card h2 {
  margin: 0 0 8px;
  color: #243341;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.6;
}

.ranking-cta-card p {
  margin: 0 0 12px;
  color: #59666f;
  font-size: 12px;
  font-weight: 800;
}

.ranking-cta-card img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  margin: 0 auto 14px;

    filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(1291%) hue-rotate(358deg) brightness(101%) contrast(102%);
}

.ranking-cta-card a {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(90deg, #2bae68, #58b944);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.ranking-monitor-section {
  margin: 70px 0 52px;
  padding: 28px 26px 32px;
}

.ranking-monitor-section h2 {
  margin: 0 0 26px;
  color: #243341;
  font-size: 22px;
  font-weight: 900;
}

.ranking-monitor-section h2 span {
  margin-left: 10px;
  color: #8a969e;
  font-size: 12px;
}

.ranking-monitor-carousel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  gap: 14px;
  align-items: center;
}

.ranking-monitor-carousel > button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid #dfe6ea;
  border-radius: 50%;
  background: #fff;
  color: #8a969e;
  cursor: pointer;
  font-size: 26px;
}

.ranking-monitor-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}

.ranking-monitor-card {
  position: relative;
}

.ranking-monitor-card img {
  width: 100%;
  aspect-ratio: 1.55;
  border-radius: 7px;
  object-fit: cover;
}

.ranking-monitor-rank {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 50%;
  background: #e3f7e8;
  color: #35a867;
  font-weight: 900;
  z-index: 1;
}

.ranking-monitor-crown {
  position: absolute;
  top: -20px;
  color: #d99b21;
  font-size: 18px;
}

.ranking-monitor-card .monitor-category {
  margin-top: 10px;
}

.ranking-monitor-card h3 {
  margin: 8px 0 6px;
  color: #22313d;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.ranking-monitor-card p {
  margin: 0;
  color: #293947;
  font-size: 12px;
  font-weight: 900;
}

.ranking-monitor-card p strong {
  color: #f05867;
  font-size: 28px;
  line-height: 1;
}

.ranking-monitor-more {
  width: min(330px, 100%);
  margin: 28px auto 0;
  color: #2da866;
  border-color: #2da866;
}

@media (max-width: 1120px) {
  .ranking-layout {
    grid-template-columns: 1fr;
  }

  .ranking-side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ranking-monitor-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .ranking-type-tabs,
  .ranking-side,
  .ranking-monitor-carousel,
  .ranking-monitor-list {
    grid-template-columns: 1fr;
  }

  .ranking-sub-tabs {
    gap: 18px;
    overflow-x: auto;
    justify-content: flex-start;
    white-space: nowrap;
  }

  .ranking-main-item {
    grid-template-columns: 44px 74px minmax(0, 1fr);
    gap: 12px;
    padding: 16px 0;
  }

  .ranking-item-icon {
    width: 74px;
    height: 74px;
  }

  .ranking-point,
  .ranking-arrow {
    grid-column: 3;
    text-align: right;
  }

  .ranking-point {
    text-align: left;
  }

  .ranking-monitor-carousel > button {
    display: none;
  }
}

.ranking-type-tabs button {
  display: flex;
  min-height: 64px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  background: #fff;
  color: #61707b;
  cursor: pointer;
  font: inherit;
  font-size: 17px;
  font-weight: 900;
}

.ranking-type-tabs button.is-active {
  background: linear-gradient(90deg, #eaf8ef, #f2f8ec);
  color: #2da866;
}

.ranking-type-tabs button img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: grayscale(1) brightness(.55);
}

.ranking-type-tabs button.is-active img {
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.ranking-tab-panel[hidden] {
  display: none;
}

.ranking-item-photo {
  overflow: hidden;
  width: 100px;
  height: 100px;
  border-radius: 7px;
  background: #eef3f5;
}

.ranking-item-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 760px) {
  .ranking-type-tabs button {
    min-height: 58px;
    font-size: 14px;
  }

  .ranking-item-photo {
    width: 74px;
    height: 74px;
  }
}

/* Information page */
.information-page .information-hero {
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.34) 68%, rgba(255,255,255,.05) 100%),
    url("../img/mainvisual.png") center 38% / cover no-repeat;
}

.information-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
  margin-top: 40px;
}

.information-sidebar {
  display: grid;
  gap: 28px;
}

.information-sidebar > h2 {
  margin: 0;
  color: #243341;
  font-size: 16px;
  font-weight: 900;
}

.information-category-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid #e7ecef;
  list-style: none;
}

.information-category-list a {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: space-between;
  border-radius: 8px;
  color: #344451;
  font-size: 13px;
  font-weight: 900;
  padding: 0 12px;
}

.information-category-list a.is-current {
  background: linear-gradient(90deg, #edf9f5, #eef7e8);
  color: #31a968;
}

.information-category-list em {
  display: grid;
  min-width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: #f0f3f5;
  color: #66737d;
  font-style: normal;
  font-size: 12px;
}

.information-mail-card {
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: linear-gradient(135deg, #f3fbf6, #fbfdf8);
  padding: 32px 20px 24px;
  text-align: center;
}

.information-mail-card div {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #fff;
}

.information-mail-card img {
  width: 34px;
  height: 34px;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.information-mail-card h2 {
  margin: 0 0 14px;
  color: #2da866;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.7;
}

.information-mail-card p {
  margin: 0 0 18px;
  color: #59666f;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.8;
}

.information-mail-card a,
.information-notice a {
  display: inline-flex;
  min-width: 160px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #2da866;
  border-radius: 999px;
  color: #2da866;
  font-size: 13px;
  font-weight: 900;
}

.information-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.information-toolbar p {
  margin: 0;
  color: #243341;
  font-size: 18px;
  font-weight: 900;
}

.information-toolbar strong {
  color: #2da866;
  font-size: 28px;
}

.information-toolbar select {
  min-width: 142px;
  min-height: 42px;
  border: 1px solid #d9e1e7;
  border-radius: 8px;
  background: #fff;
  color: #344451;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

.information-list-card {
  overflow: hidden;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.information-list-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.information-list-card li + li {
  border-top: 1px solid #edf1f3;
}

.information-list-card a {
  display: grid;
  grid-template-columns: 92px 118px minmax(0, 1fr) 28px;
  gap: 18px;
  align-items: center;
  min-height: 86px;
  padding: 0 24px;
}

.information-list-card time {
  color: #5b6871;
  font-size: 13px;
  font-weight: 800;
}

.information-badge {
  display: inline-flex;
  width: max-content;
  min-height: 24px;
  align-items: center;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 10px;
}

.information-badge.campaign { background: #ffe8e8; color: #f05867; }
.information-badge.notice { background: #e7f7ee; color: #2da866; }
.information-badge.update { background: #e7f1ff; color: #4e86c6; }
.information-badge.maintenance { background: #fff0dc; color: #e68a2e; }

.information-list-card strong {
  color: #243341;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.6;
}

.information-arrow {
  color: #1b2f40;
  font-size: 30px;
  line-height: 1;
  text-align: right;
}

.information-pagination {
  margin: 28px 0 38px;
}

.information-notice {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 190px;
  gap: 24px;
  align-items: center;
  width: min(100%, 1040px);
  margin: 0 auto 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f2faf5, #f6fbf1);
  padding: 26px 48px;
}

.information-notice > div:first-child {
  display: grid;
  width: 78px;
  height: 78px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
}

.information-notice img {
  width: 38px;
  height: 38px;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.information-notice h2 {
  margin: 0 0 8px;
  color: #243341;
  font-size: 19px;
  font-weight: 900;
}

.information-notice p {
  margin: 0;
  color: #59666f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
}

.information-notice a {
  background: linear-gradient(90deg, #2bae68, #58b944);
  color: #fff;
  border: 0;
}

.information-footer {
  padding: 0;
  background: #f8fafb;
}

.information-footer-columns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px;
  padding: 42px 0 34px;
}

.information-footer-columns h2 {
  margin: 0 0 12px;
  color: #243341;
  font-size: 13px;
  font-weight: 900;
}

.information-footer-columns a {
  display: block;
  margin-top: 8px;
  color: #5b6871;
  font-size: 12px;
  font-weight: 700;
}

.information-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid #e7ecef;
  padding: 22px 0;
}

.information-footer-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.information-footer-bottom a,
.information-footer-bottom p {
  margin: 0;
  color: #5b6871;
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .information-layout {
    grid-template-columns: 1fr;
  }

  .information-sidebar {
    order: 2;
  }

  .information-footer-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .information-list-card a {
    grid-template-columns: 1fr 28px;
    gap: 8px 12px;
    padding: 18px;
  }

  .information-list-card time,
  .information-badge,
  .information-list-card strong {
    grid-column: 1;
  }

  .information-arrow {
    grid-column: 2;
    grid-row: 1 / span 3;
  }

  .information-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .information-toolbar select {
    width: 100%;
  }

  .information-notice,
  .information-footer-bottom {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: flex-start;
    padding: 22px;
  }

  .information-footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Information detail page */
.info-detail-main {
  padding-bottom: 0;
}

.info-detail-breadcrumb {
  margin-bottom: 44px;
}

.info-detail-breadcrumb a::after {
  content: ">";
  margin-left: 12px;
  color: #99a4ac;
}

.info-detail-heading {
  margin-bottom: 28px;
}

.info-detail-heading h1 {
  margin: 0 0 16px;
  color: var(--navy);
  font-size: 36px;
  font-weight: 900;
  line-height: 1.35;
}

.info-detail-heading a,
.info-back-list {
  display: inline-flex;
  min-width: 190px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #d6e0e6;
  border-radius: 999px;
  background: #fff;
  color: #52616d;
  font-size: 13px;
  font-weight: 900;
}

.info-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
  gap: 42px;
  align-items: start;
}

.info-detail-article {
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
  padding: 32px;
}

.info-detail-meta {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 20px;
}

.info-detail-meta time {
  color: #5b6871;
  font-size: 13px;
  font-weight: 800;
}

.info-detail-article h2 {
  margin: 0 0 22px;
  color: #1d3142;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.55;
}

.info-share-list {
  display: flex;
  gap: 12px;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.info-share-list a {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.info-share-list .x { background: #050505; }
.info-share-list .facebook { background: #2f82e9; font-size: 24px; }
.info-share-list .line { background: #28bf58; font-size: 9px; }

.info-detail-body p {
  margin: 0 0 28px;
  color: #344451;
  font-size: 15px;
  font-weight: 800;
  line-height: 2;
}

.info-campaign-visual {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 110px;
  gap: 22px;
  align-items: center;
  margin: 0 0 34px;
  border: 1px solid #b9e7cb;
  border-radius: 8px;
  background:
    radial-gradient(circle at 12% 18%, #d6f3df 0 4px, transparent 5px),
    radial-gradient(circle at 84% 24%, #ffd87b 0 4px, transparent 5px),
    radial-gradient(circle at 92% 72%, #f2b6b6 0 4px, transparent 5px),
    linear-gradient(90deg, #f1fbf5, #fbfff8);
  padding: 30px 34px;
}

.info-campaign-badge {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #2cad66, #55bb49);
  color: #fff;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.25;
  text-align: center;
}

.info-campaign-visual p {
  margin: 0;
  color: #243341;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  text-align: center;
}

.info-campaign-visual p span {
  display: block;
  margin-bottom: 6px;
  color: #2da866;
  font-size: 18px;
}

.info-campaign-visual strong {
  color: #f05867;
  font-size: 86px;
  line-height: .9;
}

.info-campaign-visual img {
  width: 94px;
  height: 94px;
  object-fit: contain;
}

.info-campaign-summary {
  margin-bottom: 28px;
}

.info-campaign-summary h3 {
  margin: 0 0 16px;
  border-left: 4px solid #2da866;
  color: #243341;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  padding-left: 12px;
}

.info-campaign-summary dl {
  margin: 0;
  border-top: 1px solid #dfe6ea;
}

.info-campaign-summary div {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  border-bottom: 1px solid #dfe6ea;
}

.info-campaign-summary dt,
.info-campaign-summary dd {
  margin: 0;
  color: #2c3b47;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.7;
  padding: 12px 16px;
}

.info-campaign-summary dt {
  background: #f7f9fa;
}

.info-register-cta {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 22px;
  align-items: center;
  border-radius: 8px;
  background: linear-gradient(90deg, #f2faf5, #f7fbf1);
  padding: 26px 34px;
}

.info-register-cta div {
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  grid-row: span 2;
}

.info-register-cta img {
  width: 38px;
  height: 38px;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.info-register-cta p {
  margin: 0;
  color: #243341;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.8;
}

.info-register-cta a {
  display: inline-flex;
  width: 280px;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: linear-gradient(90deg, #2bae68, #58b944);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}

.info-detail-side {
  display: grid;
  gap: 28px;
}

.info-related-section {
  margin: 46px 0 58px;
}

.info-related-section h2 {
  margin: 0 0 22px;
  color: #243341;
  font-size: 20px;
  font-weight: 900;
}

.info-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.info-related-card {
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.info-related-card a {
  display: grid;
  grid-template-columns: 1fr 20px;
  gap: 8px 10px;
  min-height: 138px;
  padding: 20px;
}

.info-related-card time,
.info-related-card .information-badge,
.info-related-card h3 {
  grid-column: 1;
}

.info-related-card time {
  color: #5b6871;
  font-size: 12px;
  font-weight: 800;
}

.info-related-card h3 {
  margin: 4px 0 0;
  color: #243341;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.7;
}

.info-related-card .information-arrow {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
}

.info-back-list {
  width: min(260px, 100%);
  margin: 30px auto 0;
  color: #2da866;
  border-color: #2da866;
}

@media (max-width: 980px) {
  .info-detail-layout {
    grid-template-columns: 1fr;
  }

  .info-detail-side {
    order: 2;
  }

  .info-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .info-detail-heading h1 {
    font-size: 28px;
  }

  .info-detail-article {
    padding: 22px;
  }

  .info-detail-article h2 {
    font-size: 22px;
  }

  .info-campaign-visual,
  .info-register-cta,
  .info-campaign-summary div,
  .info-related-grid {
    grid-template-columns: 1fr;
  }

  .info-campaign-visual {
    text-align: center;
  }

  .info-campaign-badge,
  .info-campaign-visual img,
  .info-register-cta div {
    margin: 0 auto;
  }

  .info-campaign-visual strong {
    font-size: 64px;
  }

  .info-register-cta a {
    width: 100%;
  }
}

/* Firsttime page */
.firsttime-page .firsttime-hero {
  background:
    linear-gradient(0deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 34%, rgba(255,255,255,.34) 68%, rgba(255,255,255,.05) 100%),
    url("../img/mainvisual.png") center 38% / cover no-repeat;
}

.firsttime-main section {
  position: relative;
}

.firsttime-about {
  padding: 36px 0 46px;
  text-align: center;
}

.firsttime-about h2,
.firsttime-flow h2,
.firsttime-exchange h2,
.firsttime-faq h2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #243341;
  font-size: 28px;
  font-weight: 900;
}

.firsttime-about h2 img,
.firsttime-flow h2 img,
.firsttime-exchange h2 img,
.firsttime-faq h2 img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(76%) sepia(99%) saturate(1291%) hue-rotate(358deg) brightness(101%) contrast(102%);
}

.firsttime-about > p {
  margin: 0 0 38px;
  color: #344451;
  font-size: 15px;
  font-weight: 800;
  line-height: 2;
}

.firsttime-about ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 54px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.firsttime-about li {
  position: relative;
}

.firsttime-about li:not(:last-child)::after {
  content: ">";
  position: absolute;
  top: 56px;
  right: -32px;
  color: #2da866;
  font-size: 24px;
  font-weight: 900;
}

.firsttime-icon {
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  margin: 0 auto 22px;
  border: 2px solid #e2eee7;
  border-radius: 50%;
  background: #fff;
}

.firsttime-icon img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.firsttime-about li:nth-child(2) .firsttime-icon img,
.firsttime-about li:nth-child(2) .firsttime-icon {
  border-color: #f5e3c6;
  filter: none;
}
.firsttime-about li:nth-child(2) .firsttime-icon img {
    width: 70px;
    height: 60px;
    filter: brightness(0) saturate(100%) invert(58%) sepia(86%) saturate(1123%) hue-rotate(1deg) brightness(104%) contrast(103%);}
.firsttime-about li:nth-child(3) .firsttime-icon img {
    filter: brightness(0) saturate(100%) invert(0%) sepia(83%) saturate(7433%) hue-rotate(210deg) brightness(115%) contrast(88%);
}
.firsttime-about h3 {
  margin: 0 0 12px;
  color: #243341;
  font-size: 17px;
  font-weight: 900;
}

.firsttime-about li p {
  margin: 0;
  color: #59666f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.8;
}

.firsttime-flow {
  border-radius: 0;
  background: linear-gradient(90deg, #f0faf3, #f8fcf2);
  padding: 34px 48px 42px;
}

.firsttime-flow ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 42px;
  margin: 34px 0 30px;
  padding: 0;
  list-style: none;
}

.firsttime-flow li {
  position: relative;
  text-align: center;
}

.firsttime-flow li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 56px;
  right: -40px;
  width: 72px;
  height: 2px;
  background: #4fbd8a;
}

.firsttime-flow li:not(:last-child)::before {
  content: ">";
  position: absolute;
  top: 43px;
  right: -42px;
  color: #4fbd8a;
  font-weight: 900;
}

.firsttime-flow li > span {
  display: block;
  color: #71808a;
  font-size: 13px;
  font-weight: 900;
}

.firsttime-step-icon {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  margin: 8px auto 14px;
  border-radius: 50%;
  background: #fff;
}

.firsttime-step-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.firsttime-flow li:nth-child(3) .firsttime-step-icon img {
    filter: initial;}
.firsttime-flow li:nth-child(4) .firsttime-step-icon img {
    filter: brightness(0) saturate(100%) invert(58%) sepia(86%) saturate(1123%) hue-rotate(1deg) brightness(104%) contrast(103%);
    width: 45px;
    height: 45px;}


.firsttime-flow h3 {
  margin: 0 0 14px;
  color: #243341;
  font-size: 17px;
  font-weight: 900;
}




.firsttime-phone {
  overflow: hidden;
  width: 128px;
  height: 190px;
  margin: 0 auto 18px;
  border: 8px solid #111;
  border-bottom-width: 16px;
  border-radius: 24px 24px 18px 18px;
  background: #fff;
  box-shadow: 0 10px 18px rgba(30,45,60,.12);
  padding: 16px 12px;
}

.firsttime-phone strong {
  display: grid;
  min-height: 44px;
  place-items: center;
  margin-bottom: 12px;
  border-radius: 8px;
  background: #e9f8ee;
  color: #2da866;
  font-size: 12px;
  line-height: 1.3;
}

.firsttime-phone small {
  display: block;
  height: 18px;
  margin-top: 8px;
  border-radius: 4px;
  background: #f0f4f6;
}

.firsttime-flow li p {
  margin: 0;
  color: #59666f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.8;
}

.firsttime-line-btn,
.firsttime-more-btn {
  display: flex;
  width: min(300px, 100%);
  min-height: 54px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
  border-radius: 999px;
  background: linear-gradient(90deg, #2bae68, #58b944);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  box-shadow: 0 12px 20px rgba(54, 173, 92, .22);
}

.firsttime-line-btn img {
  width: 24px;
  height: 24px;
}

.firsttime-exchange {
  padding: 46px 34px 34px;
}

.firsttime-exchange ul {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.firsttime-exchange li {
  min-height: 172px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  padding: 18px 12px;
  text-align: center;
}

.firsttime-exchange h3 {
  margin: 0 0 12px;
  color: #2da866;
  font-size: 13px;
  font-weight: 900;
}

.firsttime-exchange div {
  display: grid;
  min-height: 62px;
  place-items: center;
}

.firsttime-exchange img {
  max-width: 78px;
  max-height: 54px;
  object-fit: contain;
}

.firsttime-exchange p {
  margin: 12px 0 0;
  color: #344451;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.6;
}

.firsttime-safety {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 38px;
  align-items: center;
  width: min(980px, 100%);
  margin: 0 auto 48px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1faf5, #f8fcf2);
  padding: 36px 58px;
}

.firsttime-safety h2 {
  margin: 0 0 20px;
  color: #243341;
  font-size: 22px;
  font-weight: 900;
}

.firsttime-safety ul {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.firsttime-safety li {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 8px 12px;
}

.firsttime-safety li span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  background: #2da866;
  grid-row: span 2;
}

.firsttime-safety li span::after {
  content: "";
  width: 6px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}

.firsttime-safety strong {
  color: #243341;
  font-size: 15px;
  font-weight: 900;
}

.firsttime-safety p {
  margin: 0;
  color: #59666f;
  font-size: 13px;
  font-weight: 800;
}

.firsttime-shield {
  position: relative;
  display: grid;
  place-items: center;
}

.firsttime-shield img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(55%) sepia(47%) saturate(680%) hue-rotate(88deg) brightness(91%) contrast(88%);
}

.firsttime-shield span {
  position: absolute;
  right: 30px;
  bottom: 12px;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border-radius: 50%;
  background: #2da866;
}

.firsttime-shield span::after {
  content: "";
  width: 15px;
  height: 26px;
  border-right: 5px solid #fff;
  border-bottom: 5px solid #fff;
  transform: rotate(45deg);
}

.firsttime-faq {
  padding-bottom: 58px;
}

.firsttime-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1060px;
}

.firsttime-faq-list li {
  width: 100%;
}

.firsttime-more-btn {
  margin-top: 28px;
  border: 1px solid #2da866;
  background: #fff;
  color: #2da866;
  box-shadow: none;
}

@media (max-width: 980px) {
  .firsttime-about ul,
  .firsttime-flow ol,
  .firsttime-exchange ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .firsttime-about li:not(:last-child)::after,
  .firsttime-flow li:not(:last-child)::before,
  .firsttime-flow li:not(:last-child)::after {
    display: none;
  }

  .firsttime-safety {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .firsttime-about h2,
  .firsttime-flow h2,
  .firsttime-exchange h2,
  .firsttime-faq h2 {
    font-size: 22px;
  }

  .firsttime-about ul,
  .firsttime-flow ol,
  .firsttime-exchange ul,
  .firsttime-faq-list {
    grid-template-columns: 1fr;
  }

  .firsttime-flow,
  .firsttime-safety {
    padding: 28px 18px;
  }
}

/* FAQ page */
.faq-page .faq-hero {
  min-height: 270px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 36%, rgba(255,255,255,.18) 67%, rgba(255,255,255,0) 100%),
    url("../img/mainvisual.png") center right / cover no-repeat;
}

.faq-page .faq-hero p {
  max-width: 560px;
  line-height: 2.05;
}

.faq-page-layout {
  display: grid;
  grid-template-columns: 304px minmax(0, 1fr);
  gap: 32px;
  margin-top: 58px;
}

.faq-page-sidebar {
  display: grid;
  gap: 34px;
  align-content: start;
}

.faq-category-card,
.faq-contact-card,
.faq-page-content {
  background: #fff;
  border: 1px solid #dfe6ee;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(23, 43, 77, .05);
}

.faq-category-card {
  padding: 18px 14px;
}

.faq-category-card ul,
.faq-reasons ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faq-category-card a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 8px;
  color: #12304a;
  font-weight: 700;
  text-decoration: none;
}

.faq-category-card a.is-current {
  background: #eef8f1;
  color: #2fad63;
}

.faq-category-card img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.faq-contact-card {
  padding: 38px 24px 28px;
  text-align: center;
  background: linear-gradient(145deg, #f5fbf7 0%, #fff 100%);
}

.faq-contact-card > div {
  display: grid;
  place-items: center;
  width: 98px;
  height: 98px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #fff;
}

.faq-contact-card img {
  width: 54px;
  height: 54px;
}

.faq-contact-card h2 {
  margin: 0 0 14px;
  color: #2fad63;
  font-size: 20px;
  line-height: 1.65;
}

.faq-contact-card p {
  margin: 0 0 22px;
  color: #5c6b7a;
  font-size: 14px;
  line-height: 1.9;
}

.faq-contact-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 228px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid #2fad63;
  border-radius: 999px;
  color: #2fad63;
  font-weight: 800;
  text-decoration: none;
}

.faq-contact-card a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 16px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.faq-page-content {
  padding: 22px 18px 20px;
}

.faq-page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
}

.faq-page-heading h2 {
  margin: 0;
  color: #2fad63;
  font-size: 24px;
}

.faq-search {
  position: relative;
  display: block;
  width: min(320px, 100%);
}

.faq-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.faq-search input {
  width: 100%;
  min-height: 50px;
  padding: 0 48px 0 20px;
  border: 1px solid #dce5ee;
  border-radius: 8px;
  color: #12304a;
  font: inherit;
}

.faq-search::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #2fad63;
  border-radius: 50%;
  transform: translateY(-58%);
}

.faq-search::before {
  content: "";
  position: absolute;
  right: 15px;
  top: 30px;
  width: 9px;
  height: 2px;
  background: #2fad63;
  transform: rotate(45deg);
}

.faq-page-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e0e8ef;
  border-radius: 8px;
  list-style: none;
}

.faq-page-list li + li {
  border-top: 1px solid #e0e8ef;
}

.faq-page-list .faq-question {
  width: 100%;
  min-height: 68px;
  padding: 0 64px 0 22px;
  background: #fff;
  border: 0;
  color: #12304a;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.55;
  text-align: left;
}

.faq-page-list .q-mark,
.faq-page-list .a-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 16px;
  border: 1px solid #34b46d;
  border-radius: 50%;
  color: #34b46d;
  font-size: 14px;
  font-weight: 900;
}

.faq-page-list .a-mark {
  background: #34b46d;
  color: #fff;
}

.faq-page-list .faq-answer {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  color: #536676;
  line-height: 1.9;
  transition: height .34s ease, padding .34s ease;
}

.faq-page-list .faq-answer p {
  margin: 0;
}

.faq-page-note {
  margin: 18px 18px 0;
  color: #5b6b7b;
  font-size: 14px;
}

.faq-page-note a {
  color: #2fad63;
  font-weight: 800;
  text-decoration: none;
}

.faq-reasons {
  margin: 54px 0 42px;
  padding: 32px 42px 36px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f4fbf6 0%, #fff 48%, #f1f9f4 100%);
  box-shadow: inset 0 0 0 1px rgba(47, 173, 99, .08);
}

.faq-reasons h2 {
  position: relative;
  margin: 0 0 34px;
  color: #12304a;
  font-size: 24px;
  text-align: center;
}

.faq-reasons h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 46px;
  height: 3px;
  border-radius: 999px;
  background: #2fad63;
  transform: translateX(-50%);
}

.faq-reasons ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.faq-reasons li {
  min-height: 154px;
  padding: 10px 28px 0;
  text-align: center;
}

.faq-reasons li + li {
  border-left: 1px solid #dbe8df;
}

.faq-reasons img {
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  object-fit: contain;
}

.faq-reasons h3 {
  margin: 0 0 10px;
  color: #2fad63;
  font-size: 17px;
}

.faq-reasons p {
  margin: 0;
  color: #405466;
  font-size: 14px;
  line-height: 1.75;
}

@media (max-width: 980px) {
  .faq-page-layout {
    grid-template-columns: 1fr;
  }

  .faq-page-sidebar {
    grid-template-columns: 1fr;
  }

  .faq-reasons ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 0;
  }

  .faq-reasons li:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .faq-page .faq-hero {
    min-height: 300px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.92) 50%, rgba(255,255,255,.2) 100%),
      url("../img/mainvisual.png") 62% center / cover no-repeat;
  }

  .faq-page-layout {
    margin-top: 32px;
    gap: 24px;
  }

  .faq-page-heading {
    align-items: stretch;
    flex-direction: column;
    gap: 16px;
  }

  .faq-page-content {
    padding: 18px 12px 18px;
  }

  .faq-page-list .faq-question {
    min-height: 64px;
    padding: 12px 48px 12px 14px;
    font-size: 15px;
  }

  .faq-page-list .q-mark,
  .faq-page-list .a-mark {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }

  .faq-contact-card a {
    min-width: 0;
    width: 100%;
  }

  .faq-reasons {
    margin-top: 32px;
    padding: 28px 18px;
  }

  .faq-reasons ul {
    grid-template-columns: 1fr;
  }

  .faq-reasons li,
  .faq-reasons li + li {
    border-left: 0;
    border-top: 1px solid #dbe8df;
    padding: 24px 10px 0;
  }

  .faq-reasons li:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* FAQ page design refinement */
.faq-page {
  background: #fff;
}

.faq-page .container {
  max-width: 1180px;
}

.faq-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.faq-page .faq-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.58) 53%, rgba(255,255,255,0) 74%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.faq-page .faq-hero h1 {
  margin-bottom: 24px;
  font-size: 42px;
  letter-spacing: 0;
}

.faq-page .faq-hero p {
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.faq-page .faq-page-layout {
  display: grid;
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 28px;
  margin-top: 54px;
  align-items: start;
}

.faq-page .faq-page-sidebar {
  display: grid;
  gap: 34px;
}

.faq-page .faq-category-card {
  min-height: 470px;
  padding: 16px 14px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
}

.faq-page .faq-category-card a {
  min-height: 58px;
  padding: 0 16px;
  border-radius: 8px;
  font-size: 15px;
}

.faq-page .faq-category-card img {
  filter: brightness(0) saturate(100%) invert(16%) sepia(31%) saturate(1137%) hue-rotate(173deg) brightness(91%) contrast(90%);
}

.faq-page .faq-category-card a.is-current img {
  filter: none;
}

.faq-page .faq-contact-card {
  min-height: 314px;
  padding: 38px 22px 28px;
  border: 0;
  background: linear-gradient(145deg, #eef8f2 0%, #fff 100%);
  box-shadow: none;
}

.faq-page .faq-contact-card > div {
  width: 94px;
  height: 94px;
  margin-bottom: 18px;
}

.faq-page .faq-contact-card h2 {
  font-size: 19px;
  line-height: 1.55;
}

.faq-page .faq-contact-card a {
  min-width: 236px;
  min-height: 45px;
  font-size: 14px;
}

.faq-page .faq-page-content {
  padding: 22px 18px 18px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  box-shadow: none;
}

.faq-page .faq-page-heading {
  margin: 0 20px 16px;
}

.faq-page .faq-page-heading h2 {
  color: #25a95d;
  font-size: 23px;
}

.faq-page .faq-search {
  width: 278px;
}

.faq-page .faq-search input {
  min-height: 48px;
  border-color: #dde6ee;
  border-radius: 8px;
  font-size: 15px;
}

.faq-page .faq-page-list {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
  list-style: none;
}

.faq-page .faq-page-list li {
  display: block;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.faq-page .faq-page-list li + li {
  border-top: 1px solid #dfe7ee;
}

.faq-page .faq-page-list .faq-question {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 0 56px 0 20px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #12304a;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.faq-page .faq-page-list .faq-question::after {
  content: "+";
  position: absolute;
  right: 24px;
  top: 50%;
  color: #12304a;
  font-size: 25px;
  font-weight: 300;
  line-height: 1;
  transform: translateY(-50%);
}

.faq-page .faq-page-list .faq-question[aria-expanded="true"]::after {
  content: "-";
}

.faq-page .faq-page-list .q-mark,
.faq-page .faq-page-list .a-mark {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  margin-right: 16px;
  border: 1px solid #35b86f;
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
}

.faq-page .faq-page-list .a-mark {
  background: #35b86f;
  color: #fff;
}

.faq-page .faq-page-list .faq-answer {
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  padding: 0;
  color: #536676;
  font-size: 15px;
  line-height: 1.9;
  transition: height .34s ease, padding .34s ease;
}

.faq-page .faq-page-list .faq-answer.is-open {
  padding: 12px 54px 18px 20px;
}

.faq-page .faq-page-note {
  margin: 18px 18px 0;
  font-size: 14px;
}

.faq-page .faq-reasons {
  margin: 40px 0 0;
  padding: 28px 38px 36px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f4fbf6 0%, #fff 52%, #f1f9f4 100%);
  box-shadow: none;
}

.faq-page .faq-reasons h2 {
  margin-bottom: 36px;
  font-size: 22px;
}

.faq-page .faq-reasons ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 0;
  margin: 0;
  list-style: none;
}

.faq-page .faq-reasons li {
  min-height: 144px;
  padding: 4px 27px 0;
  text-align: center;
}

.faq-page .faq-reasons li + li {
  border-left: 1px solid #dce8e0;
}

.faq-page .faq-reasons img {
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
  object-fit: contain;
}

.faq-page .faq-reasons h3 {
  margin-bottom: 10px;
  color: #2fad63;
  font-size: 16px;
}

.faq-page .faq-reasons p {
  font-size: 14px;
  line-height: 1.75;
}

.faq-page .information-footer {
  margin-top: 40px;
}

@media (max-width: 980px) {
  .faq-page .faq-page-layout {
    grid-template-columns: 1fr;
  }

  .faq-page .faq-page-sidebar {
    grid-template-columns: 1fr;
  }

  .faq-page .faq-reasons ul {
    grid-template-columns: repeat(2, 1fr);
  }

  .faq-page .faq-reasons li:nth-child(odd) {
    border-left: 0;
  }
}

@media (max-width: 560px) {
  .faq-page .survey-breadcrumb {
    margin-top: 14px;
  }

  .faq-page .faq-hero {
    min-height: 300px;
    padding: 34px 0;

    background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 10%, rgba(255, 255, 255, .35) 100%), url(../img/mainvisual.png) 62% center / cover no-repeat;  }

  .faq-page .faq-hero h1 {
    font-size: 32px;
  }

  .faq-page .faq-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .faq-page .faq-page-layout {
    gap: 24px;
    margin-top: 32px;
  }

  .faq-page .faq-category-card {
    min-height: 0;
  }

  .faq-page .faq-page-heading {
    align-items: stretch;
    flex-direction: column;
    margin: 0 4px 16px;
  }

  .faq-page .faq-search {
    width: 100%;
  }

  .faq-page .faq-page-content {
    padding: 16px 12px;
  }

  .faq-page .faq-page-list .faq-question {
    min-height: 62px;
    padding: 12px 46px 12px 14px;
    font-size: 15px;
  }

  .faq-page .faq-page-list .faq-question::after {
    right: 18px;
  }

  .faq-page .faq-page-list .q-mark,
  .faq-page .faq-page-list .a-mark {
    width: 24px;
    height: 24px;
    margin-right: 10px;
  }

  .faq-page .faq-page-list .faq-answer.is-open {
    padding: 10px 16px 16px 14px;
  }

  .faq-page .faq-reasons {
    padding: 28px 18px;
  }

  .faq-page .faq-reasons ul {
    grid-template-columns: 1fr;
  }

  .faq-page .faq-reasons li,
  .faq-page .faq-reasons li + li {
    border-left: 0;
    border-top: 1px solid #dce8e0;
    padding: 24px 10px 0;
  }

  .faq-page .faq-reasons li:first-child {
    border-top: 0;
    padding-top: 0;
  }
}

/* Contact page */
.contact-page {
  background: #fff;
}

.contact-page .container {
  max-width: 1180px;
}

.contact-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.contact-page .contact-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.58) 53%, rgba(255,255,255,0) 74%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.contact-page .contact-hero h1 {
  margin-bottom: 24px;
  font-size: 42px;
  letter-spacing: 0;
}

.contact-page .contact-hero p {
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 900px) 296px;
  gap: 28px;
  margin-top: 20px;
  align-items: start;
}

.contact-form-card,
.contact-side-card,
.contact-common-faq li {
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
}

.contact-form-card {
  padding: 34px 30px 28px;
}

.contact-form-card h2 {
  position: relative;
  margin: 0 0 22px;
  padding-left: 18px;
  color: #12304a;
  font-size: 22px;
}

.contact-form-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 4px;
  height: 26px;
  border-radius: 999px;
  background: #2fad63;
}

.contact-lead {
  margin: 0 0 22px;
  color: #405466;
  font-size: 15px;
}

.contact-form {
  display: grid;
}

.contact-field {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding: 20px 0;
  border-top: 1px solid #e5ecf2;
}

.contact-field label {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  color: #12304a;
  font-weight: 800;
}

.contact-field label span,
.contact-privacy em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  background: #35b86f;
  color: #fff;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.contact-field input,
.contact-field select,
.contact-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 0 18px;
  border: 1px solid #dce5ee;
  border-radius: 4px;
  background: #fff;
  color: #12304a;
  font: inherit;
}

.contact-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #12304a 50%), linear-gradient(135deg, #12304a 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 12px) 21px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.contact-field textarea {
  min-height: 120px;
  padding-top: 16px;
  resize: vertical;
}

.contact-field small {
  display: block;
  margin-top: 10px;
  color: #647484;
  font-size: 13px;
}

.contact-privacy {
  margin: 22px 0 24px;
  padding: 22px 24px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f3fbf6 0%, #fff 100%);
}

.contact-privacy h3 {
  margin: 0 0 12px;
  color: #2fad63;
  font-size: 17px;
}

.contact-privacy p {
  margin: 0 0 16px;
  color: #405466;
  font-size: 14px;
  line-height: 1.8;
}

.contact-privacy label {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2fad63;
  font-weight: 800;
}

.contact-privacy input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #2fad63;
}

.contact-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  width: 260px;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #22a8b8 0%, #55b33c 100%);
  color: #fff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.contact-submit::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.contact-side {
  display: grid;
  gap: 28px;
}

.contact-side-card {
  padding: 30px 26px;
}

.contact-side-card h2 {
  margin: 0 0 22px;
  color: #12304a;
  font-size: 19px;
}

.contact-side-card p {
  margin: 0 0 24px;
  color: #405466;
  font-size: 14px;
  line-height: 2;
}

.contact-faq-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 45px;
  border: 1px solid #2fad63;
  border-radius: 999px;
  color: #2fad63;
  font-weight: 800;
  text-decoration: none;
    position: relative;
}

.contact-faq-card a::after,
.contact-faq-more::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 16px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%) rotate(45deg);
}

.contact-response-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-response-card li {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 14px;
  align-items: center;
  padding: 22px 0;
  color: #405466;
  font-size: 14px;
  line-height: 1.8;
}

.contact-response-card li + li {
  border-top: 1px dashed #d3dde6;
}

.contact-response-card img {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 50%;
  background: #ecf8f1;
  object-fit: contain;
}

.contact-common-faq {
  margin: 22px 0 38px;
}

.contact-common-faq h2 {
  margin: 0 0 12px 8px;
  color: #12304a;
  font-size: 21px;
}

.contact-common-faq ul {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.contact-common-faq li {
  min-height: 126px;
}

.contact-common-faq a {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 18px 12px;
  color: #12304a;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
    position: relative;
}

.contact-common-faq img {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
  object-fit: contain;
}

.contact-faq-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 280px;
  min-height: 45px;
  margin: 0 auto;
  border: 1px solid #2fad63;
  border-radius: 999px;
  color: #2fad63;
  font-weight: 800;
  text-decoration: none;
}

.contact-page .information-footer {
  margin-top: 0;
}

@media (max-width: 980px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-side {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-common-faq ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .contact-page .contact-hero {
    min-height: 300px;
    padding: 34px 20px;
    background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 10%, rgba(255, 255, 255, .35) 100%), url(../img/mainvisual.png) 62% center / cover no-repeat;
  }

  .contact-page .contact-hero h1 {
    font-size: 32px;
  }

  .contact-page .contact-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .contact-layout {
    margin-top: 24px;
  }

  .contact-form-card {
    padding: 26px 16px 24px;
  }

  .contact-field {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }

  .contact-field label {
    min-height: 0;
  }

  .contact-side {
    grid-template-columns: 1fr;
  }

  .contact-common-faq ul {
    grid-template-columns: 1fr;
  }

  .contact-faq-more,
  .contact-submit {
    width: 100%;
  }
.contact-side-card h2,
.contact-common-faq h2 {
    text-align: center;
}
}

/* Company page */
.company-page {
  background: #fff;
}

.company-page .container {
  max-width: 1180px;
}

.company-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.company-page .company-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.58) 53%, rgba(255,255,255,0) 74%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.company-page .company-hero h1 {
  margin-bottom: 24px;
  font-size: 42px;
  letter-spacing: 0;
}

.company-page .company-hero p {
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.company-outline,
.company-message,
.company-safety {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
}

.company-outline {
  margin-top: 52px;
}

.company-outline h2,
.company-message h2,
.company-safety h2 {
  position: relative;
  margin: 0 0 34px;
  color: #12304a;
  font-size: 23px;
  text-align: center;
}

.company-outline h2::after,
.company-message h2::after,
.company-safety h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -12px;
  width: 38px;
  height: 3px;
  border-radius: 999px;
  background: #2fad63;
  transform: translateX(-50%);
}

.company-outline table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #dfe7ee;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  background: #fff;
}

.company-outline th,
.company-outline td {
  padding: 22px 32px;
  border-top: 1px solid #dfe7ee;
  color: #12304a;
  font-size: 15px;
  line-height: 1.75;
  text-align: left;
  vertical-align: middle;
}

.company-outline tr:first-child th,
.company-outline tr:first-child td {
  border-top: 0;
}

.company-outline th {
  width: 210px;
  background: #f8fafc;
  font-weight: 800;
}

.company-message {
  margin-top: 36px;
  padding: 36px 58px 44px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f2fbf5 0%, #fff 52%, #f1f9f4 100%);
}

.company-message-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 46px;
  align-items: center;
}

.company-message-text h3 {
  margin: 0 0 18px;
  color: #2fad63;
  font-size: 20px;
}

.company-message-text p {
  margin: 0;
  color: #405466;
  font-size: 15px;
  font-weight: 500;
  line-height: 2;
}

.company-message-text p + p {
  margin-top: 12px;
}

.company-cycle {
  position: relative;
  min-height: 288px;
}

.company-cycle-ring {
  position: absolute;
  inset: 38px 48px 36px;
  border: 2px dashed #9eacb7;
  border-radius: 50%;
}

.company-cycle-item {
  position: absolute;
  display: grid;
  place-items: center;
  gap: 8px;
  color: #2f4658;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.company-cycle-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.company-cycle-user {
  left: 50%;
  top: 50%;
  width: 118px;
  height: 118px;
  border: 3px solid #c7efd5;
  border-radius: 50%;
  background: #fff;
  color: #2fad63;
  transform: translate(-50%, -50%);
}

.company-cycle-user strong {
  font-size: 13px;
}

.company-cycle-business,
.company-cycle-product,
.company-cycle-society {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #d9f4e3 inset;
}

.company-cycle-business {
  left: 8px;
  top: 14px;
}

.company-cycle-product {
  right: 4px;
  top: 14px;
}

.company-cycle-society {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

.company-safety {
  margin-top: 36px;
  margin-bottom: 42px;
}

.company-safety ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.company-safety li {
  min-height: 156px;
  padding: 26px 20px 22px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.company-safety img {
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
    margin-left: auto;
    margin-right: auto;
  object-fit: contain;
}

.company-safety h3 {
  margin: 0 0 10px;
  color: #2fad63;
  font-size: 16px;
}

.company-safety p {
  margin: 0;
  color: #405466;
  font-size: 13px;
  line-height: 1.75;
}

.company-page .information-footer {
  margin-top: 0;
}

@media (max-width: 980px) {
  .company-message-inner {
    grid-template-columns: 1fr;
  }

  .company-cycle {
    max-width: 380px;
    margin: 0 auto;
    width: 100%;
  }

  .company-safety ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .company-page .company-hero {
    min-height: 300px;
    padding: 34px 0;
    background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .94) 10%, rgba(255, 255, 255, .35) 100%), url(../img/mainvisual.png) 62% center / cover no-repeat;

  }

  .company-page .company-hero h1 {
    font-size: 32px;
  }

  .company-page .company-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .company-outline {
    margin-top: 34px;
  }

  .company-outline table,
  .company-outline tbody,
  .company-outline tr,
  .company-outline th,
  .company-outline td {
    display: block;
    width: 100%;
  }

  .company-outline th {
    padding: 14px 18px 8px;
    border-top: 1px solid #dfe7ee;
  }

  .company-outline td {
    padding: 8px 18px 18px;
    border-top: 0;
  }

  .company-message {
    padding: 30px 18px 34px;
  }

  .company-cycle {
    min-height: 300px;
  }

  .company-cycle-business {
    left: 0;
  }

  .company-cycle-product {
    right: 0;
  }

  .company-safety ul {
    grid-template-columns: 1fr;
  }
}

/* Outline page */
.outline-page {
  background: #fff;
}

.outline-page .container {
  max-width: 1180px;
}

.outline-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.outline-page .outline-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.58) 53%, rgba(255,255,255,0) 74%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.outline-page .outline-hero h1 {
  max-width: 620px;
  margin-bottom: 24px;
  font-size: 38px;
  letter-spacing: 0;
}

.outline-page .outline-hero p {
  max-width: 640px;
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.outline-table-section {
  margin: 46px 0 24px;
}

.outline-table {
  width: 100%;
  overflow: hidden;
  border: 1px solid #dfe7ee;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 8px;
  background: #fff;
}

.outline-table th,
.outline-table td {
  padding: 22px 32px;
  border-top: 1px solid #dfe7ee;
  color: #12304a;
  font-size: 15px;
  line-height: 1.9;
  text-align: left;
  vertical-align: middle;
}

.outline-table tr:first-child th,
.outline-table tr:first-child td {
  border-top: 0;
}

.outline-table th {
  width: 335px;
  background: #f8fafc;
  font-weight: 800;
}

.outline-table a {
  color: #24aa5f;
  font-weight: 800;
  text-decoration: none;
}

.outline-table a::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  border: 1px solid currentColor;
  border-radius: 2px;
  vertical-align: -1px;
}

.outline-contact-cta {
  display: grid;
  grid-template-columns: 132px 1fr auto;
  gap: 28px;
  align-items: center;
  min-height: 96px;
  margin: 0 0 38px;
  padding: 18px 38px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f2fbf5 0%, #fff 52%, #f1f9f4 100%);
}

.outline-contact-cta > div {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border: 1px solid #2fad63;
  border-radius: 50%;
  background: #fff;
}

.outline-contact-cta img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.outline-contact-cta p {
  margin: 0;
  color: #12304a;
  font-size: 16px;
  font-weight: 800;
}

.outline-contact-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  background: linear-gradient(90deg, #25aeb8 0%, #55b33c 100%);
  color: #fff;
  font-weight: 900;
  text-decoration: none;
}

.outline-contact-cta a::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.outline-page .information-footer {
  margin-top: 0;
}

@media (max-width: 780px) {
  .outline-contact-cta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .outline-table,
  .outline-table tbody,
  .outline-table tr,
  .outline-table th,
  .outline-table td {
    display: block;
    width: 100%;
  }

  .outline-table th {
    padding: 14px 18px 8px;
    border-top: 1px solid #dfe7ee;
  }

  .outline-table td {
    padding: 8px 18px 18px;
    border-top: 0;
  }
}

@media (max-width: 560px) {
  .outline-page .outline-hero {


        background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .34) 68%, rgba(255, 255, 255, .05) 100%), url(../img/mainvisual.png) center 38% / cover no-repeat;
  }

  .outline-page .outline-hero h1 {
    font-size: 30px;
  }

  .outline-page .outline-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .outline-table-section {
    margin-top: 32px;
  }

  .outline-contact-cta {
    padding: 24px 18px;
  }

  .outline-contact-cta a {
    width: 100%;
    min-width: 0;
  }
}

/* Privacy policy page */
.privacy-page {
  background: #fff;
}

.privacy-page .container {
  max-width: 1180px;
}

.privacy-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.privacy-page .privacy-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.58) 55%, rgba(255,255,255,0) 76%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.privacy-page .privacy-hero h1 {
  max-width: 640px;
  margin-bottom: 24px;
  font-size: 40px;
  letter-spacing: 0;
}

.privacy-page .privacy-hero p {
  max-width: 670px;
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.privacy-updated {
  max-width: 900px;
  margin: 30px auto 20px;
  color: #68798a;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.privacy-content-card {
  max-width: 900px;
  margin: 0 auto 42px;
  padding: 28px 34px 26px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
}

.privacy-content-card section + section {
  margin-top: 30px;
}

.privacy-content-card h2 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 18px;
  color: #12304a;
  font-size: 20px;
  line-height: 1.55;
}

.privacy-content-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: #2fad63;
}

.privacy-content-card p {
  margin: 0;
  color: #2f4050;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.9;
}

.privacy-content-card .privacy-dot::before {
  content: "・";
}

.privacy-contact-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 26px;
  padding: 20px 26px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f2fbf5 0%, #fff 100%);
}

.privacy-contact-inline p {
  color: #23a95e;
  font-weight: 800;
}

.privacy-contact-inline a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 250px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid #2fad63;
  border-radius: 999px;
  color: #2fad63;
  font-weight: 900;
  text-decoration: none;
}

.privacy-contact-inline a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 16px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.privacy-page .information-footer {
  margin-top: 0;
}

@media (max-width: 780px) {
  .privacy-updated,
  .privacy-content-card {
    max-width: none;
  }

  .privacy-contact-inline {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .privacy-page .privacy-hero {
    min-height: 330px;
    padding: 34px 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.35) 100%),
      url("../img/mainvisual.png") 62% center / cover no-repeat;
  }

  .privacy-page .privacy-hero h1 {
    font-size: 31px;
  }

  .privacy-page .privacy-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .privacy-updated {
    margin-top: 24px;
    text-align: left;
  }

  .privacy-content-card {
    padding: 24px 18px;
  }

  .privacy-content-card h2 {
    font-size: 18px;
  }

  .privacy-contact-inline {
    padding: 20px 16px;
  }

  .privacy-contact-inline a {
    width: 100%;
    min-width: 0;
  }
}

/* Rule page */
.rule-page {
  background: #fff;
}

.rule-page .container {
  max-width: 1180px;
}

.rule-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.rule-page .rule-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 38%, rgba(255,255,255,.58) 55%, rgba(255,255,255,0) 76%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.rule-page .rule-hero h1 {
  margin-bottom: 24px;
  color: #12304a;
  font-size: 42px;
  letter-spacing: 0;
}

.rule-page .rule-hero p {
  max-width: 650px;
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.rule-updated {
  max-width: 900px;
  margin: 30px auto 20px;
  color: #68798a;
  font-size: 14px;
  font-weight: 700;
  text-align: right;
}

.rule-content-card {
  max-width: 900px;
  margin: 0 auto 24px;
  padding: 28px 34px 26px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
}

.rule-content-card section + section {
  margin-top: 30px;
}

.rule-content-card h2 {
  position: relative;
  margin: 0 0 12px;
  padding-left: 18px;
  color: #12304a;
  font-size: 20px;
  line-height: 1.55;
}

.rule-content-card h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 4px;
  height: 22px;
  border-radius: 999px;
  background: #2fad63;
}

.rule-content-card ol {
  margin: 0;
  padding-left: 20px;
  color: #2f4050;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.95;
}

.rule-content-card li + li {
  margin-top: 6px;
}

.rule-pdf-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 30px;
  padding: 20px 26px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f2fbf5 0%, #fff 100%);
}

.rule-pdf-inline p {
  margin: 0;
  color: #23a95e;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.8;
}

.rule-pdf-inline span {
  color: #405466;
  font-weight: 500;
}

.rule-pdf-inline a,
.rule-agree a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 900;
  text-decoration: none;
}

.rule-pdf-inline a {
  min-width: 230px;
  padding: 0 24px;
  border: 1px solid #2fad63;
  color: #2fad63;
}

.rule-pdf-inline a::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-left: 14px;
  border-bottom: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-2px);
}

.rule-agree {
  max-width: 900px;
  margin: 0 auto 42px;
  text-align: center;
}

.rule-agree h2 {
  margin: 0 0 8px;
  color: #12304a;
  font-size: 22px;
}

.rule-agree p {
  margin: 0 0 18px;
  color: #647484;
  font-size: 14px;
}

.rule-agree a {
  min-width: 360px;
  padding: 0 34px;
  background: linear-gradient(90deg, #22a8b8 0%, #55b33c 100%);
  color: #fff;
}

.rule-agree a::after {
  content: "";
  width: 9px;
  height: 9px;
  margin-left: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.rule-page .information-footer {
  margin-top: 0;
}

@media (max-width: 780px) {
  .rule-updated,
  .rule-content-card,
  .rule-agree {
    max-width: none;
  }

  .rule-pdf-inline {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

@media (max-width: 560px) {
  .rule-page .rule-hero {
    min-height: 300px;
    padding: 34px 0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 55%, rgba(255,255,255,.35) 100%),
      url("../img/mainvisual.png") 62% center / cover no-repeat;
  }

  .rule-page .rule-hero h1 {
    font-size: 32px;
  }

  .rule-page .rule-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .rule-updated {
    margin-top: 24px;
    text-align: left;
  }

  .rule-content-card {
    padding: 24px 18px;
  }

  .rule-content-card h2 {
    font-size: 18px;
  }

  .rule-pdf-inline {
    padding: 20px 16px;
  }

  .rule-pdf-inline a,
  .rule-agree a {
    width: 100%;
    min-width: 0;
  }
}

/* Login page */
.login-page {
  background: #fff;
}

.login-page .container {
  max-width: 1180px;
}

.login-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.login-page .header-actions .outline-btn.is-current {
  border-color: #12b98a;
  color: #12b98a;
}

.login-page .login-hero {
  min-height: 278px;
  padding: 52px 0 40px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.5) 56%, rgba(255,255,255,0) 77%),
    url("../img/loginimg.jpg") center right / 760px auto no-repeat;
  box-shadow: none;
}

.login-page .login-hero h1 {
  margin-bottom: 24px;
  color: #12304a;
  font-size: 42px;
  letter-spacing: 0;
}

.login-page .login-hero p {
  max-width: 620px;
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.login-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  margin-top: 46px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
}

.login-form-area {
  padding: 44px 54px 46px;
}

.login-benefits {
  padding: 44px 42px 46px;
  border-left: 1px solid #dfe7ee;
}

.login-form-area h2,
.login-benefits > h2 {
  position: relative;
  margin: 0 0 36px;
  color: #12304a;
  font-size: 21px;
  text-align: center;
}

.login-form-area h2::after,
.login-benefits > h2::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 34px;
  height: 3px;
  border-radius: 999px;
  background: #2fad63;
  transform: translateX(-50%);
}

.login-page-form {
  display: grid;
}

.login-page-form > label,
.login-other-title {
  margin: 0 0 12px;
  color: #12304a;
  font-size: 15px;
  font-weight: 800;
}

.login-input {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 28px;
}

.login-input > img {
  position: absolute;
  left: 16px;
  width: 18px;
  height: 18px;
  object-fit: contain;
  opacity: .66;
}

.login-input input {
  width: 100%;
  min-height: 58px;
  padding: 0 48px;
  border: 1px solid #d9e3ec;
  border-radius: 4px;
  color: #12304a;
  font: inherit;
}

.login-input button {
  position: absolute;
  right: 14px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.login-input button::before {
  content: "";
  position: absolute;
  inset: 4px 2px;
  border: 2px solid #617184;
  border-radius: 50% / 60%;
}

.login-input button::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #617184;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -8px 0 30px;
}

.login-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #12304a;
  font-size: 15px;
  font-weight: 700;
}

.login-options input {
  width: 20px;
  height: 20px;
  accent-color: #2fad63;
}

.login-options a {
  color: #2fad63;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.login-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #21a95e 0%, #30b755 100%);
  color: #fff;
  font: inherit;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
}

.login-submit img {
  width: 18px;
  height: 18px;
  margin-right: 16px;
  filter: brightness(0) invert(1);
}

.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 22px;
  align-items: center;
  margin: 28px 0;
  color: #12304a;
  font-weight: 800;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  background: #dfe7ee;
}

.login-line-button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border: 1px solid #2fad63;
  border-radius: 4px;
  color: #2fad63;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;
}

.login-line-button img {
  width: 26px;
  height: 26px;
  margin-right: 14px;
}

.login-register-box,
.login-help-card {
  margin-top: 42px;
  padding: 28px 26px;
  border: 1px solid #dfe7ee;
  border-radius: 8px;
  background: #fff;
}

.login-register-box h3,
.login-help-card h3 {
  margin: 0 0 16px;
  color: #12304a;
  font-size: 18px;
}

.login-register-box p,
.login-help-card p {
  margin: 0 0 20px;
  color: #405466;
  font-size: 15px;
  line-height: 1.9;
}

.login-register-box a,
.login-help-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid #2fad63;
  border-radius: 999px;
  color: #2fad63;
  font-weight: 900;
  text-decoration: none;
}

.login-register-box img {
  width: 20px;
  height: 20px;
  margin-right: 16px;
}

.login-help-card a::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 18px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

.login-benefits ul {
  display: grid;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.login-benefits li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 22px;
  align-items: start;
}

.login-benefits li > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #eff8f2;
}

.login-benefits li img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.login-benefits h3 {
  margin: 0 0 8px;
  color: #12304a;
  font-size: 17px;
}

.login-benefits p {
  margin: 0;
  color: #405466;
  font-size: 15px;
  line-height: 1.8;
}

.login-security {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
  margin: 32px 0 42px;
  padding: 28px 42px;
  border-radius: 8px;
  background: linear-gradient(105deg, #f2fbf5 0%, #fff 52%, #f1f9f4 100%);
}

.login-security-main,
.login-pmark {
  display: flex;
  align-items: center;
  gap: 24px;
}

.login-security-main > span {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 1px solid #2fad63;
  border-radius: 50%;
  background: #fff;
}

.login-security-main img {
  width: 42px;
  height: 42px;
}

.login-security h2 {
  margin: 0 0 10px;
  color: #2fad63;
  font-size: 18px;
}

.login-security p,
.login-pmark p {
  margin: 0;
  color: #405466;
  font-size: 14px;
  line-height: 1.8;
}

.login-pmark img {
  width: 82px;
  height: auto;
}

.login-page .information-footer {
  margin-top: 0;
}

@media (max-width: 980px) {
  .login-panel {
    grid-template-columns: 1fr;
  }

  .login-benefits {
    border-top: 1px solid #dfe7ee;
    border-left: 0;
  }

  .login-security {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .login-page .login-hero {
    min-height: 300px;
    padding: 34px 0;

        background: linear-gradient(0deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .95) 34%, rgba(255, 255, 255, .34) 68%, rgba(255, 255, 255, .05) 100%), url(../img/mainvisual.png) center 38% / cover no-repeat;  }

  .login-page .login-hero h1 {
    font-size: 32px;
  }

  .login-page .login-hero p {
    font-size: 15px;
    line-height: 1.9;
  }

  .login-panel {
    margin-top: 28px;
  }

  .login-form-area,
  .login-benefits {
    padding: 30px 18px;
  }

  .login-options {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-benefits li {
    grid-template-columns: 58px 1fr;
    gap: 14px;
  }

  .login-benefits li > span {
    width: 52px;
    height: 52px;
  }

  .login-security,
  .login-security-main,
  .login-pmark {
    align-items: flex-start;
    flex-direction: column;
  }

  .login-security {
    padding: 26px 18px;
  }
}

/* Contact response icon fix */
.contact-response-card li {
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.contact-response-card li::before,
.contact-response-card li::after {
  content: none;
}

.contact-response-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #eaf8ef;
}

.contact-response-icon img {
  box-sizing: border-box;
  display: block;
  width: 29px;
  height: 29px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(39%) sepia(89%) saturate(538%) hue-rotate(91deg) brightness(86%) contrast(91%);
}

.contact-response-card li > span {
  display: block;
  min-width: 0;
}

.contact-faq-card a::after,
.contact-faq-more::after {
  position: static;
  top: auto;
  right: auto;
  left: auto;
  display: inline-block;
  flex: 0 0 auto;
  transform: rotate(45deg);
}

@media (max-width: 560px) {
  .contact-response-card li {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
  }

  .contact-response-icon {
    width: 44px;
    height: 44px;
  }

  .contact-response-icon img {
    width: 28px;
    height: 28px;
  }
}

/* Before pages contact-aligned header blocks */
:is(.survey-page, .monitor-page, .ranking-page, .information-page, .info-detail-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .container {
  max-width: 1180px;
}

:is(.survey-page, .monitor-page, .ranking-page, .information-page, .info-detail-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

:is(.survey-page, .monitor-page, .ranking-page, .information-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-hero {
  min-height: 278px;
  padding: 52px 20px 40px;
  border-radius: 0;
  box-shadow: none;
}

:is(.survey-page, .monitor-page, .ranking-page, .information-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-hero h1 {
  margin-bottom: 24px;
  color: #12304a;
  font-size: 42px;
  letter-spacing: 0;
}

:is(.survey-page, .monitor-page, .ranking-page, .information-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-hero p {
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

@media (max-width: 768px) {
  :is(.survey-page, .monitor-page, .ranking-page, .information-page, .info-detail-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-breadcrumb {
    margin-top: 14px;
  }

  :is(.survey-page, .monitor-page, .ranking-page, .information-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-hero {
    min-height: 300px;
    padding: 34px 20px;
  }

  :is(.survey-page, .monitor-page, .ranking-page, .information-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-hero h1 {
    font-size: 32px;
  }

  :is(.survey-page, .monitor-page, .ranking-page, .information-page, .firsttime-page, .faq-page, .contact-page, .company-page, .outline-page, .privacy-page, .rule-page, .login-page) .survey-hero p {
    font-size: 15px;
    line-height: 1.9;
  }
}

/* 404 error page */
.error-page .container {
  max-width: 1180px;
}

.error-page .survey-breadcrumb {
  margin-top: 22px;
  margin-bottom: 16px;
}

.error-hero {
  min-height: 360px;
  padding: 58px 20px 50px;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,.96) 36%, rgba(255,255,255,.58) 53%, rgba(255,255,255,0) 74%),
    url("../img/mainvisual.png") center right / 760px auto no-repeat;
  box-shadow: none;
}

.error-code {
  margin: 0 0 8px;
  color: #2bb86f;
  font-size: 72px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}

.error-hero h1 {
  margin: 0 0 22px;
  color: #12304a;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.35;
  letter-spacing: 0;
}

.error-hero p:not(.error-code) {
  margin: 0;
  max-width: 620px;
  color: #12304a;
  font-size: 17px;
  font-weight: 500;
  line-height: 2.05;
}

.error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 30px;
}

.error-actions a {
  display: inline-flex;
  min-width: 220px;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 900;
}

.error-primary {
  background: linear-gradient(90deg, #24a9b6, #5bb33e);
  color: #fff;
}

.error-secondary {
  border: 1px solid #2fb563;
  background: #fff;
  color: #229653;
}

.error-guide {
  margin: 48px 0 70px;
  padding: 34px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 45, 60, .05);
}

.error-guide-heading {
  text-align: center;
}

.error-guide-heading span {
  display: inline-block;
  margin-bottom: 8px;
  color: #2fb563;
  font-size: 13px;
  font-weight: 900;
}

.error-guide-heading h2 {
  margin: 0 0 12px;
  color: #12304a;
  font-size: 26px;
  font-weight: 900;
}

.error-guide-heading p {
  margin: 0;
  color: #52616c;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.9;
}

.error-guide-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 28px;
}

.error-guide-grid a {
  display: grid;
  gap: 10px;
  min-height: 176px;
  align-content: start;
  padding: 24px 20px;
  border: 1px solid #e1e7eb;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #fbfdfc);
  color: #12304a;
  text-align: center;
}

.error-guide-grid img {
  width: 42px;
  height: 42px;
  margin: 0 auto 4px;
  object-fit: contain;
}

.error-guide-grid strong {
  font-size: 16px;
  font-weight: 900;
}

.error-guide-grid span {
  color: #52616c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

@media (max-width: 900px) {
  .error-guide-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .error-page .survey-breadcrumb {
    margin-top: 14px;
  }

  .error-hero {
    min-height: 360px;
    padding: 38px 20px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.94) 58%, rgba(255,255,255,.35) 100%),
      url("../img/mainvisual.png") 62% center / cover no-repeat;
  }

  .error-code {
    font-size: 58px;
  }

  .error-hero h1 {
    font-size: 30px;
  }

  .error-hero p:not(.error-code) {
    font-size: 15px;
    line-height: 1.9;
  }

  .error-actions a {
    width: 100%;
    min-width: 0;
  }

  .error-guide {
    margin: 34px 0 48px;
    padding: 24px 18px;
  }

  .error-guide-heading h2 {
    font-size: 22px;
  }
}

@media (max-width: 560px) {
  .error-guide-grid {
    grid-template-columns: 1fr;
  }
}