@import url("/include/root.css");
@import url("/include/header.css");
@import url("/include/footer.css");

/* 
  CSS for basic article style
  --------------------------------
  USED IN: InoueOB aoasia2013 FL SE-EDU access android class for_undergraduate internship2023 kobo lab-db local old_page people research topics
*/

main h1 {
  position: relative;
  font-size: 32px;
  margin: 24px 0;
}

main h1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background-color: var(--indigo100);
  z-index: -1;
}

main h2 {
  font-size: 24px;
  border-left: 8px solid var(--indigo200);
  padding-left: 4px;
  margin: 28px 0 16px 0;
}

main h3 {
  position: relative;
  font-size: 20px;
  margin: 20px 0 12px 0;
}

main h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background-color: var(--indigo100);
  z-index: -1;
}

main p {
  font-size: 16px;
  margin: 12px 0;
}

main a:link,
main a:visited {
  color: var(--sky-blue);
}
main a:hover,
main a:active {
  color: var(--gray750);
}

main dl {
  margin-top: 0;
  margin-bottom: 0;
}

main dt {
  font-weight: bold;
}

main dd {
  margin-top: 0.1em;
  margin-bottom: 0.2em;
}

main code,
main samp,
main kbd,
main var {
  padding: 0.2em 0.4em;
  background-color: #818b981f;
  font-size: 85%;
  font-family: "JetBrains Mono", Menlo, Monaco, "Cascadia Code", Consolas,
    "Courier New", "Hiragino Sans", "BIZ UDゴシック", monospace;
  border-radius: 6px;
}

/* Maximum width can be forced in HTML, such as style="max-width: 300px;". */
main figure {
  margin: 20px auto;
  width: min(85%, var(--max-width) * 0.7);
}

main figure img {
  width: 100%;
}

main figcaption {
  text-align: center;
  margin-top: 8px;
}

/* container for multiple figures */
main .images_container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}

/* Maximum width can be forced in HTML, such as style="max-width: 300px;". */
main .images_container figure {
  --margin: 8px;
  width: min(85%, var(--max-width) / 2 - var(--margin) * 2);
  margin: var(--margin) auto;
}

/* special case for only one image (deprecated; just in case) */
/* You should just put <figure> directly and shouldn't use images_container for one image. */
main .images_container figure:only-child {
  width: min(85%, var(--max-width) * 0.7);
}

/* used in topics */
main .news_date {
  text-align: end;
  margin-bottom: 32px;
}

main .news_date time {
  font-size: 16px;
  background-color: var(--gray500);
  color: white;
  padding: 4px 8px;
  border-radius: 8px;
}

/* used in people and oldboy*/
/* 
  画像は3/4で表示する
  imgで画像の幅と高さを指定する
*/
main .people_grid_container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 160px);
  gap: 32px;
  margin: 0 32px;
}
@media screen and (max-width: 768px) {
  main .people_grid_container {
    grid-template-columns: repeat(auto-fill, 120px);
    gap: 16px;
    margin: 0 16px;
  }
}

main .people_grid_container .people_card {
  display: grid;
  width: 100%;
  grid-row: span 2;
  grid-template-rows: subgrid;
  gap: 8px;
  align-items: center;
  justify-items: center;
}
@media screen and (max-width: 768px) {
  main .people_grid_container .people_card {
    gap: 4px;
  }
}

main .people_grid_container .people_card img {
  width: 160px;
  height: 120px;
  object-fit: contain;
}
@media screen and (max-width: 768px) {
  main .people_grid_container .people_card img {
    width: 120px;
    height: 90px;
  }
}

main .people_grid_container .people_card .people_name {
  font-size: 16px;
  text-align: center;
  margin: 0;
  padding: 0;
}
@media screen and (max-width: 768px) {
  main .people_grid_container .people_card .people_name {
    font-size: 14px;
  }
}