:root {
  --date-ink: #071a3f;
  --date-muted: #5c6879;
  --date-line: #dfe8eb;
  --date-bg: #f8fbfa;
  --date-green: #078f73;
  --date-green-2: #0aa984;
  --date-mint: #eafaf5;
  --date-warn: #fff5dc;
  --date-shadow: 0 18px 50px rgba(7, 26, 63, .075);
}

body.dt-page.date-ui-v1007 {
  background: var(--date-bg);
  color: var(--date-ink);
  overflow-x: clip;
}

.date-ui-v1007 .dt-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 72px;
  grid-template-columns: 1fr auto;
  gap: 18px;
  padding: 0 clamp(20px, 4vw, 46px);
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px);
}

.date-ui-v1007 .dt-brand {
  font-size: clamp(24px, 2.4vw, 34px);
}

.date-ui-v1007 .dt-brand span {
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.date-ui-v1007 .dt-header nav {
  display: none;
}

.date-ui-v1007 .dt-free {
  min-height: 42px;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(7, 143, 115, .18);
}

.date-ui-v1007 .dt-shell {
  max-width: 1460px;
  padding: 24px clamp(16px, 3vw, 38px) 0;
  width: 100%;
}

.date-ui-v1007 .dt-hero {
  grid-template-columns: minmax(300px, .68fr) minmax(0, 1.32fr);
  gap: 42px;
  align-items: start;
  min-height: 0;
}

.date-ui-v1007 .dt-kicker {
  display: inline-flex;
  margin: 24px 0 16px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #dff7ee;
  color: #08775f;
  font-size: 17px;
}

.date-ui-v1007 .dt-copy h1 {
  margin-bottom: 22px;
  font-size: clamp(42px, 4.2vw, 64px);
  line-height: 1.12;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.date-ui-v1007 .dt-lead {
  max-width: 520px;
  font-size: clamp(18px, 1.7vw, 22px);
  line-height: 1.8;
  color: #243550;
  overflow-wrap: anywhere;
}

.date-ui-v1007 .dt-benefits {
  gap: 12px;
  margin-top: 30px;
}

.date-ui-v1007 .dt-benefits article {
  min-height: 0;
  grid-template-columns: 34px minmax(0, 1fr);
  padding: 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.date-ui-v1007 .dt-benefits span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}

.date-ui-v1007 .dt-benefits span svg {
  width: 16px;
  height: 16px;
}

.date-ui-v1007 .dt-benefits b {
  font-size: 18px;
}

.date-ui-v1007 .dt-benefits small {
  grid-column: 2;
  font-size: 14px;
}

.date-ui-v1007 .dt-workbench {
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1fr);
  gap: 24px;
  padding: 34px;
  border-radius: 14px;
  border-color: #d7e6e2;
  box-shadow: var(--date-shadow);
  min-width: 0;
}

.date-ui-v1007 .dt-inputs h2,
.date-ui-v1007 .dt-results h2 {
  display: none;
}

.date-ui-v1007 .dt-tabs {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.date-ui-v1007 .dt-tabs button {
  min-height: 96px;
  border: 1px solid var(--date-line);
  border-radius: 12px;
  background: #fff;
  color: var(--date-ink);
  font-size: 18px;
  box-shadow: 0 10px 24px rgba(7, 26, 63, .035);
}

.date-ui-v1007 .dt-tabs .is-active {
  border-color: var(--date-green);
  background: linear-gradient(180deg, #f2fff8, #fff);
  color: var(--date-green);
  box-shadow: inset 0 -4px 0 var(--date-green), 0 16px 32px rgba(7, 143, 115, .09);
}

.date-ui-v1007 .dt-inputs {
  align-content: start;
  gap: 16px;
}

.date-ui-v1007 .dt-inputs label {
  gap: 9px;
  font-size: 20px;
}

.date-ui-v1007 .dt-inputs input {
  min-height: 66px;
  border-radius: 11px;
  font-size: 20px;
  font-weight: 820;
}

.date-ui-v1007 .dt-primary {
  min-height: 72px;
  margin-top: 8px;
  border-radius: 11px;
  font-size: 27px;
  box-shadow: 0 18px 32px rgba(7, 143, 115, .22);
}

.date-ui-v1007 .dt-results {
  gap: 16px;
}

.date-ui-v1007 .dt-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.date-ui-v1007 .dt-cards article {
  container-type: inline-size;
  min-width: 0;
  min-height: 150px;
  padding: 18px 14px;
  border-radius: 12px;
  box-shadow: 0 10px 26px rgba(7, 26, 63, .035);
}

.date-ui-v1007 .dt-cards b {
  font-size: clamp(30px, 30cqw, 58px);
  overflow-wrap: anywhere;
  white-space: nowrap;
}

.date-ui-v1007 .dt-cards b.is-long-value {
  font-size: clamp(28px, 24cqw, 46px);
}

.date-ui-v1007 .dt-cards b.is-date-value {
  font-size: clamp(20px, 13cqw, 28px);
}

.date-ui-v1007 .dt-cards span {
  font-size: 17px;
}

.date-ui-v1007 .dt-summary {
  border-radius: 12px;
  padding: 18px;
  background: #fbfffd;
}

.date-ui-v1007 .dt-summary h3 {
  font-size: 20px;
}

.date-ui-v1007 .dt-summary pre {
  min-height: 128px;
  border-color: #d8eee5;
  background: linear-gradient(180deg, #f2fff9, #fff);
  font-size: 16px;
}

.date-ui-v1007 .dt-summary button {
  min-height: 52px;
  min-width: 130px;
  border-color: #a9dccb;
  color: var(--date-green);
  font-size: 17px;
}

.date-ui-v1007 .dt-line {
  margin: 12px 0;
}

.date-ui-v1007 .dt-lower {
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 44px;
}

.date-ui-v1007 .dt-related,
.date-ui-v1007 .dt-guide,
.date-ui-v1007 .dt-caution,
.date-ui-v1007 .dt-examples,
.date-ui-v1007 .dt-note,
.date-ui-v1007 .dt-faq details {
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(7, 26, 63, .045);
}

.date-ui-v1007 .dt-related div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.date-ui-v1007 .dt-related a {
  min-height: 230px;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
  padding: 24px 18px;
}

.date-ui-v1007 .dt-related a .dt-mini-icon {
  grid-column: 1;
  grid-row: auto;
  width: 78px;
  height: 78px;
  border-radius: 50%;
}

.date-ui-v1007 .dt-related a b,
.date-ui-v1007 .dt-related a small {
  grid-column: 1;
}

.date-ui-v1007 .dt-related a b {
  font-size: 22px;
}

.date-ui-v1007 .dt-related a small {
  font-size: 15px;
}

.date-ui-v1007 .dt-related a i {
  display: inline-grid;
  grid-column: 1;
  grid-row: auto;
  place-items: center;
  min-width: 150px;
  min-height: 42px;
  border: 1px solid #a9dccb;
  border-radius: 8px;
  color: var(--date-green);
}

.date-ui-v1007 .dt-related a i::before {
  content: "使う";
  margin-right: 8px;
  font-style: normal;
  font-weight: 950;
}

.date-ui-v1007 .dt-guide {
  padding: 28px;
}

.date-ui-v1007 .dt-guide ol {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 0;
  list-style: none;
}

.date-ui-v1007 .dt-guide li {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--date-line);
  border-radius: 12px;
  background: #fff;
}

.date-ui-v1007 .dt-caution {
  padding: 26px;
  border-color: #f0c56a;
}

.date-ui-v1007 .dt-examples div {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.date-ui-v1007 .dt-note {
  max-width: 1180px;
  margin: 22px auto;
}

.date-ui-v1007 .dt-note p,
.date-ui-v1007 .dt-faq p {
  font-size: 17px;
  line-height: 1.85;
}

@media (max-width: 1180px) {
  .date-ui-v1007 .dt-hero,
  .date-ui-v1007 .dt-workbench {
    grid-template-columns: 1fr;
  }

  .date-ui-v1007 .dt-copy {
    max-width: 820px;
  }

  .date-ui-v1007 .dt-related div,
  .date-ui-v1007 .dt-examples div,
  .date-ui-v1007 .dt-guide ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .date-ui-v1007 .dt-header {
    position: static;
    height: auto;
    padding: 12px 14px;
  }

  .date-ui-v1007 .dt-shell {
    padding: 12px 10px 0;
  }

  .date-ui-v1007 .dt-hero,
  .date-ui-v1007 .dt-copy,
  .date-ui-v1007 .dt-workbench,
  .date-ui-v1007 .dt-lower,
  .date-ui-v1007 .dt-note,
  .date-ui-v1007 .dt-faq,
  .date-ui-v1007 .tpn-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .date-ui-v1007 .dt-copy h1 {
    font-size: 36px;
  }

  .date-ui-v1007 .dt-workbench {
    padding: 14px;
    gap: 14px;
  }

  .date-ui-v1007 .dt-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .date-ui-v1007 .dt-tabs button {
    min-height: 72px;
    font-size: 15px;
  }

  .date-ui-v1007 .dt-inputs input {
    min-height: 56px;
    font-size: 17px;
  }

  .date-ui-v1007 .dt-primary {
    min-height: 62px;
    font-size: 22px;
  }

  .date-ui-v1007 .dt-cards,
  .date-ui-v1007 .dt-related div,
  .date-ui-v1007 .dt-examples div,
  .date-ui-v1007 .dt-guide ol {
    grid-template-columns: 1fr;
  }

  .date-ui-v1007 .dt-cards article {
    min-height: 118px;
  }

  .date-ui-v1007 .dt-related a {
    min-height: 0;
  }
}