@charset "UTF-8";
/*
Theme name: ughost
Version: 1.0
*/

.mdc-typography {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}
.mdc-typography--mono {
  font-family: 'Roboto Mono', 'Noto Sans JP', sans-serif;
}
.font-italic {
  font-style: italic;
}
main {
  min-height: 100vh;
  background-color: rgba(0,0,0,.1);
}
.mdc-flex-wrapper {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  padding: 16px 0;
}
.mdc-flex-wrapper .mdc-card {
  margin-bottom: 1rem;
}
.mdc-flex {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 80%;
}
.mdc-flex--item {
  padding: 0 16px;
}
.main-content {
  width: 70%;
  min-width: 768px;
}
.main-content h2 {
  border-left: 8px solid #000;
  padding-left: 8px;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.75rem;
  margin: 8px 0;
}
.main-content h3 {
  border-left: 4px solid #000;
  padding-left: 4px;
  font-weight: 400;
  font-size: 1.1rem;
  margin: 8px 0 8px 8px;
}
.main-content p {
  margin: 8px 0 8px 16px;
}
.sub-content {
  width: 30%;
  min-width: 256px;
}
.card-single-content {
  padding: 0.5rem 1rem;
}
.card-primary-content, .card-secondary-content {
  padding: 0 1rem;
}
.card-primary-content {
  padding-top: 1rem;
}
.card-secondary-content {
  padding-bottom: 1rem;
}
.wp-json {
  word-break: break-all;
}
.thumbnail-area {
  display: flex;
  flex-direction: column;
  float: right;
  margin: 8px 0 0 8px;
  background-color: rgba(0,0,0,.1);
  align-items: center;
}
.thumbnail-area img {
  margin: 4px;
}
.thumbnail-area__caption {
  line-height: 1.5em;
  margin-bottom: 4px;
}
pre {
  overflow-x: visible;
  word-break: break-all;
  display: flex;
  padding: 16px;
  background-color: #000;
  color: #fff;
  border-radius: 8px;
}
#wp-json_content {
  font-family: 'Roboto Mono', 'Noto Sans JP', sans-serif;
  width: 100%;
  white-space: pre-wrap;
  font-size: 0.8rem;
}
.mdc-list--two-line .mdc-list-item {
  min-height: 72px;
}
/*  ここが一番下  */
:root {
  --mdc-theme-primary: #000;
  --mdc-theme-secondary: #ffcc00;
  --mdc-typography-caption-line-height: 1.1rem;
}

@media screen and (max-width: 768px) {
  .mdc-flex {
    width: 100%;
  }
  .mdc-flex > div {
    width: 100%;
    min-width: 100%;
  }
  .main-content {
    min-width: 100%;
  }
  .thumbnail-area {
    float: unset;
    margin: 0;
  }
}