/*
Theme Name: HAKKO RONDO
Description: HAKKO RONDO WordPress theme
Version: 1.0
*/

/* ========================================
  NEWS LIST
======================================== */

@media (min-width: 768px) {
  .link[data-astro-cid-u26tarwq] {
    grid-template-columns: calc(300 * var(--fluid)) 1fr;
    align-items: stretch;
  }

  .link[data-astro-cid-u26tarwq] .image {
    width: 100%;
    height: calc(200 * var(--fluid));
    object-fit: cover;
  }
}

@media (max-width: 767px) {
  .link[data-astro-cid-u26tarwq] .image {
    width: 100%;
    aspect-ratio: 640 / 427;
    object-fit: cover;
  }
}

@media (min-width: 768px) {
  .heading[data-astro-cid-u26tarwq] h1[data-astro-cid-u26tarwq] {
    font-size: calc(48 * var(--rem));
  }
}

@media (min-width: 768px) {
  .list[data-astro-cid-u26tarwq] {
    margin-top: calc(40 * var(--fluid));
  }
}

/* ========================================
  NEWS DETAIL
======================================== */

.single-news {
  background-color: var(--background-base);
}

.single-news .body {
  padding-block: calc(112 * var(--fluid)) calc(80 * var(--fluid));
}

@media (min-width: 768px) {
  .single-news .body {
    padding-block: calc(160 * var(--fluid)) calc(120 * var(--fluid));
  }
}

.single-news .article {
  padding: calc(40 * var(--fluid)) calc(20 * var(--fluid));
  border-radius: calc(18 * var(--fluid));
  background-color: var(--color-white);
  color: var(--foreground-base);
}

@media (min-width: 768px) {
  .single-news .article {
    padding: calc(72 * var(--fluid)) calc(96 * var(--fluid));
    border-radius: var(--rounded-lg);
  }
}

.single-news .header {
  font-family: var(--font-mincho);
}

.single-news .date {
  display: block;
  font-size: calc(12 * var(--rem));
  line-height: 1;
}

.single-news .title {
  margin-top: calc(16 * var(--fluid));
  font-size: calc(30 * var(--rem));
  font-weight: var(--font-normal);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .single-news .title {
    font-size: calc(48 * var(--rem));
  }
}

.single-news .divider {
  margin-block: calc(40 * var(--fluid));
  border-top: 1px solid var(--foreground-base);
}

@media (min-width: 768px) {
  .single-news .divider {
    margin-block: calc(80 * var(--fluid));
  }
}

.single-news .editor-content {
  font-family: var(--font-mincho);
  font-size: calc(14 * var(--rem));
  line-height: 2;
}

@media (min-width: 768px) {
  .single-news .editor-content {
    font-size: calc(16 * var(--rem));
  }
}

.single-news .editor-content img {
  display: block;
  width: 100%;
  height: calc(191 * var(--fluid));
  border-radius: calc(8 * var(--fluid));
  object-fit: cover;
}

.single-news .editor-content .wp-block-image {
  margin: calc(40 * var(--fluid)) 0 0;
}

@media (min-width: 768px) {
  .single-news .editor-content img {
    width: calc(736 * var(--fluid));
    height: calc(491 * var(--fluid));
    max-width: 100%;
    margin-inline: 0;
  }

  .single-news .editor-content .wp-block-image {
    margin-top: calc(80 * var(--fluid));
  }
}

.single-news .editor-content h2 {
  margin-top: calc(40 * var(--fluid));
  font-size: calc(30 * var(--rem));
  font-weight: var(--font-normal);
  line-height: 1.2;
}

.single-news .editor-content h3 {
  margin-top: calc(40 * var(--fluid));
  font-size: calc(22 * var(--rem));
  font-weight: var(--font-normal);
  line-height: 1.2;
}

.single-news .editor-content h4 {
  margin-top: calc(40 * var(--fluid));
  font-size: calc(18 * var(--rem));
  font-weight: var(--font-normal);
  line-height: 1.2;
}

.single-news .editor-content h1,
.single-news .editor-content h5,
.single-news .editor-content h6 {
  margin-top: calc(32 * var(--fluid));
  font-size: calc(16 * var(--rem));
  font-weight: var(--font-normal);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .single-news .editor-content h2 {
    margin-top: calc(80 * var(--fluid));
    font-size: calc(32 * var(--rem));
  }

  .single-news .editor-content h3 {
    font-size: calc(24 * var(--rem));
  }

  .single-news .editor-content h4 {
    font-size: calc(20 * var(--rem));
  }

  .single-news .editor-content h1,
  .single-news .editor-content h5,
  .single-news .editor-content h6 {
    font-size: calc(16 * var(--rem));
  }
}

.single-news .editor-content p {
  margin-top: calc(24 * var(--fluid));
}

@media (min-width: 768px) {
  .single-news .editor-content p {
    margin-top: calc(32 * var(--fluid));
  }
}

.single-news .editor-content ul {
  display: grid;
  row-gap: calc(8 * var(--fluid));
  margin-top: calc(32 * var(--fluid));
  padding: 0;
  list-style: none;
}

.single-news .editor-content li {
  position: relative;
  padding-left: 1em;
}

.single-news .editor-content li::before {
  content: "";
  position: absolute;
  top: 0.9em;
  left: 0;
  width: 0.4em;
  height: 0.4em;
  border-radius: 9999px;
  background-color: var(--color-orange);
}

.single-news .button {
  width: calc(204 * var(--fluid));
  margin: calc(32 * var(--fluid)) auto 0;
}

@media (min-width: 768px) {
  .single-news .button {
    margin-top: calc(40 * var(--fluid));
  }
}