@charset "utf-8";

/**
 * Home
 * ---------------------------------------- */
.l-main {
  min-height: 100svh;
}
.c-visual {
  margin-inline: var(--breakout);
}
.c-visual img {
  width: 100%;
  max-height: 640px;
  object-fit: cover;
}
.home_section {
  padding: var(--sidegap);
}

/**
 * News
 * ---------------------------------------- */
.p-news .c-archives {
  margin-top: min(var(--cw) * 24 / 375, 48px);
}
.p-bloglist .c-archives,
.p-menulist .c-archives,
.p-newslist .c-archives {
  margin-block: min(var(--cw) * 24 / 375, 48px);
}

/**
 * Works
 * ---------------------------------------- */
.p-works .c-archives {
  margin-top: min(var(--cw) * 24 / 375, 48px);
}

/**
 * Company
 * ---------------------------------------- */
.p-overview {
  .c-tablelist > dt {
    max-width: 4em;
  }
  @media (min-width: 480px) {
    .c-tablelist > dd {
      padding-left: 2em;
    }
  }
}

/**
 * Component
 * ---------------------------------------- */
.c-button {
  display: block;
  position: relative;
  max-width: 320px;
  margin: 1em auto;
  padding: 1em;
  border-radius: 8px;
  color: white;
  text-align: center;
  background: var(--themecolor);
  &:has(.arr) {
    padding-right: 2em;
  }
  .arr {
    position: absolute;
    top: calc(50% - 0.5em);
    right: 1.5em;
    width: 1.5em;
    height: 1em;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  &.-skeleton {
    border: 2px solid var(--themecolor);
  }
  &.-goast {
    background: #fff1;
    backdrop-filter: blur(8px);
  }
  @media (hover) {
    cursor: pointer;
    transition: color 0.4s, background 0.4s;
    &:hover {
      color: var(--themecolor);
      background: whitesmoke;
      transition-duration: 0.2s;
    }
  }
}

/* :::::: Tag :::::: */
.c-tag {
  padding: 0.25em 0.5em;
  border-radius: 4px;
  color: var(--white);
  font-size: 0.75rem;
  line-height: 1.2;
  background: var(--themecolor);
}

/* :::::: Archives :::::: */
.c-archives {
  display: grid;
  .image img {
    border-radius: 8px;
  }
  .container {
    display: grid;
    position: relative;
    a::after {
      content: "";
      position: absolute;
      inset: 0;
    }
  }
  .image {
    order: -1;
  }
  .text {
    display: grid;
  }
  .date {
    color: gray;
    font-size: 0.75rem;
  }
  .title {
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.5;
  }
  .summary {
    font-size: 0.875rem;
    font-feature-settings: "palt" 1;
  }
  .author {
    display: flex;
    align-items: center;
    gap: 0.5em;
    font-size: 0.75rem;
    .icon {
      width: 24px;
      height: 24px;
      border-radius: 32px;
    }
  }
  .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25em;
    margin-top: 0.25em;
  }
  .price {
    color: gray;
    font-size: 0.875rem;
  }
}
.c-archives.-bar {
  .archives_item {
    border-top: 1px solid #ccc4;
    &:last-child {
      border-bottom: 1px solid #ccc4;
    }
  }
  .container {
    padding: 1em;
    gap: 0.5em min(var(--cw) * 40 / 1000, 40px);
  }
  .text {
    gap: 0.25em;
  }
  .title {
    font-size: clamp(0.875rem, var(--cw) * 14 / 480, 1rem);
    font-feature-settings: "palt" 1;
  }
  @media (min-width: 480px) {
    .container {
      grid-template-columns: auto 1fr;
      align-items: center;
      .image {
        max-width: clamp(160px, var(--cw) * 160 / 480, 200px);
      }
    }
  }
}
.c-archives.-grid {
  --col: 3;
  @media (max-width: 767.98px) {
    --col: 2;
  }
  @media (max-width: 479.98px) {
    --col: 1;
  }
  grid-template-columns: repeat(var(--col), 1fr);
  row-gap: clamp(24px, var(--cw) * 40 / 1000, 40px);
  column-gap: min(var(--cw) * 40 / 1000, 40px);
  .container {
    align-content: start;
    row-gap: 0.75em;
  }
  .text {
    row-gap: 0.25em;
    > * {
      grid-column: span 2;
    }
  }
  .author {
    grid-column: 1;
  }
  .date {
    grid-column: 2;
    justify-self: end;
  }
}

/* :::::: Syntax :::::: */
.c-syntax {
  position: relative;
  margin: 1em 0;
  font: 400 0.875rem / 2 var(--fontMono);
  pre {
    margin: 0;
    white-space: pre;
    tab-size: 2;
    &::before {
      content: "";
      pointer-events: none;
      position: absolute;
      inset: calc(1em + 1px) 0;
      background: repeating-linear-gradient(
          to bottom,
          #ccc1,
          #ccc1 calc(0.875rem * 2),
          #ccc2 calc(0.875rem * 2),
          #ccc2 calc(0.875rem * 4)
        )
        center center / 100%;
    }
  }
  pre.wrap {
    white-space: pre-wrap;
  }
  code {
    font-feature-settings: normal;
    letter-spacing: 0;
    text-wrap: wrap;
  }
  .hljs {
    padding: 1em 1.5em;
    border: 1px solid #ccc4;
    border-radius: 8px;
    background: #373039;
  }
  &::before {
    position: absolute;
    top: 0;
    right: 12px;
    padding: 0.2em 0.8em;
    border: 1px solid #ccc4;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    color: var(--white);
    font: 400 0.625rem / 1.2 var(--fontMono);
    letter-spacing: 0;
    background: var(--black);
  }
  &:has(.language-html)::before {
    content: "HTML";
  }
  &:has(.language-css)::before {
    content: "CSS";
  }
  &:has(.language-javascript)::before {
    content: "JavaScript";
  }
  &:has(.language-json)::before {
    content: "JSON";
  }
}

/**
 * Article
 * ---------------------------------------- */
.ico {
  fill: currentcolor;
}
b,
strong {
  font-weight: 600;
}
strong {
  background: linear-gradient(var(--themecolor), var(--themecolor)) left bottom /
    100% 0.3em no-repeat;
}
em {
  background: #ccc4;
}
code {
  font-family: var(--fontMono);
}
small {
  font-size: max(80%, 0.625rem);
}

/* :::::: Heading :::::: */
.c-heading {
  font-size: 1.5rem;
  line-height: 1.5;
  &.-bar,
  &.-hyphen {
    padding-left: 1em;
    text-indent: -1em;
    &::before {
      content: "";
      display: inline-block;
      margin-top: -0.15em;
      vertical-align: middle;
    }
  }
  &.-bar::before {
    height: 1em;
    margin-right: 0.7em;
    border-left: 0.3em solid var(--themecolor);
  }
  &.-hyphen::before {
    width: 0.5em;
    margin-right: 0.5em;
    border-top: 0.15em solid var(--themecolor);
  }
  small {
    font-size: max(60%, 0.625rem);
  }
}

/* :::::: Lead :::::: */
.c-lead {
  font-size: 1.0625rem;
}
.c-lead:where(:not(:first-child)) {
  margin-top: 1em;
}

/* :::::: Paragraph :::::: */
.c-paragraph {
  margin: 1em 0;
  font-size: 0.9375rem;
  text-align: justify;
  font-feature-settings: "palt" 1;
  line-break: strict;
  overflow-wrap: break-word;
  hanging-punctuation: last allow-end;
}
.c-paragraph:where(:first-of-type) {
  margin-top: 1.5em;
}

/* :::::: Image :::::: */
.c-image {
  margin: 2em 0;
  img {
    background: #fafafd;
  }
  @media (min-width: 768px) {
    img {
      border-radius: 8px;
    }
  }
  @media (max-width: 767.98px) {
    margin-inline: calc(var(--sidegap) * -1);
  }
}

/* :::::: List :::::: */
.c-list {
  list-style: none;
  font-size: 0.9375rem;
  li {
    padding-left: 1em;
    text-indent: -1em;
  }
  ::before {
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin: -0.2em 0.6em 0 0;
    border-radius: 0.4em;
    background: var(--themecolor);
    vertical-align: middle;
  }
}

/* :::::: Data list :::::: */
.c-datalist {
  margin: 2em 0;
  font-size: 0.9375rem;
  > dt {
    padding-left: 1em;
    font-weight: 700;
    text-indent: -1em;
    &::before {
      content: "";
      display: inline-block;
      width: 0.5em;
      margin: -0.15em 0.5em 0 0;
      border-top: 0.2em solid var(--themecolor);
      vertical-align: middle;
    }
    &:not(:first-child) {
      margin-top: 0.75em;
    }
  }
  > dd {
    margin-top: 0.25em;
    padding-left: 1em;
    font-size: 0.875rem;
    font-feature-settings: "palt" 1;
    line-break: strict;
    overflow-wrap: break-word;
  }
}

/* :::::: Table list :::::: */
.c-tablelist {
  display: table;
  width: 100%;
  margin: 2em 0;
  border-bottom: 3px dotted #ccc4;
  border-collapse: collapse;
  font-size: 0.9375rem;
  .row {
    display: table-row;
    border-top: 3px dotted #ccc4;
    > * {
      display: table-cell;
      padding: 1em;
    }
    > dt {
      width: min-content;
      font-weight: 600;
      white-space: nowrap;
      text-align-last: justify;
    }
    > dd {
      border-left: 3px solid transparent;
    }
  }
  ruby {
    display: inline;
  }
  :is(rt, rp) {
    display: inline;
    font-size: 80%;
  }
  .c-datalist {
    margin: 0;
  }
}
.c-tablelist {
  margin: 2em 0;
}

/* :::::: Grid list :::::: */
.c-gridlist {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: 2em 0;
  border-bottom: 3px dotted #ccc4;
  font-size: 0.9375rem;
  > * {
    padding: 1em;
    border-top: 3px dotted #ccc4;
  }
  > dt {
    grid-column: 1;
    font-weight: 600;
  }
  > dd {
    grid-column: 2;
    margin-left: 3px;
  }
}