@charset 'UTF-8';

:root {
  --color-1: #ffffff;
  --color-2: #f6f6f6;
  --color-3: #f1f1f1;
  --color-4: #dddddd;
  --color-5: #aaaaaa;
  --color-6: #888888;
  --color-7: #555555;

  font-family: 'Note Sans JP', 'メイリオ', 'ヒラギノ角ゴ ProN W3', sans-serif;
  font-size: 1.25rem;
  color: var(--color-7);
  background-color: var(--color-1);
}

.dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  /* :root {
    --color-1: #1e1e1e;
    --color-2: #2a2a2a;
    --color-3: #555555;
    --color-4: #444444;
    --color-5: #666666;
    --color-6: #888888;
    --color-7: #dddddd;
  } */

  .light {
    display: none;
  }

  .dark {
    display: inherit;
  }
}

/* .site-header */
.site-header {
  height: 4rem;
  padding: 1rem 2rem 0;
  background-color: var(--color-2);
  border-bottom: 1px solid var(--color-5);
}

/* .site-body */
.site-body {
  max-width: 100dvw;
  height: 100dvh;
}

/* .body-header */
.body-header {
  display: flex;
  height: 13em;
  padding: 3rem 2rem 3rem;
  background-color: var(--color-2);
  flex-direction: column;
  justify-content: space-between;
}

.body-title {
  display: -webkit-box;
  font-size: 1.75rem;
  color: var(--color-7);
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.body-subtitle {
  display: -webkit-box;
  color: var(--color-6);
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* .site-footer */
.site-footer {
  display: flex;
  height: 10rem;
  padding: 1rem 2rem 2rem;
  background-color: var(--color-2);
  border-top: 1px solid var(--color-5);
  justify-content: space-between;
  flex-direction: column;
}

.site-footer .copyright {
  font-size: 0.75rem;
  text-align: center;
}


@media screen and (max-width: 960px) {
  /* .site-header */
  .site-header {
    height: 2.5rem;
    padding: 0;
    padding-left: 1rem;
    position: relative;
  }

  /* .body-header */
  .body-header {
    height: 11rem;
    padding: 2rem 1rem 2rem;
  }
}