@charset "UTF-8";

[src*="isolation.png"] {
  max-width: 800px;
}

.download {
  margin-top: 1.75em;
  padding: var(--margin-l);
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--color-border);
  display: block;
}

.download:focus,
.download:hover {
  opacity: 1;
}

.download:hover .btn {
  color: rgb(var(--color-secondary));
  border-color: rgb(var(--color-primary-dark));
  background-color: rgb(var(--color-primary-dark));
}

.download img {
  max-width: 460px;
}

.download.horizontal {
  display: flex;
  align-items: stretch;
  padding: 0;
}
.download.horizontal picture {
  display: grid;
  place-content: center;
  place-items: center;
  width: 70%;
  padding: var(--margin-l);
}
.download.horizontal .side {
  display: grid;
  place-content: center;
  place-items: center;
  background-color: rgba(var(--color-primary-light), .4);
  padding: var(--margin);
}

@media (max-width: 768px) {
  .download.horizontal {
    flex-direction: column;
  }
  .download.horizontal picture {
    width: 100%;
  }
  .download.horizontal .side {
    width: 100%;
  }
}

.kakomi > * {
  margin-top: 0;
}

.list.type-num > li:before {
  content: counter(count)'.';
}

.list.type-num > li + li {
  margin-top: .25em;
}


/*===============================================================

	color-palette

===============================================================*/

.color-palette {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--margin-s) var(--margin);
}

.color-palette > *,
.color-palette .color-info > *{
  margin: 0;
}

.color-palette .color-tip {
  width: 140px;
  height: 140px;
}

.color-palette .color-tip.type-light {
  border: 1px solid var(--color-border);
}

.color-palette .heading {
  margin-bottom: .5em;
}

.color-palette .heading:after {
  content: attr(data-ruby);
  font-size: var(--font-caption);
  color: var(--color-text-gray);
  font-weight: 400;
  display: block;
}


/*===============================================================

  navigation

===============================================================*/

.nav-anchor ul {
  margin-top: var(--margin);
  display: flex;
  flex-wrap: wrap;
  gap: .5em 2em;
}


/*===============================================================

  thumbnails

===============================================================*/

.thumb-irregular picture img {
  background-color: rgb(var(--color-primary-light));
  height: 220px;
  object-fit: contain;
}