/* color theme */
/* light */
#container {
  --theme-color: mediumpurple;
  --theme-text-color: black;
  --theme-bg-color-tuple: 255, 250, 250; /* snow */
  --theme-bg-color: rgb(var(--theme-bg-color-tuple));
  --theme-accent-color: hsl(322, 100%, 28%);

  --theme-menu-color: lavender;
  --theme-menu-hover-color: lightyellow;

  --theme-link-color: royalblue;
  --theme-link-hover-color: deepskyblue;
  --theme-link-active-color: violet;

  --theme-button-color: lightcyan;
  --theme-button-active-color: lightblue;
}
/* dark */
input#toggle-color-scheme:checked ~ #container {
  --theme-color: rebeccapurple;
  --theme-text-color: #eee;
  --theme-bg-color-tuple: 34, 34, 34;
  --theme-bg-color: rgb(var(--theme-bg-color-tuple));
  --theme-accent-color: hsl(322, 75%, 70%);

  --theme-menu-color: thistle;
  --theme-menu-hover-color: beige;

  --theme-link-color: deepskyblue;
  --theme-link-hover-color: skyblue;
  --theme-link-active-color: orchid;

  --theme-button-color: darkslategray;
  --theme-button-active-color: royalblue;
}
@media (prefers-color-scheme: dark) {
  /* dark */
  input#toggle-color-scheme ~ #container {
    --theme-color: rebeccapurple;
    --theme-text-color: #eee;
    --theme-bg-color-tuple: 34, 34, 34;
    --theme-bg-color: rgb(var(--theme-bg-color-tuple));
    --theme-accent-color: hsl(322, 75%, 70%);

    --theme-menu-color: thistle;
    --theme-menu-hover-color: beige;

    --theme-link-color: deepskyblue;
    --theme-link-hover-color: skyblue;
    --theme-link-active-color: orchid;

    --theme-button-color: darkslategray;
    --theme-button-active-color: royalblue;
  }
  /* light */
  input#toggle-color-scheme:checked ~ #container {
    --theme-color: mediumpurple;
    --theme-text-color: black;
    --theme-bg-color-tuple: 255, 250, 250; /* snow */
    --theme-bg-color: rgb(var(--theme-bg-color-tuple));
    --theme-accent-color: hsl(322, 100%, 28%);

    --theme-menu-color: lavender;
    --theme-menu-hover-color: lightyellow;

    --theme-link-color: royalblue;
    --theme-link-hover-color: deepskyblue;
    --theme-link-active-color: violet;

    --theme-button-color: lightcyan;
    --theme-button-active-color: lightblue;
  }
}
@media (prefers-color-scheme: light) {
    input#toggle-color-scheme:checked ~ #container input[type="text"] {
      filter: invert(75%);
    }
}
@media (prefers-color-scheme: dark) {
  input#toggle-color-scheme:not(:checked) ~ #container input[type="text"] {
    filter: invert(75%);
  }
}
/* general */
:root {
  --theme-icon-color: hsl(322, 100%, 28%);
  --theme-font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;

  --margin-normal: 1em;
  --margin-thin: 0.5em;

  --page-width: calc(768px - var(--margin-normal));

  --font-size-small: 80%;

  --button-border-radius: 0.3em;

  --description-line-height: 2em;

  --item-title-width: 7em;
  --item-icon-inner-height: 1.6em;
  --item-icon-inner-img-height: 1.2em;
  --item-icon-outer-height: 0.4em;
  --item-inner-height: calc(var(--item-icon-inner-height) + var(--item-icon-outer-height) * 2);

  --action-icon-inner-height: 1.6em;
  --action-icon-inner-img-height: 1.2em;
  --action-icon-outer-height: 0.4em;

  --menu-inner-height: 2em;
  --menu-outer-height: 1em;
  --menu-height: calc(var(--menu-inner-height) + var(--menu-outer-height) * 2);

  --toggle-icon-inner-height: 0.8em;
  --toggle-icon-inner-img-height: 0.8em;
  --toggle-icon-outer-height: 0.2em;
  --toggle-inner-height: calc(var(--toggle-icon-inner-height) + var(--toggle-icon-outer-height) * 2);

  --more-inner-virtual-height: 2em;
  --more-outer-height: 2em;

  --license-line-height: 1.5em;
  --license-inner-height: calc(var(--license-line-height) * 2);
  --license-outer-height: 2em;
  --license-height: calc((var(--license-inner-height) + var(--license-outer-height)) * 0.8);

  --contact-property-count: 2;
}
html {
  overflow-y: scroll;
}
html, body {
  margin: 0;
  scroll-padding-top: var(--menu-height);
  font-family: var(--theme-font);
}
#container {
  color: var(--theme-text-color);
  background: var(--theme-bg-color);
}
ul {
  margin: var(--margin-normal) 0;
  padding: 0;
}
a {
  color: var(--theme-link-color);
}
a:hover {
  color: var(--theme-link-hover-color);
}
a:active {
  color: var(--theme-link-active-color);
}
h2, h3 {
  color: var(--theme-accent-color);
}
input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}
@media print {
  a:link, a:visited {
    text-decoration: none;
    color: inherit;
  }
  a[href^="http"] {
      text-decoration: underline;
  }
  a:after {
      white-space: pre-wrap;
      word-break: break-all;
      font-size: var(--font-size-small);
  }
  a[href^="http"]:after {
      content: " " attr(href) " ";
      text-decoration: none;
  }
}

/* common */
.selectable {
  border-bottom: 1px dotted;
  -moz-user-select: all;
  -webkit-user-select: text;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
  word-break: break-all;
}
.small {
  font-size: var(--font-size-small);
}
.description {
  line-height: var(--description-line-height);
  margin: var(--margin-thin) 0;
}
.multiline {
  display: flex;
  flex-direction: column;
  gap: var(--margin-thin);
  font-size: var(--font-size-small);
}
.multiple {
  display: flex;
  align-items: center;
  gap: var(--margin-thin);
  flex-wrap: wrap;
}
.description:first-child {
  margin-top: 0;
}
.description:last-child {
  margin-bottom: 0;
}
.fade {
  animation: fade 0.5s linear 1;
}
@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.license-info-container .license-info {
  margin: var(--margin-normal) var(--margin-normal) 0 var(--margin-normal);
  padding-bottom: var(--margin-normal);
  font-size: var(--font-size-small);
  text-align: center;
  line-height: var(--license-line-height);
}
@media print {
  .license-info-container {
    display: none;
  }
}

/* button */
.toggle {
  position: absolute;
  pointer-events: none;
  clip: rect(0,0,0,0);
  opacity: 0;
  appearance: none;
}
.button {
  white-space: nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  background-repeat: no-repeat;
  background-color: var(--theme-button-color);
}
.icon-button {
  background-position: center;
}
.text-button {
  font-size: var(--font-size-small);
  border-radius: var(--button-border-radius);
}
.text-button:after {
  content: attr(data-label);
}
.dummy-icon-button {
  display: none;
  background: none;
}
@media screen and (min-width: 769px) {
  .dummy-icon-button {
    display: initial;
  }
}

/* button container */
.item-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--margin-normal);
  flex-direction: row-reverse;
}
.item-action .icon-button {
  height: var(--item-icon-inner-height);
  padding: var(--item-icon-outer-height);
  background-size: auto var(--item-icon-inner-img-height);
  width: var(--item-icon-inner-height);
  border-radius: calc((var(--item-icon-inner-height) + var(--item-icon-outer-height) * 2) / 2);
}
.item-action .dummy-icon-button {
  width: var(--item-icon-inner-height);
  height: var(--item-icon-inner-height);
  padding: var(--item-icon-outer-height);
}

.action-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--margin-normal);
  margin: var(--margin-normal) 0;
}
.action-container .text-button {
  height: var(--action-icon-inner-height);
  padding: var(--action-icon-outer-height) var(--action-icon-outer-height) var(--action-icon-outer-height) calc(var(--action-icon-inner-height) + var(--action-icon-outer-height));
  background-position: var(--action-icon-outer-height) center;
  background-size: auto var(--action-icon-inner-img-height);
}
@media screen and (min-width: 769px) {
  .item-action {
    flex-direction: initial;
  }
}
@media print {
  .action-container, .item-action {
    display: none;
  }
}

/* menu */
#menu {
  --menu-item-gap: 1em;
  position: sticky;
  padding: var(--menu-outer-height) 0;
  top: 0;
  height: var(--menu-inner-height);
  line-height: var(--menu-inner-height);
  background-color: var(--theme-color);
  box-shadow: 0px 2px 4px rgba(0,0,0,0.5);
}
#menu .menu-container {
  display: flex;
  gap: var(--menu-item-gap);
  max-width: var(--page-width);
  margin: 0 auto;
  background-image: url('../favicon/32x32.png');
  background-size: auto var(--menu-inner-height);
  background-position: var(--menu-outer-height) center;
  background-repeat: no-repeat;
  padding-left: calc(var(--menu-inner-height) + var(--menu-outer-height));
  box-sizing: border-box;
}
#menu .menu-container .menu-list {
  display: flex;
  gap: var(--menu-item-gap);
  align-items: center;
  overflow: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  padding-right: var(--margin-normal);
}
#menu .menu-container .menu-list::-webkit-scrollbar {
  display: none;
}
#menu .menu-container .menu-list .menu-item {
  color: var(--theme-menu-color);
  text-decoration: none;
  white-space: nowrap;
}
#menu .menu-container .menu-list .menu-item:hover {
  color: var(--theme-menu-hover-color);
}
#menu .button-container {
  display: flex;
  align-items: end;
  margin-left: calc((var(--toggle-icon-inner-height) + var(--toggle-icon-outer-height) * 2) / -2);
  margin-bottom: calc((var(--toggle-icon-inner-height) + var(--toggle-icon-outer-height) * 2) / -2);
}
#menu .button-container .menu-button-toggle {
  height: var(--toggle-icon-inner-height);
  padding: var(--toggle-icon-outer-height);
  background-size: auto var(--toggle-icon-inner-img-height);
  width: var(--toggle-icon-inner-height);
  border-radius: calc((var(--toggle-icon-inner-height) + var(--toggle-icon-outer-height) * 2) / 2);
  background-color: var(--theme-icon-color);
}
@media (prefers-color-scheme: light) {
  #menu .button-container .menu-button-toggle {
    background-image: url('../emoji/2600.png');
  }
  input#toggle-color-scheme:checked ~ #container #menu .button-container .menu-button-toggle {
    background-image: url('../emoji/1f319.png');
  }
}
@media (prefers-color-scheme: dark) {
  #menu .button-container .menu-button-toggle {
    background-image: url('../emoji/1f319.png');
  }
  input#toggle-color-scheme:checked ~ #container #menu .button-container .menu-button-toggle {
    background-image: url('../emoji/2600.png');
  }
}
@media screen and (min-width: 481px) {
  #menu {
    --menu-item-gap: 1.5em;
  }
}
@media print {
  #menu {
    display: none;
  }
}

/* more link */
#more {
  display: none;
  position: absolute;
  bottom: var(--more-outer-height);
  left: 0;
  width: 100%;
  text-align: center;
}
#more .more-link {
  padding: 0.5em 2em;
  color: var(--theme-accent-color);
  background: var(--theme-bg-color);
  border-radius: var(--button-border-radius);
  border: solid 1px var(--theme-accent-color);
  text-decoration: none;
}
.container .tab:target ~ #more,
.container .cover:target ~ #more {
  display: none;
}
@media screen and (min-width: 769px) {
  #more {
    display: initial;
  }
}
@media print {
  #more {
    display: none;
  }
}

/* page */
.section-title {
  margin: 0;
}
.container {
  margin: 0 var(--margin-normal);
  max-width: var(--page-width);
  margin: 0 auto;
}
.container .page {
  padding-top: var(--margin-normal);
  margin: 0 var(--margin-normal);
}
.container .page:nth-last-child(3) {
  min-height: calc(100vh - var(--menu-height));
}
.container .page:not(:first-child) {
  margin-top: 1em;
}
@media screen and (min-width: 769px) {
  .container .page:not(:first-child) {
    margin-top: 0;
  }
  .container .tab {
    box-sizing: border-box;
    min-height: calc(100vh - var(--menu-height) - var(--license-height));
    background: var(--theme-bg-color);
  }
  .container .tab:not(:target) {
    display: none;
  }
  .container .cover {
    position: absolute;
    z-index: -1;
    left: 0;
    overflow: hidden;
    height: calc(100% - var(--menu-height) - var(--margin-normal));
    margin: 0;
    padding: var(--margin-normal) calc((100% - var(--page-width)) / 2 + var(--margin-normal)) 0 calc((100% - var(--page-width)) / 2 + var(--margin-normal));
    color: var(--theme-text-color);
    background: var(--theme-bg-color);
  }
  .container .cover:target {
    position: initial;
    overflow: initial;
    margin: 0 var(--margin-normal);
    padding: var(--margin-normal) 0 0 0;
  }
  .container .cover:not(:target):after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 0;
    pointer-events: none;
    width: 100%;
    height: calc(var(--more-outer-height) * 2 + var(--more-inner-virtual-height));
    max-height: 25%;
    background-image: linear-gradient(to bottom, rgba(var(--theme-bg-color-tuple), 0), rgba(var(--theme-bg-color-tuple), 1) 75%, rgba(var(--theme-bg-color-tuple), 1) 100%);
  }
  .container .cover:not(:target) ~ .license-info-container {
    display: none;
  }
  .container .page:target ~ .license-info-container {
    display: initial;
  }
}
@media print {
  .container .page {
    padding: 0;
    margin: 0;
  }
}

/* list page */
.list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.list .item {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: var(--item-inner-height);
  gap: var(--margin-normal);
  padding: var(--margin-normal) 0;
  margin-top: -1px;
  border-top: 1px dashed;
  border-bottom: 1px dashed;
  word-break: break-all;
}
.list .item .item-container {
  display: flex;
  flex-direction: column;
  gap: var(--margin-normal);
  width: 100%;
}
.list .item .item-title {
  min-width: var(--item-title-width);
}
.list .item .item-value {
  width: 100%;
}
.short-list .item {
  flex-direction: initial;
  align-items: center;
}
.short-list .item .item-container {
  flex-direction: initial;
  align-items: center;
}
@media print,screen and (min-width: 769px) {
  .list .item {
    flex-direction: initial;
    align-items: center;
  }
  .list .item .item-container {
    flex-direction: initial;
    align-items: center;
  }
}
@media print,screen and (min-width: 481px) {
  .list .item {
    word-break: initial;
  }
}
/* long link list */
.long-list .item .item-title {
  font-weight: bold;
  color: var(--theme-accent-color);
}
/* short link list */
@media print,screen and (min-width: 769px) {
  .short-list {
    flex-direction: initial;
  }
  .short-list .item {
    width: 50%;
  }
  .short-list .item:nth-child(2n+1) {
    width: calc(50% - var(--margin-normal));
    padding-right: var(--margin-normal);
  }
}

/* works */
.book-list .item .book-title {
  width: 100%;
  text-align: center;
}
.book-list .item .book-title .book-cover {
  width: calc(var(--page-width) / 3);
  max-width: 100%;
  height: auto;
}
@media print,screen and (min-width: 769px) {
  .book-list .item .book-title {
    --cover-width: calc((var(--page-width) - var(--margin-normal) * 2) / 3);
    max-width: var(--cover-width);
    min-width: var(--cover-width);
  }
  .book-list .item .book-title .book-cover {
    width: 100%;
  }
}

/* contact */
@media print,screen and (min-width: 769px) {
  .contact-list .item .item-action {
    min-width: calc((var(--item-inner-height) + var(--margin-normal)) * var(--contact-property-count) - var(--margin-normal));
  }
}

/* contact filter */
.contact-button-confidential {
  background-image: url('../emoji/1f6e1.png');
}
.contact-button-recommend {
  background-image: url('../emoji/1f4e8.png');
}
.contact-button-not-centralized {
  background-image: url('../emoji/2728.png');
}
@media screen {
  input#toggle-contact-confidential:checked ~ .contact-container .contact-item-not-confidential,
  input#toggle-contact-recommend:checked ~ .contact-container .contact-item-not-recommend,
  input#toggle-contact-not-centralized:checked ~ .contact-container .contact-item-not-not-centralized
  {
    display: none;
  }
}
input#toggle-contact-confidential:checked ~ .contact-container .contact-button-confidential,
input#toggle-contact-recommend:checked ~ .contact-container .contact-button-recommend,
input#toggle-contact-not-centralized:checked ~ .contact-container .contact-button-not-centralized
{
  background-color: var(--theme-button-active-color);
}