:root {
  /* フォントサイズ */
  --fnt-l   : 2rem;
  --fnt-ls  : 1.75rem;
  --fnt-mm  : 1.6rem;
  --fnt-m   : 1.5rem;
  --fnt-msl : 1.35rem;
  --fnt-ms  : 1.25rem;
  --fnt-ns  : 1.1rem;
  --fnt-n   : 1rem;
  --fnt-sl  : .875rem;
  --fnt-sm  : .8rem;
  --fnt-s   : .75rem;

  /* フォントウェイト */
  --w-r: 400;
  --w-m: 500;
  --w-b: 600;
  --w-xb: 700;

  /* カラー */
  --clr-main       : #00A199;
  --clr-main-lt    : #98D8D4;
  --clr-bg         : #D8EEF8;
  --clr-black      : #123536;
  --clr-grey-lt    : #ada8a6;

  --clr-strong     : #17489c;
  --clr-caution    : #EB718D;

  /* 行間 */
  --lh-d:  1;
  --lh-ss: 1.1;
  --lh-s:  1.2;
  --lh-ms: 1.3;
  --lh-mn: 1.4;
  --lh-m:  1.6;
  --lh-ml:  1.8;

  /* 間隔 */
  --mg-1: 1rem;
  --mgx2: 2rem;
  --mgx3: 3rem;
}

 /* acm reset */
.entry-style [class*=column-media] {
  padding-inline: 0;
}
.entry-style h1,
.entry-style .entry-text-unit.is-p p,
.entry-style .entry-text-unit h2 {
  font-size: initial;
  line-height: initial;
  margin: initial;
  padding-inline: initial;
}
.acms-container {
  padding: 0 !important;
  overflow: hidden;
  max-width: 100%;
}
.acms-container div[class*="acms"] {
  max-width: 980px;
  margin: auto;
}
.entry-style .entry-text-unit ul li::before {
  content: none;
}
.entry-style .entry-text-unit ul {
  margin: auto;
  padding-left: 1rem;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  word-wrap: break-word;
  color: var(--clr-black);
  line-height: var(--lh-d);
  scroll-behavior: smooth;
  margin-inline: auto;
	line-height: var(--lh-d);
  background: var(--clr-bg) url("/kouza/themes/kouza2025/images/bgr-main.jpg");
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
#lightcase-content {
  font-family: 'Noto Sans JP', sans-serif;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
button{
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}
header,
footer,
article,
aside {
  margin: 0 auto;
  box-sizing: border-box;
}
.large {
  font-size: var(--fnt-l);
}
.middle {
  font-size: var(--fnt-ms);
}
.small {
  font-size: var(--fnt-sl);
}
.normal {
  font-size: var(--fnt-ns);
}

:where(.entry-style, aside) ol li {
  list-style: decimal;
  background: none;
  padding-left: 1rem;
}
ol {
  padding-left: 2rem
}
.entry-text-highlight {
  font-style: normal;
  font-weight: var(--w-b);
  background: linear-gradient(transparent 60%, #fff062 60%);
}
.entry-txt-red {
  color: var(--clr-caution);
  font-weight: var(--w-b);
}
strong, em {
  font-style: normal;
  font-weight: var(--w-b);
}
.entry-style .entry-text-unit em {
  color: var(--clr-black);
  background: none;
  border: none;
}
a {
  text-decoration: none;
  color: var(--clr-black);
}
/* header common */
.header-common .container {
  display: grid;
  grid-template-areas: 
    "title"
    "theme"
    "summary";
  grid-template-rows: auto;
  grid-template-columns: auto;
  grid-gap: 1.5rem;
  align-items: center;
  margin-inline: auto;
  padding: 2rem;
}
.header-title {
  grid-area: title;
  display: block;
}
  .header-title h1 {
    margin-left: -.5rem;
    margin-bottom: 1rem;
  }
  .header-title h1 a {
    display: block;
    background: url("/kouza/themes/kouza2025/images/logo-kouza2025-sp.png") no-repeat left center;
    background-size: contain;
    color: transparent;
    width: 100%;
    height: 120px;
  }
  .header-common nav {
    display: flex;
    gap: 1rem;
    align-items: center;
    font-size: var(--fnt-sl);
    font-weight: var(--w-b);
  }
.header-theme {
  grid-area: theme;
  font-weight: var(--w-m);
  line-height: var(--lh-mn);
  color: var(--clr-caution);
  gap: var(--mg-1);
  display: flex;
  align-items: center;
}
  .header-theme h2 {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    grid-gap: 2rem;
    font-size: 1.5rem;
  }
  .header-theme .hd-theme {
    font-size: var(--fnt-n);
    border-bottom: 2px solid var(--clr-main);
    padding: .25rem 0 .65rem;
    width: fit-content;
  }
.header-summary {
  grid-area: summary;
}
  .header-summary p {
    line-height: var(--lh-m);
    margin-bottom: .75rem;
  }
  .header-summary p:last-child {
    margin-bottom: initial;
  }
/* layout */
.grid {
  margin-inline: auto;
}
.top .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-auto-rows: 1fr;
  justify-content: space-between;
  align-items: start;
  place-self: center;
  width: 100%;
  grid-gap: 5rem 2.125rem;
}
.top .grid.special {
  display: block;
  margin-bottom: 5rem;
}
main.entry {
  background: white;
  margin: 4rem auto 8rem;
  padding: 3rem 2rem;
  border-radius: 1.5rem;
  box-sizing: border-box;
}
main.main {
  margin: 4rem auto 8rem;
}
/* aside */
aside {
  margin-bottom: 5.5rem;
  padding-inline: 2.5rem;
}
aside :where(p, li) {
  font-size: var(--fnt-n);
  line-height: var(--lh-m);
}
/* footer */
.footer-common {
  background: var(--clr-main);
  font-size: var(--fnt-s);
  text-align: center;
  color: white;
  padding: 4rem .5rem;
}
.footer-common address {
  font-weight: normal;
}
/*course summary*/
.course-summary {
  position: relative;
  display: grid;
  grid-template-areas: 
  "eyecatch"
  "title"
  "lecturer"
  "cta";
  grid-gap: 1rem;
  place-content: center;
  place-self: center;
  justify-content: space-between;
  align-items: start;
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
  padding: 3rem 2.5rem;
  background: white;
}
.entry-header .course-summary {
  grid-template-areas: 
  "eyecatch"
  "title"
  "lecturer"
  "excerpt";
  grid-template-rows: min-content 1fr min-content min-content;
  grid-gap: .75rem;
  padding: initial;
}
.course-summary > *:not(.course-eyecatch) {
  padding-inline: .25rem;
}
.course-eyecatch {
  grid-area: eyecatch;
}
.course-date-title {
  grid-area: title;
}
.course-lecturer {
  grid-area: lecturer;
}
.course-cta {
  grid-area: cta;
  align-self: end;
}
.course-excerpt {
  grid-area: excerpt;
}

h2.course-title {
  font-size: var(--fnt-mm);
  font-weight: var(--w-m);
  line-height: var(--lh-mn);
}
  h2.course-title span {
    display: block;
    font-size: var(--fnt-sl);
    font-weight: var(--w-r);
  }
/*course eyecatch*/
.course-eyecatch {
  position: relative;
}
.course-eyecatch img {
  max-width: 100%;
}
.course-eyecatch .course-number {
  position: absolute;
  left: -.5rem;
  top: -.5rem;
  width: 50px;
  height: 50px;
  background: var(--clr-main);
  clip-path: circle(25px at 50% 50%);
  display: grid;
  place-content: center;
  font-size: 34px;
  font-weight: var(--w-xb);
  color: white;
}
  .course-eyecatch .course-number.special {
    left: -1.5rem;
    top: -2rem;
    width: 90px;
    height: 90px;
    background: var(--clr-caution);
    clip-path: circle(45px at 50% 50%);
    font-size: 20px;
    font-weight: var(--w-m);
    line-height: var(--lh-ms);
  }
.course-date {
  display: flex;
  gap: .5rem;
  justify-content: flex-start;
  align-items: flex-end;
  font-size: var(--fnt-ns);
  margin: .25rem auto .75rem;
}
.date * {
  line-height: var(--lh-s);
}
.date-day {
  font-size: var(--fnt-ls);
}
.date-youbi {
  font-size: var(--fnt-sl);
  color: white;
  line-height: var(--lh-d);
  display: grid;
  place-items: center;
  background: var(--clr-main);
  padding: .1rem;
}
.date-time {
  font-size: var(--fnt-ms);
}

/*course lecturer*/
.course-lecturer a,
#lightcase-content .course-lecturer {
  display: flex;
  gap: .75rem;
  align-items: center;
}
.course-lecturer figure img {
  width: 82px;
  height: 82px;
  clip-path: circle(41px at 50% 50%);
}
.lecturer-name {
  font-size: var(--fnt-ns);
  font-weight: var(--w-b);
  line-height: var(--lh-ml);
}
.lecturer-title {
  font-size: var(--fnt-sm);
  line-height: var(--lh-mn);
  display: block;
}
/*course excerpt*/
.course-excerpt {
  font-size: var(--fnt-n);
  line-height: var(--lh-ml);
  margin-top: 1rem;
}
/* entry body */

 /* custom */
.entry-style .entry-text-unit.is-p p,
.entry-style .entry_content-qa p {
  font-size: var(--fnt-n);
  line-height: var(--lh-ml);
  margin-bottom: .875rem;
}
.entry h1,
aside h2 {
  font-size: var(--fnt-ms);
  line-height: var(--lh-m);
  text-align: center;
  margin: 3.5rem auto 2rem;
  padding: .5rem .5rem;
}
aside h2 {
  background: white;
}
.entry h1.hd-digest {
  color: white;
  background: var(--clr-main);
}
.entry h1.hd-qa {
  background: var(--clr-bg);
  border-radius: 2rem;
  margin-top: 5rem;
}
.entry h1.hd-digest + h2 {
  margin-top: initial;
}
.entry .entry-text-unit h2 {
  font-size: var(--fnt-ls);
  color: var(--clr-black);
  border-bottom: 3px solid var(--clr-main);
  background: none;
  margin: 4rem auto 2rem;
  padding: .5rem 0;
}
/* entry image */
.entry .entry-body img,
aside img {
  display: block;
  max-width: 100%;
  margin: 2rem auto;
  border: 1px solid var(--clr-grey-lt);
}
/* entry qa */
p.p-qa {
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-gap: 1rem;
  place-content: center;
  margin: .5rem auto 1.5rem;
}
p.p-qa span {
  display: grid;
  place-content: center;
  place-self: center;
  font-size: .95rem;
  line-height: 1;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--clr-bg);
}
p.p-qa .hd-a {
  background: var(--clr-main-lt);
}

h1.hd_entry-lv1 {
  font-size: var(--fnt-l);
  font-weight: var(--w-b);
  line-height: var(--lh-m);
  margin-top: 0;
  text-align: center;
}
.entry-style .entry-text-unit h3,
aside h3 {
  font-size: var(--fnt-ms);
  color: var(--clr-main);
  border-top: 1px solid var(--clr-main);
  border-bottom: 1px solid var(--clr-main);
  margin: 4rem auto 1.5rem;
  padding: .875rem 0;
}
aside h3 {
  text-align: center;
}
.entry-style .entry-text-unit h4 {
  font-size: var(--fnt-ns);
  line-height: var(--lh-d);
  text-align: center;
  margin: 4rem auto 2rem;
  padding: 1rem;
  background-color: var(--clr-bg);
}

.course h2,
.summary-modal h2 {
  font-size: var(--fnt-ms);
  font-weight: var(--w-b);
  line-height: var(--lh-s);
  margin: 0 auto 1rem;
}
.course h2 span,
.summary-modal h2 span {
  font-size: var(--fnt-n);
  font-weight: normal;
  display: block;
  margin-top: .25rem;
}

/*course call to action*/
.course-cta {
  display: grid;
  grid-template-areas: 
  "bt-excerpt"
  "bt-apply"
  ;
  grid-template-columns: 90%;
  grid-template-rows: min-content;
  grid-gap: 1rem;
  justify-content: center;
  width: 100%;
  margin-top: 2rem;
}
/* button */
a.btn-utility,
button a {
  display: grid;
  place-items: center;
  color: var(--clr-main);
}
button a {
  display: flex;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  border-radius: 2rem;
  line-height: var(--lh-d);
  box-sizing: border-box;
}
a.btn-utility {
  grid-template-columns: 1.75rem 1fr;
  justify-content: start;
  font-size: 1.1rem;
}
a.btn-utility::before {
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  content: "";
  width: 1.25rem;
  height: 1.25rem;
}
.course-cta button a {
  justify-content: center;
  font-size: var(--fnt-ms);
  font-weight: var(--w-b);
  line-height: 1;
  padding: .875rem;
}

.btn.course-outline a {
  border: var(--clr-caution) 1px solid;
  color: var(--clr-caution);
}
.btn a.apply {
  background: var(--clr-caution);
  color: white;
  border: none;
}
.course-cta .btn a.end {
  border: var(--clr-main) 1px solid;
  color: var(--clr-main);
  background-image: none;
}
.course-cta .btn a.digest {
  background: var(--clr-bg);
}
/* svg */
.serial-nav-arrow svg {
  width: 2rem;
  height: 2rem;
  padding: .5rem;
  background: none;
  border-radius: 0;
}
a.btn-utility.apply::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.5 0c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5zm0 20c-5.24 0-9.5-4.26-9.5-9.5s4.26-9.5 9.5-9.5 9.5 4.26 9.5 9.5-4.26 9.5-9.5 9.5zm4.52-16.08h-9.04c-.28 0-.5.22-.5.5v12.15c0 .28.22.5.5.5h9.04c.28 0 .5-.22.5-.5v-12.15c0-.28-.22-.5-.5-.5zm-.5 12.15h-8.04v-11.15h8.04zm-5.8-7.93h3.55c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-3.55c-.28 0-.5.22-.5.5s.22.5.5.5zm0 5.7h3.55c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-3.55c-.28 0-.5.22-.5.5s.22.5.5.5zm0-2.85h3.55c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-3.55c-.28 0-.5.22-.5.5s.22.5.5.5z' fill='%2300A199'/%3E%3C/svg%3E");
}
a.btn-utility.watch::before {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 21 21' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m10.5 0c-5.79 0-10.5 4.71-10.5 10.5s4.71 10.5 10.5 10.5 10.5-4.71 10.5-10.5-4.71-10.5-10.5-10.5zm0 20c-5.24 0-9.5-4.26-9.5-9.5s4.26-9.5 9.5-9.5 9.5 4.26 9.5 9.5-4.26 9.5-9.5 9.5zm3.24-10.06-4.48-2.7c-.51-.31-.92-.07-.92.52v5.48c0 .59.42.83.92.52l4.48-2.7c.51-.31.51-.81 0-1.12z' fill='%2300A199'/%3E%3C/svg%3E");
}
.course-cta .btn a {
  background-repeat: no-repeat;
  background-position: right 10% center;
}
.course-cta .btn a.summary {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6.65 6.64' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6.15 2.82h-2.32v-2.32c0-.28-.22-.5-.5-.5s-.5.22-.5.5v2.32h-2.33c-.28 0-.5.22-.5.5s.22.5.5.5h2.32v2.32c0 .28.22.5.5.5s.5-.22.5-.5v-2.32h2.32c.28 0 .5-.22.5-.5s-.22-.5-.5-.5z' fill='%23ee8269'/%3E%3C/svg%3E");
  background-size: 10px;
}
.course-cta .btn a {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 3.82 6.65' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m.5.5 2.82 2.82-2.82 2.83' fill='%23EB718D' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 7px;
}
.course-cta .btn a.digest {
  background-image: none;
}
:where(.entry-style, aside) li {
  list-style: none;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 15.87 15.87' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='7.94' cy='7.94' fill='%2300A199' r='7.94'/%3E%3C/svg%3E") no-repeat left top .55rem;
  background-size: .65rem;
  margin-bottom: .75rem;
  padding-left: 1.25rem;
}
a.entry-btn-default,
.entry-style .entry-text-unit a.entry-btn-default {
  display: inline-block;
  border-radius: 3rem;
  font-size: var(--fnt-ns);
  font-weight: var(--w-b);
  color: var(--clr-main);
  text-decoration: none;
  text-align: center;
  word-break: break-word;
  border: 2px solid var(--clr-main);
  background: white;
  margin: 2rem auto 3rem;
  padding: .5rem 1rem;
  box-sizing: border-box;
  cursor: pointer;
}
p:has(a.entry-btn-default) {
  text-align: center;
}
.btn-toc {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: .35rem;
  place-items: center;
}
.entry-style .entry-text-unit .btn-toc a.entry-btn-default {
  display: block;
  box-sizing: border-box;
  border-radius: .5rem .5rem 0 0;
  border: initial;
  border-bottom: 4px solid var(--clr-main-lt);
  border-right: 1px solid var(--clr-main-lt);
  background: var(--clr-bg);
  width: 100%;
  min-height: 3rem;
  margin: 1rem auto;
  font-size: var(--fnt-n);
}
/* serial nav */
.serial-nav,
.serial-nav-item {
  box-sizing: border-box;
  margin: auto;
  border: none;
}
.serial-nav-list {
  gap: 1rem;
}
.serial-nav-item a {
  padding: .5rem 0;
}
.serial-nav-list ul li {
  list-style: none;
}
.serial-nav-arrow {
  font-size: var(--fnt-n);
  font-weight: normal;
}

@media (min-width: 640px) {
  .header-common .container {
    grid-template-areas: 
      "title theme"
      "summary summary";
    grid-template-rows: auto auto;
    grid-template-columns: 50% 45%;
    justify-content: space-between;
    grid-gap: 2rem;
    align-items: end;
    padding: 2rem 2.5rem;
  }
  .header-theme h2 {
    grid-template-columns: 1fr;
    grid-template-rows: min-content max-content;
    grid-gap: 1rem;
    padding-top: .5rem;
    font-size: 1.875rem;
  }
  main:where(.top,.entry) {
    padding-inline: 2.5rem;
  }
  .top .grid {
    grid-gap: 5rem;
  }
  .course-summary {
    grid-template-rows: min-content min-content 1fr min-content;
    align-items: end;
    padding: .75rem .75rem 1rem;
  }
  .special .course-summary {
    grid-template-areas: 
      "eyecatch title"
      "lecturer cta";
    grid-template-columns: 304px 1fr;
    grid-template-rows: 1fr min-content;
    grid-gap: 1.5rem;
    place-self: center;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem;
  }
  h2.course-title {
    font-size: var(--fnt-ns);
  }
  .special h2.course-title {
    font-size: var(--fnt-m);
  }
  /*course eyecatch*/
  .course-eyecatch .course-number {
    left: -1rem;
    top: -1.5rem;
  }
  .course-eyecatch .course-number.special {
    left: -1rem;
    top: -1rem;
    width: 75px;
    height: 75px;
    clip-path: circle(37px at 50% 50%);
    font-size: 17px;
  }
  .date-day {
    font-size: var(--fnt-msl);
  }
  .date-youbi {
    font-size: var(--fnt-s);
  }
  .date-time {
    font-size: var(--fnt-n);
  }
  .top .special .date-day {
  font-size: var(--fnt-ls);
  }
  .top .special .date-youbi {
    font-size: var(--fnt-sl);
  }
  .top .special .date-time {
    font-size: var(--fnt-ms);
  }
  .top .special .lecturer-name {
    font-size: var(--fnt-n);
  }
  .lecturer-title {
    font-size: var(--fnt-s);
  }

  /*course call to action*/
  .course-cta {
    display: grid;
    grid-template-columns: minmax(100px, auto) 1fr;
    grid-gap: 0 .75rem;
    width: 100%;
    margin-top: initial;
  }
  .special .course-cta {
    grid-template-columns:1fr 1fr;
  }
  .course-cta button a {
    font-size: var(--fnt-s);
    padding: .5rem;
  }
  .course-cta .btn a.summary {
  background-size: 8px;
  }
  .course-cta .btn a {
    background-size: 5px;
}
}
@media (min-width: 1024px) {
  .top .grid,
  .header-common,
  .container,
  .grid.special,
  main.entry,
  aside {
    max-width: 980px;
  }
  main.entry {
    padding: 4rem 5.5rem;
  }
  .header-common .container {
    grid-template-areas: 
      "title theme"
      "title summary";
    grid-template-rows: 70px 1fr;
    grid-template-columns: 270px 1fr;
    grid-gap: 1.25rem 5rem;
    padding: 4.5rem 0 0;
  }
  .header-title h1 a {
    background: url("/kouza/themes/kouza2025/images/logo-kouza2025.png") no-repeat center;
    background-size: contain;
    width: 100%;
    height: 200px;
    margin-left: -.5rem;
  }
  .special .course-summary {
    grid-template-areas: 
      "eyecatch title lecturer"
      "eyecatch title cta";
    grid-template-columns: 304px 1fr max-content;
    grid-template-rows: 1fr min-content;
    grid-gap: 1.5rem;
    place-self: center;
    justify-content: space-between;
    align-items: center;
    padding: 1.75rem;
  }
  .entry .course-summary {
    grid-template-areas: 
      "eyecatch title"
      "eyecatch lecturer"
      "excerpt excerpt";
    grid-template-columns: 304px 1fr;
    grid-template-rows: 1fr min-content min-content ;
    grid-gap: 1rem 2rem;
    place-self: center;
    align-items: center;
    padding: initial;
  }
  .header-theme {
    font-size: 1.75rem;
    line-height: var(--lh-d);
  }
  .header-theme h2 {
    grid-template-columns: 80px 1fr;
    grid-gap: 1rem;
    padding-top: .5rem;
    font-size: 1.75rem;
  }
  .header-theme .hd-theme {
    font-size: var(--fnt-n);
  }
  .top .grid {
    grid-gap: 5rem 2.125rem;
  }
}