@charset "utf-8";

/*
Theme Name: HIV/エイズの歴史 アーカイブプロジェクト
Theme URI:
Author: ptokyo.org
Author URI:
Description:
Version: 2025.10
License:
License URI:
Tags:
*/

/* initialization */

:root {
  --bksp: 20px;
  --max-wid: 1240px;
  --clr-wh: rgb(255 255 255);
  --clr-bk: rgb(51 43 43);
  --clr-rd: rgb(255 0 0);
  --clr-rd-bp: rgb(204 0 0);
  --clr-rd-bp-18: rgb(204 0 0 / 18%);
  --clr-br: rgb(128 64 64);
  --clr-br-33: rgb(128 64 64 / 33%);
  --clr-br-18: rgb(128 64 64 / 18%);
  --clr-br-lt: rgb(158 141 43);
  --clr-yl: rgb(230 195 0);
  --clr-yl-33: rgb(230 195 0 / 33%);
  --clr-yl-18: rgb(230 195 0 / 18%);
  --clr-bl: rgb(1 118 194);
  --clr-bl-18: rgb(1 118 194 / 18%);
  --fs-S: 0.75rem;
  --fs-MS: 0.875rem;
  --fs-M: 1rem;
  --fs-ML: 1.125rem;
  --fs-L: 1.25rem;
  --fs-2L: 1.5rem;
  --fs-3L: 2rem;
  --fs-4L: 2.5rem;
  --lh-S: 1.3;
  --lh-M: 1.5;
  --lh-L: 1.8;
  --bdrd: 0.75rem;
  --anim: .25s;
}

/* html {scroll-behavior: smooth;} */
body {
  margin: 0;
  padding: 0;
  line-height: 1;
  color: var(--clr-bk);
  font-family: sans-serif;
  font-optical-sizing: auto;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a:link, a:visited {
  text-decoration: none;
  color: var(--clr-bl);
}
a:hover, a:active {
  text-decoration: underline;
  color: var(--clr-rd);
}

a.btn, button, input[type="submit"], input[type="button"] {
  position: relative;
  appearance: none;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  line-height: 1;
  cursor: pointer;
  outline: none;
  padding: 0.75em 2em;
  background-color: var(--clr-bl-18);
  border: 2px solid var(--clr-br-18);
  border-radius: var(--bdrd);
  font-size: var(--fs-L);
  text-decoration: none;
  color: var(--clr-bl);
}
a.btn:hover, button:hover, input[type="submit"]:hover, input[type="button"]:hover {
  background-color: var(--clr-bl);
  color: var(--clr-wh);
}
a.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid var(--clr-wh);
  border-radius: 0.66rem;
}
a.bt2 {
  background-color: var(--clr-rd-bp-18);
  color: var(--clr-rd-bp);
}
a.bt2:hover {
  background-color: var(--clr-rd-bp);
  color: var(--clr-wh);
}

hr {display: none;}
.clear {clear: both;}

.kosugi-maru-regular,
a.btn, button, input[type="submit"], input[type="button"],
#navi li a,
#title h1, #title > span,
#copyright,
body.home section h1,
#home_message h2,
#home_cover_post div.title,
#about_copy {
  font-family: 'Kosugi Maru', sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* block level elements */

div.content,
#contents {
  margin: 0 auto;
  max-width: 1240px;
}

/* head elements */

#header {
  position: sticky;
  z-index: 100;
  top: 0;
  background: linear-gradient(
    0deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 94%) 20%,
    rgb(255 255 255 / 94%) 100%
  );
  overflow: hidden;
}
#header::after,
#footer::before {
  content: '';
  display: block;
  height: 27px;
  background: url(images/line_wave.webp) center no-repeat;
}
#header div.content {
  display: flex;
  align-items: center;
  margin-block: 30px;
}
#header header h1 {
  margin: 0;
  font-size: 0;
}
#header header h1 a {
  display: block;
  margin-left: var(--bksp);
}

#header header h1 a,
#header::after {transition: var(--anim) opacity;}
body.cover #header header h1 a,
body.cover #header::after {opacity: 0;}

/* navi elements */

@media only screen and (min-width:769px) {
  #navi {flex: 1;}
  #navi h1 {display: none;}
  #navi ul {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    font-size: var(--fs-2L);
    color: var(--clr-rd);
  }
  #navi li:last-child {margin-right: var(--bksp);}
  #navi li:not(:last-child)::after {
    content: '|';
    margin: 0 0.5em;
  }
  #navi li a {color: var(--clr-rd);}
  #navi li a:hover {color: var(--clr-bk);}
}

/* foot elements */

#footer::before {margin: 7.5rem 0;}
#ft_navi h1 {display: none;}
#ft_navi ul {
  margin: 7.5rem var(--bksp);
  text-align: center;
  font-size: 0;
  line-height: var(--lh-S);
  color: var(--clr-rd);
}
#ft_navi li {
  display: inline-block;
  font-size: var(--fs-L);
}
#ft_navi li:not(:last-child)::after {
  content: '|';
  margin: 0 0.5em;
}
#ft_navi li a {color: var(--clr-rd);}
#ft_navi li a:hover {color: var(--clr-bk);}

#ft_info {
  display: flex;
  justify-content: center;
  gap: var(--bksp);
  margin: 4rem var(--bksp);
}
#ft_credit p {
  margin: 0;
  line-height: var(--lh-S);
}
#ft_admin h4 {
  margin: 0 0 0.5em;
  text-align: center;
  line-height: var(--lh-S);
  color: var(--clr-br);
}
#ft_admin address {
  line-height: var(--lh-S);
  font-style: normal;
}

#copyright {
  display: block;
  margin: 1rem 5%;
  text-align: center;
}

/* common elements */

.path,
.page_top {display: none;}

#title h1, #title > span {
  display: block;
  margin: 7.5rem 5%;
  text-align: center;
  font-size: var(--fs-3L);
}

aside.share div.content {
  box-sizing: border-box;
  margin-block: 7.5rem;
  padding: 2rem;
  max-width: 1200px;
  background-color: var(--clr-br-18);
  border-radius: var(--bdrd);
  text-align: center;
}
div.sdk {display: none;}
aside.share div.content > * {
  vertical-align: top;
  margin: 0 0.25rem;
}

/* body elements */

.body h1, .body h2, .body h3, .body h4 {
  margin: 1.5em var(--bksp);
  line-height: var(--lh-S);
}
.body h1::before, .body h2::before, .body h3::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  margin: -0.25em 0.25em 0 0;
  width: 1em;
  height: 1em;
  background: url(images/ic_string_01.webp) no-repeat;
  background-size: 100%;
}
.body h1, .body h2 {
  font-size: var(--fs-3L);
  color: var(--clr-br);
}
.body h1::before, .body h2::before {background-image: url(images/ic_string_01.webp);}
.body h3 {
  font-size: var(--fs-2L);
  color: var(--clr-br-lt);
}
.body h3::before {background-image: url(images/ic_string_02.webp);}
.body p {
  margin: 1em var(--bksp);
  line-height: var(--lh-L);
}

.body ul, .body ol {
  margin: 1.5em var(--bksp);
  padding-left: 2em;
  line-height: var(--lh-M);
}
.body ul {list-style-type: disc;}
.body ol {list-style-type: decimal;}
.body li {margin: 0.66em 0;}

.body div.box, .body div.box2 {
  margin: 2em var(--bksp);
  padding: 1em;
  background-color: var(--clr-br-18);
  border-radius: var(--bdrd);
  overflow: hidden;
}
.body div.box2 {background-color: var(--clr-yl-18);}

.body hr {
  display: block;
  margin: 5rem var(--bksp);
  height: 4px;
  background: url(images/hr.webp) center no-repeat;
  border: none;
}

div.more {
  margin: 2.5rem var(--bksp);
  text-align: right;
}
div.more::after {
  content: '\0bb';
  margin-left: 0.25em;
}

/* home */

#home_cover div.content {
  display: flex;
  margin-block: 5rem 7.5rem;
}
#home_cover div.content > * {flex: 1;}
#home_cover h1 {
  margin: 0;
  text-align: center;
}
#home_cover_post a {
  display: block;
  margin: 0 12%;
  text-decoration: none;
  color: var(--clr-bk);
}
#home_cover_post div.thumb {position: relative;}
#home_cover_post div.thumb span {
  display: block;
  overflow: hidden;
  border-radius: var(--bdrd);
}
#home_cover_post div.thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
#home_cover_post div.title {
  margin-top: 0.35em;
  font-size: var(--fs-2L);
  line-height: var(--lh-S);
  font-weight: 700;
}
#home_cover_post a:hover div.title {
  text-decoration: underline;
  color: var(--clr-rd);
}
#home_cover_post div.author {
  margin: 0.5em 0;
  font-size: var(--fs-M);
  line-height: var(--lh-S);
  color: var(--clr-br);
}
#home_cover::after {
  content: '';
  display: block;
  height: 27px;
  background: url(images/line_wave.webp) center no-repeat;
}

body.home section h1 {
  margin: 1.5em var(--bksp);
  text-align: center;
  font-size: var(--fs-4L);
  line-height: var(--lh-S);
}

#home_memory {margin: 7.5rem 0 5rem;}

#home_message {
  padding: 5rem 0;
  background: url(images/bg_string.jpg) center no-repeat;
  background-size: 100% 100%;
}
#home_message h1 {color: var(--clr-br);}
#home_message h2 {
  margin: 1em 0;
  text-align: center;
}
#home_message_body {
  margin: 0 8.33%;
  padding: calc(var(--bksp) * 3);
  background-color: rgb(255 255 255 / 88%);
  border-radius: var(--bdrd);
}
#home_message p {
  margin: 0;
  font-size: var(--fs-ML);
  line-height: var(--lh-L);
}
#home_message div.more {margin-bottom: 0;}

#home_chrono {
  display: flex;
  align-items: center;
  margin: 5rem auto 7.5rem;
  padding: 2.5rem 0;
  max-width: calc(var(--max-wid) - (var(--bksp) * 2));
  background: url(images/home_bg_chrono.jpg) center no-repeat;
  background-size: cover;
  border-radius: var(--bdrd);
  overflow: hidden;
}
#home_chrono div.content p {
  margin: 1em var(--bksp);
  text-align: center;
  line-height: var(--lh-M);
}

#home_news {margin: 0 0 7.5rem;}

/* memories */

div.memories ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--bksp) * 1.5) var(--bksp);
  margin: 0 var(--bksp);
}
div.memories li a {text-decoration: none;}
div.memories div.thumb {position: relative;}
div.memories div.thumb::before,
#home_cover_post div.thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgb(128 64 64 / 33%);
  border-radius: var(--bdrd);
  transition: var(--anim) background-color;
}
div.memories a:hover div.thumb::before,
#home_cover_post a:hover div.thumb::before {
  background-color: var(--clr-rd-bp-18);
  border-color: var(--clr-rd);
}
div.memories div.thumb span {
  display: block;
  border-radius: var(--bdrd);
  overflow: hidden;
  font-size: 0;
}
div.ytimg span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 18%;
  aspect-ratio: 1 / 1;
  background: url(images/pt_play.webp) center no-repeat;
  background-size: 100%;
  opacity: 0.66;
}
a:hover div.ytimg span::before {opacity: 0.92;}
div.memories div.thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
div.memories div.title {
  margin: 0.5em 0;
  font-size: var(--fs-ML);
  line-height: var(--lh-S);
  font-weight: 700;
  color: var(--clr-bk);
}
div.memories a:hover div.title {
  text-decoration: underline;
  color: var(--clr-rd);
}
div.memories div.author {
  margin: 0.5em 0;
  font-size: var(--fs-MS);
  line-height: var(--lh-S);
  color: var(--clr-br);
}
div.memories div.tags {font-size: 0;}
div.memories div.tags span {
  display: inline-block;
  margin: 0 0.35em 0.35em 0;
  padding: 0.35em 0.5em;
  background-color: var(--clr-yl-33);
  border-radius: 0.35rem;
  font-size: var(--fs-S);
  color: var(--clr-bk);
}

/* about */

body.page-about #contents {
  max-width: initial;
  background: url(images/bg_string.jpg) center no-repeat;
  background-size: 1600px auto;
}
body.page-about #main {
  margin: 0 auto;
  max-width: 1240px;
}

#about_copy {
  margin: 7.5rem var(--bksp);
  text-align: center;
  font-size: var(--fs-4L);
  color: var(--clr-br);
}
#about_message {
  margin: 0 8.33%;
  padding: var(--bksp) calc(var(--bksp) * 3);
  background-color: rgb(255 255 255 / 88%);
  border-radius: var(--bdrd);
}

/* news */

div.posts ul {
  margin: 0 var(--bksp);
  border: 2px solid var(--clr-br-33);
  border-radius: var(--bdrd);
  font-size: var(--fs-L);
  line-height: var(--lh-S);
}
div.posts li {padding: 0.25em;}
div.posts li a {
  position: relative;
  display: block;
  padding: 1em;
  padding-left: 3em;
  font-weight: 700;
  text-decoration: none;
  color: var(--clr-rd);
}
div.posts li:first-child a {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
div.posts li:last-child a {
  border-bottom-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
}
div.posts li a::before {
  content: '';
  position: absolute;
  left: 1em;
  top: 1.15em;
  width: 1em;
  height: 1em;
  background: url(images/ic_post.webp) center no-repeat;
  background-size: 100%;
}
div.posts li a:hover {
  background-color: var(--clr-rd-bp-18);
  color: var(--clr-bk);
}
div.posts li:not(:last-child) {border-bottom: 2px solid var(--clr-br-33);}

/* chronology */

#chrono_sheet {margin: 2rem var(--bksp);}
#chrono_sheet iframe {
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

@media only screen and (max-width:768px) {

/* initialization */

:root {--bksp: 5%;}

/* head elements */

body.home #header {
  position: fixed;
  width: 100%;
}
#header::after,
#footer::before {
  height: 1rem;
  background-size: auto 100%;
}
#header div.content {
  display: block;
  margin-block: 10px;
}
#header header h1 a {margin-inline: var(--bksp);}
#header header h1 img {
  width: auto;
  height: 48px;
}

/* navi elements */

#navi h1 {
  display: block;
  position: fixed;
  right: 5%;
  top: 10px;
  z-index: 101;
  margin: 0;
  width: 48px;
  height: 48px;
  background: url(images/ic_menu.webp) center no-repeat;
  background-size: 88%;
  font-size: 0;
  color: transparent;
}
body.menu #navi h1 {background-image: url(images/ic_close.webp);}
#navi > ul {
  position: fixed;
  z-index: 100;
  left: 100%;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(255 255 255 / 94%);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  transition: var(--anim) opacity;
}
body.menu #navi > ul {
  left: 0;
  opacity: 1;
}
#navi li {
  margin: 0 var(--bksp);
  text-align: center;
}
#navi li a {
  display: block;
  padding: 1rem;
  font-size: var(--fs-L);
  color: var(--clr-rd);
}

/* foot elements */

#footer::before {margin: 4rem 0;}
#ft_navi ul {margin: 4rem var(--bksp);}
#ft_navi li {font-size: var(--fs-ML);}

#ft_info {
  display: block;
  margin: 4rem 0;
}
#ft_info > * {margin: 2rem 0;}
#ft_credit p {margin: 1em var(--bksp);}
#ft_admin h4 {
  margin: 1em var(--bksp) 0.5em;
  text-align: left;
}
#ft_admin address {margin: 1em var(--bksp);}

/* common elements */

#title h1, #title > span {
  margin: 4rem var(--bksp);
  font-size: var(--fs-2L);
}

aside.share div.content {
  margin: 4rem var(--bksp);
  padding: 1rem;
}

/* body elements */

.body h1, .body h2 {font-size: var(--fs-2L);}
.body h3 {font-size: var(--fs-L);}

.body div.box, .body div.box2 {padding: 0;}

.body hr {
  margin: 2.5rem 0;
  background-size: 100%;
}

div.more {
  margin: 2rem var(--bksp);
  line-height: var(--lh-S);
}

/* home */

#home_cover div.content {
  display: block;
  margin-block: 4rem;
}
#home_cover h1 {
  margin: 0;
  text-align: center;
}
#home_cover h1 img {
  width: 66%;
  max-width: 320px;
}

#home_cover_post {margin: 4rem 0;}
#home_cover_post a {margin: 0 var(--bksp);}
#home_cover_post div.title {font-size: var(--fs-L);}
#home_cover::after {
  height: 1rem;
  background-size: auto 100%;
}

body.home section h1 {
  margin: 2.5rem var(--bksp);
  font-size: var(--fs-2L);
}

#home_memory {margin: 4rem 0;}

#home_message {
  margin: 4rem 0;
  padding: 0;
  background-size: 100% 50%;
}
#home_message h2 {
  margin: 1em var(--bksp);
  font-size: var(--fs-L);
  line-height: var(--lh-S);
}
#home_message_body {
  margin: 5%;
  padding: 1em;
}
#home_message_body div.more {margin-inline: 0;}

#home_chrono {
  margin: 4rem var(--bksp);
  max-width: 100%;
}

#home_news {margin: 4rem 0;}

/* memories */

div.memories ul {
  display: block;
  margin: 0;
}
div.memories li {margin: 2.5rem var(--bksp);}
div.memories div.title {margin: 0.35em 0;}
div.memories div.tags span {
  margin: 0 0.25em 0.25em 0;
  padding: 0.25em 0.5em;
}

/* about */

body.page-about #contents {background-image: none;}

#about_copy {
  margin: 4rem var(--bksp);
  font-size: var(--fs-3L);
}
#about_message {
  margin: 0 var(--bksp);
  padding: 0;
}

/* news */

div.posts ul {font-size: var(--fs-ML);}
div.posts li {padding: 0.25em;}
div.posts li a {
  padding: 0.5em;
  padding-left: 2.25em;
}
div.posts li a::before {
  left: 0.5em;
  top: 0.65em;
}

/* chronology */

#chrono_sheet iframe {
  height: 54vh;
  aspect-ratio: initial;
}

}