/* Dental Hack homepage. Content styles are restricted to .dh-home.
   Theme layout styles require the page-specific dh-homepage-preview wrapper class. */

.dh-homepage-preview {
  background: #fff;
}

.dh-homepage-preview #content.l-content {
  width: min(1160px, calc(100% - 80px));
  max-width: none;
  margin: 0 auto;
  padding: 0;
}

.dh-homepage-preview #main_content.l-mainContent,
.dh-homepage-preview #main_content .l-mainContent__inner {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.dh-homepage-preview #main_content .post_content {
  margin: 0;
  padding: 0;
}

.dh-homepage-preview #main_content .c-pageTitle,
.dh-homepage-preview .p-breadcrumb {
  display: none;
}

.dh-homepage-preview .l-header {
  background: #fff;
  color: #242b36;
  box-shadow: none;
}

/* SWELL places the front-page header above the content by default. */
.dh-homepage-preview.home .l-header {
  position: relative !important;
}

.dh-homepage-preview .l-header__inner {
  width: min(1160px, calc(100% - 80px));
  max-width: none;
  min-height: 104px;
  margin-inline: auto;
  padding-inline: 0;
  border-bottom: 1px solid #d8dce5;
}

.dh-homepage-preview .c-headLogo__link {
  color: #3157b7;
}

.dh-homepage-preview .c-gnav > li > a {
  min-height: 44px;
  color: #242b36;
  font-size: 14px;
}

.dh-homepage-preview .l-footer {
  margin-top: 60px;
  background: #fff;
  color: #535d6d;
}

.dh-homepage-preview .l-footer__inner {
  width: min(1160px, calc(100% - 80px));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
  border-top: 1px solid #d8dce5;
}

.dh-home {
  --dh-home-blue: #3157b7;
  --dh-home-orange: #d46a18;
  --dh-home-pale: #eef2fb;
  --dh-home-ink: #242b36;
  --dh-home-muted: #535d6d;
  --dh-home-rule: #d8dce5;
  color: var(--dh-home-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  overflow-wrap: anywhere;
}

.dh-home,
.dh-home * {
  box-sizing: border-box;
}

.post_content .dh-home :is(h1, h2, h3, p, figure, .wp-block-group, .wp-block-buttons) {
  margin: 0;
}

.post_content .dh-home :is(h1, h2, h3) {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dh-home-ink);
  box-shadow: none;
  font-style: normal;
}

.post_content .dh-home :is(h1, h2, h3)::before,
.post_content .dh-home :is(h1, h2, h3)::after {
  content: none;
}

.dh-home a:focus-visible,
.dh-home button:focus-visible,
.dh-home input:focus-visible {
  outline: 3px solid var(--dh-home-blue);
  outline-offset: 5px;
}

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

.post_content .dh-home .introduction {
  padding-block: 54px 48px;
}

.post_content .dh-home .introduction h1 {
  font-size: clamp(30px, 3.4vw, 43px);
  line-height: 1.5;
  letter-spacing: -0.045em;
  font-weight: 750;
}

.post_content .dh-home .introduction p {
  margin-top: 17px;
  color: var(--dh-home-muted);
  font-size: 16px;
  line-height: 1.9;
}

.post_content .dh-home .section-heading {
  display: block;
  padding-block: 17px 20px;
  border-top: 2px solid var(--dh-home-ink);
}

.post_content .dh-home .section-heading > .wp-block-group__inner-container {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
}

.post_content .dh-home .section-heading h2 {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 750;
}

.post_content .dh-home .section-heading p {
  color: var(--dh-home-muted);
  font-size: 13px;
  line-height: 1.7;
}

.post_content .dh-home .dh-home-search {
  width: min(560px, 100%);
  margin: 0 0 28px;
}

.dh-home .dh-home-search .wp-block-search__label {
  display: block;
  margin: 0 0 8px;
  color: var(--dh-home-muted);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.dh-home .dh-home-search .wp-block-search__inside-wrapper {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
}

.dh-home .dh-home-search .wp-block-search__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid #a8b2c3;
  border-radius: 0;
  background: #fff;
  color: var(--dh-home-ink);
  box-shadow: none;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
}

.dh-home .dh-home-search .wp-block-search__input::placeholder {
  color: #687387;
  opacity: 1;
}

.dh-home .dh-home-search .wp-block-search__button {
  flex: 0 0 auto;
  min-width: 80px;
  min-height: 48px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--dh-home-blue);
  border-radius: 0;
  background: var(--dh-home-blue);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
}

.dh-home .dh-home-search .wp-block-search__button:hover {
  border-color: #24428e;
  background: #24428e;
}

.post_content .dh-home .p-postList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.post_content .dh-home .dh-home-posts .p-postList > .p-postList__item {
  min-width: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.dh-home .p-postList__link {
  display: block;
  color: var(--dh-home-ink);
  text-decoration: none;
}

.dh-home .p-postList__thumb {
  margin: 0;
  padding: 0;
}

.dh-home .c-postThumb {
  aspect-ratio: 3 / 2;
  height: auto;
  overflow: hidden;
  border-radius: 0;
  background: var(--dh-home-pale);
  box-shadow: none;
}

.dh-home .c-postThumb::before,
.dh-home .c-postThumb::after {
  content: none;
}

.dh-home .c-postThumb__figure {
  height: 100%;
  margin: 0;
}

.dh-home .c-postThumb__figure::before {
  content: none;
}

.dh-home .p-postList__link .c-postThumb__img,
.dh-home .p-postList__link:hover .c-postThumb__img {
  position: static;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: none;
  transition: none;
}

.post_content .dh-home .p-postList__body {
  margin: 0;
  padding: 21px 0 0;
  transition: none;
}

.dh-home .p-postList__item:hover .p-postList__body {
  opacity: 1;
}

.post_content .dh-home .p-postList__title {
  font-size: clamp(20px, 1.8vw, 22px);
  line-height: 1.6;
  letter-spacing: -0.035em;
  font-weight: 750;
}

.dh-home .p-postList__link:hover .p-postList__title {
  color: var(--dh-home-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.dh-home .p-postList__more {
  display: inline-block;
  margin-top: 16px;
  color: var(--dh-home-blue);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.8;
}

.post_content .dh-home .data-section {
  margin-top: 74px;
  padding: 33px 36px 36px;
  border-top: 2px solid var(--dh-home-blue);
  background: var(--dh-home-pale);
}

.post_content .dh-home .data-introduction {
  display: block;
}

.post_content .dh-home .data-introduction > .wp-block-group__inner-container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  width: 100%;
}

.post_content .dh-home .section-kicker {
  margin-bottom: 11px;
  color: var(--dh-home-blue);
  font-size: 12px;
  line-height: 1.7;
  font-weight: 750;
  letter-spacing: 0.08em;
}

.post_content .dh-home .data-introduction h2 {
  font-size: clamp(25px, 2.5vw, 32px);
  line-height: 1.55;
  letter-spacing: -0.045em;
  font-weight: 750;
}

.post_content .dh-home .data-description {
  color: var(--dh-home-muted);
  font-size: 14px;
  line-height: 1.9;
}

.post_content .dh-home .preview-label {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 27px 0 10px;
  color: var(--dh-home-muted);
  font-size: 12px;
  line-height: 1.8;
  font-weight: 700;
}

.dh-home .preview-label span {
  font-weight: 400;
}

.post_content .dh-home .dashboard-preview-grid {
  display: block;
}

.post_content .dh-home .dashboard-preview-grid > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.dh-home .dh-home-dashboard-frame {
  display: block;
  width: 100%;
  min-width: 0;
  height: 450px;
  border: 1px solid #cbd3e6;
  border-radius: 0;
  background: #fff;
}

.post_content .dh-home .data-source {
  margin-top: 11px;
  color: var(--dh-home-muted);
  font-size: 12px;
  line-height: 1.9;
  text-align: left;
}

.dh-home .data-source a {
  color: var(--dh-home-blue);
  text-underline-offset: 3px;
}

.post_content .dh-home .data-actions {
  margin-top: 24px;
}

.dh-home .data-actions .wp-block-button {
  max-width: 100%;
}

.dh-home .data-actions .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: 52px;
  max-width: 100%;
  padding: 12px 22px;
  border: 1px solid var(--dh-home-blue);
  border-radius: 0;
  background: var(--dh-home-blue);
  color: #fff;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-decoration: none;
  white-space: normal;
}

.dh-home .data-actions .wp-block-button__link:hover {
  border-color: #24428e;
  background: #24428e;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 959px) {
  .post_content .dh-home .p-postList {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .dh-homepage-preview #content.l-content,
  .dh-homepage-preview .l-header__inner,
  .dh-homepage-preview .l-footer__inner {
    width: calc(100% - 48px);
  }

  .dh-homepage-preview .l-header__inner {
    min-height: 88px;
  }

  .post_content .dh-home .p-postList {
    gap: 24px;
  }

  .post_content .dh-home .data-section {
    padding: 28px 24px;
  }

  .post_content .dh-home .data-introduction > .wp-block-group__inner-container {
    display: block;
  }

  .post_content .dh-home .data-description {
    margin-top: 12px;
  }
}

@media (max-width: 600px) {
  .dh-homepage-preview #content.l-content,
  .dh-homepage-preview .l-header__inner,
  .dh-homepage-preview .l-footer__inner {
    width: calc(100% - 40px);
  }

  .dh-homepage-preview .l-footer {
    margin-top: 37px;
  }

  .post_content .dh-home .introduction {
    padding-block: 35px 33px;
  }

  .post_content .dh-home .introduction h1 {
    font-size: 31px;
    line-height: 1.55;
  }

  .post_content .dh-home .introduction p {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.95;
  }

  .post_content .dh-home .section-heading {
    padding-block: 15px 17px;
  }

  .post_content .dh-home .section-heading > .wp-block-group__inner-container {
    align-items: flex-start;
    gap: 8px;
  }

  .post_content .dh-home .section-heading h2 {
    flex: 0 0 auto;
    font-size: 16px;
  }

  .post_content .dh-home .section-heading p {
    font-size: 11px;
    text-align: right;
  }

  .post_content .dh-home .p-postList {
    grid-template-columns: minmax(0, 1fr);
    gap: 35px;
  }

  .post_content .dh-home .p-postList__body {
    padding-top: 15px;
  }

  .post_content .dh-home .p-postList__title {
    font-size: 23px;
  }

  .dh-home .p-postList__more {
    margin-top: 11px;
    font-size: 12px;
  }

  .post_content .dh-home .data-section {
    margin-top: 46px;
    padding: 23px 17px 25px;
  }

  .post_content .dh-home .data-introduction h2 {
    font-size: 25px;
  }

  .post_content .dh-home .data-description {
    font-size: 13px;
  }

  .post_content .dh-home .preview-label {
    margin-top: 20px;
  }

  .post_content .dh-home .dashboard-preview-grid > .wp-block-group__inner-container {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .post_content .dh-home .data-source {
    font-size: 11px;
  }

  .dh-home .data-actions .wp-block-buttons,
  .dh-home .data-actions .wp-block-button {
    width: 100%;
  }

  .dh-home .data-actions .wp-block-button__link {
    width: 100%;
    gap: 10px;
    padding-inline: 14px;
    font-size: 12px;
  }
}