@charset "UTF-8";
/* CSS Document */
:root {
  --back-color:#f7de75; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--back-color);
  color: black;
  margin: 0;
  height: 100%;
  font-family: "Helvetica","Arial","Hiragino Kaku Gothic ProN", "Meiryo", "sans-serif";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 0.1em;
  line-height: 1.5em; }

.container {
  margin: 24px;
  border: 1px solid black;
  overflow: hidden; }
  @media only screen and (max-width: 700px) {
    .container {
      margin: 16px; } }

header, footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0 auto;
  padding: 20px 8%; }
  @media only screen and (max-width: 1100px) {
    header, footer {
      padding: 16px 40px; } }
  header nav, footer nav {
    display: block; }
  header ul, footer ul {
    display: flex;
    justify-content: space-between; }
    header ul li, footer ul li {
      font-size: 14px;
      margin: 0 0 4px 16px; }
      header ul li :hover, footer ul li :hover {
        color: var(--back-color); }
      header ul li.current a, footer ul li.current a {
        padding-bottom: 3px;
        border-bottom: 1px solid; }
  @media only screen and (max-width: 700px) {
    header, footer {
      padding: 16px 24px;
      display: block;
      font-size: 12px; }
      header span.site-name, footer span.site-name {
        display: block;
        margin-bottom: 24px; }
      header ul, footer ul {
        justify-content: start; }
        header ul li, footer ul li {
          margin-left: 12px; }
          header ul li:first-of-type, footer ul li:first-of-type {
            margin-left: 0; } }

header ul li.current a {
  color: white; }
  header ul li.current a :hover {
    color: white; }

footer span img {
  filter: brightness(1) invert(1); }
footer ul li.current a {
  color: black; }
  footer ul li.current a :hover {
    color: black; }

.alt-section {
  background: black;
  color: white; }

main, footer {
  background: rgba(255, 255, 255, 0.8); }

section {
  margin: 0 auto;
  text-align: left;
  padding: 3rem 8%; }

main h2 {
  font-size: 20px;
  margin-bottom: 2rem; }

.introduction {
  height: 50vh;
  text-align: center;
  position: relative; }
  .introduction h1 {
    position: relative;
    top: calc(50vh / 2 - 4rem);
    font-size: 27px; }
  .introduction p {
    position: relative;
    top: calc(50vh / 2 - 4rem);
    font-size: 12px;
    color: #666; }

.about {
  font-size: 15px;
  line-height: 1.75; }
  @media screen and (max-width: 600px) {
    .about {
      font-size: 14px;
      line-height: 1.5; } }
  .about p span {
    font-size: 12px;
    color: #666; }

.portfolio .pf_list {
  display: flex;
  flex-wrap: wrap;
  /*4記事以上ある場合、折り返しできるように指定*/
  gap: 60px 1.4%; }
  .portfolio .pf_list li {
    width: 23.95%;
    color: #666; }
    .portfolio .pf_list li time {
      font-size: 10px; }
    .portfolio .pf_list li h3 {
      font-size: 15px;
      font-weight: normal; }
  @media screen and (max-width: 1200px) {
    .portfolio .pf_list {
      gap: 60px 2%; }
      .portfolio .pf_list li {
        width: 32%; } }
  @media screen and (max-width: 880px) {
    .portfolio .pf_list {
      gap: 60px 4%; }
      .portfolio .pf_list li {
        width: 48%; } }
  @media screen and (max-width: 600px) {
    .portfolio .pf_list {
      display: block; }
      .portfolio .pf_list li {
        width: 100%;
        margin-bottom: 2rem; } }