@charset "UTF-8";

:root{
    font-size: 10px;

    --main-filter-dropshadow: 5px 5px 10px silver;
}

.lead{
    width: 60%;
    margin: 5% auto 2.5% auto;
    padding: 5%;

    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-weight: normal;

    background-color: #f7f7f8;

    border-radius: 25px;

    filter: drop-shadow(var(--main-filter-dropshadow));

    transform: scale(1);
    transition: all .3s;
}

.lead h3{
    font-weight: lighter;

    font-size: 7.5rem;
    font-family: "JetBrains Mono", "Noto Sans JP", monospace;
    font-weight: 800;
    color: #f7a80a;

    background-color: #191e31;

    padding: 2%;
    margin-bottom: 4%;
    line-height: 2;

    border-radius: 10px;
}

.lead h3::before{
    content: '001 | printf(" ';

    position: relative;
    bottom: 1.5vh;

    font-size: 2.7rem;
    color: #ffffff;
}

.lead h3::after{
    content: ' ");';

    position: relative;
    bottom: 1.5vh;

    font-size: 2.7rem;
    color: #ffffff;
}

.lead p{
    line-height: 1.8;
    font-size: 1.8rem;
}

.lead p strong{
    display: inline-block;

    width: 12rem;

    text-align: center;

    font-size: 2.2rem;
    font-weight: normal;

    border-bottom: #bed555 3px solid;
    border-radius: 1.5px;

    color: #1c1c1d;

    transition: all .3s;
}

.profile{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60%;
    height: 5vh;
    margin: 2.5% auto;
    padding: 2% 5%;

    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-weight: normal;

    background-color: #f7f7f8;

    border-radius: 25px;

    filter: drop-shadow(var(--main-filter-dropshadow));

    transform: scale(1);
    transition: all .3s;

    color: #1c1c1d;;
    text-decoration: none;
    font-size: 2.3rem;
    text-align: center;
}

.profile p{
    display: inline-block;
    width: 100%;
    height: 100%;

    line-height: 2;
    background-color: #f7f7f899;

    border-radius: 5px;
}

.profile img{
    border-radius: 25px;
    
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    object-fit: cover;

    opacity: 0;

    transition: all .3s;
}

.article-lead{
    display: block;
    width: 60%;
    margin: 7.5% auto 2.5% auto;
    padding: 2% 5%;

    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-weight: normal;

    background-color: #bed555;

    border-radius: 25px;

    filter: drop-shadow(var(--main-filter-dropshadow));

    transform: scale(1);
    transition: all .3s;

    color: #1c1c1d;;
    text-decoration: none;
    font-size: 2.3rem;
    text-align: center;
}

.grid-article{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    grid-template-rows: auto;
    gap: 4rem;

    width: 70%;
    height: auto;

    margin: auto;
}

/* .grid-article * {
  border: red solid 1px;
} */

.grid-article .link-to-art{
  display: block;
  width: 100%;

  margin: 0;
  padding: 0;

  color: #222222;
  text-decoration: none;
}

.grid-article .link-to-art article{
  display: flex;
  flex-direction: column;
  justify-content: center;

  margin: 0;
  padding: 0;

  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: normal;

  background-color: #f7f7f8;

  border-radius: 25px;

  filter: drop-shadow(var(--main-filter-dropshadow));

  transform: scale(1);
  transition: all .3s;
}

.grid-article .link-to-art article img{
  width: 90%;
  object-fit:contain;

  margin: 6% auto 3% auto;

  border-radius: 10px;

  filter: grayscale(1);

  transition: all .3s;
}

.grid-article .link-to-art article h5{
  display: block;
  width: calc(100% - 6rem);
  height: 4rem;

  margin: 0 auto;
  padding: 0 3rem;

  color: #222222;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 600;
  font-size: 2.5rem;
  
  text-align: justify;
  line-height: 4rem;
  text-decoration: underline;
  text-decoration-color: #f7a80a;
  text-decoration-thickness: 7px;
  text-underline-offset: 0.6rem;
}

.grid-article .link-to-art article p{
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    width: calc(100% - 6rem);
    height: calc(3rem * 3);

    margin: 1rem auto;
    padding: 0 3rem;

    color: #222222;
    font-weight: 400;
    font-size: 1.75rem;
    
    text-align: justify;
    line-height: 3rem;
    text-decoration: none;
}

.grid-article .link-to-art article .tagset{
    display: flex;
    column-gap: 2.5%;
    align-items: center;
    justify-content: left;

    width: auto;

    margin: 0 6% 8% 6%;
    padding: 0;
}

.grid-article .link-to-art article .tag{
    font-size: 1.6rem;
    line-height: 2;
    text-align: center;
}

.grid-article .link-to-art article .hard{
    /*ハードウェア*/
    width: 12rem;
    background-color: #dce9b0;
}

.grid-article .link-to-art article .soft{
    /*ソフトウェア*/
    width: 12rem;
    background-color: #c2c7f7;
}

.grid-article .link-to-art article .circuit{
    /*回路*/
    width: 5rem;
    background-color: #e9cab0;
}

.grid-article .link-to-art article .display{
    /*表示/UI*/
    width: 7rem;
    background-color: #d9b0e9;
}

.grid-article .link-to-art article .days{
    /*日常*/
    width: 5rem;
    background-color: #e9b0dd;
}

.grid-article .link-to-art article .note{
    /*雑記*/
    width: 5rem;
    background-color: #9ee0d1;
}

.grid-article .link-to-art article .transition{
    /*移行記事*/
    width: 8rem;
    background-color: #ccc;
}

/*==================================================*/

/*==================================================*/
/*パソコンのみ（hover等）*/
@media (hover: hover){
  .lead:hover{
    transform: scale(1.02);
  }

  .lead p strong:hover{
    width: 120px;
  }

  .profile:hover{
    transform: scale(1.02);
  }

  .profile:hover img{
    opacity: 1;
  }

  .grid-article .link-to-art article:hover{
    transform: scale(1.02);
  }

  .grid-article .link-to-art:hover article img{
    filter: grayscale(0);
  }
}
/*==================================================*/










/*==================================================*/
/*スマホ用*/
@media screen and (max-width: 480px){
  :root{
    font-size: 5px;
  }

  .profile{
      height: 4rem;
  }
  
  .profile p{
      line-height: 4rem;
  }
  
  .profile img{
      opacity: 0.7;
  }

  .grid-article{
      grid-template-columns: repeat(auto-fit, 100%);
      gap: 4rem;
  }
  
  .grid-article .link-to-art article{
      border-radius: 15px;
  }

  .grid-article .link-to-art article img{
      filter: grayscale(0);
  }

  .grid-article .link-to-art article h5{
    font-family: 'Roboto', 'Noto Sans JP', sans-serif;
    font-size: 3rem;
    font-weight: 700;

    text-decoration: underline;
    text-decoration-color: #f7a80a;
    text-decoration-thickness: 3px;
    text-underline-offset: 0.8rem;
  }

  .grid-article .link-to-art article .hard{
    /*ハードウェア*/
    width: 14rem;
  }
  
  .grid-article .link-to-art article .soft{
    /*ソフトウェア*/
    width: 14rem;
  }
  
  .grid-article .link-to-art article .circuit{
    /*回路*/
    width: 7rem;
  }
  
  .grid-article .link-to-art article .display{
    /*表示/UI*/
    width: 9rem;
  }
  
  .grid-article .link-to-art article .days{
    /*日常*/
    width: 7rem;
  }
  
  .grid-article .link-to-art article .note{
    /*雑記*/
    width: 7rem;
  }
  
  .grid-article .link-to-art article .transition{
    /*移行記事*/
    width: 10rem;
  }
}
/*==================================================*/