@import url('https://fonts.googleapis.com/css2?family=BIZ+UDMincho&family=Yuji+Syuku&display=swap');
:root {
    --fullback: #ffffff;
    --section-back: #eeeeee;
    --main-text: #000000;
    --backcolor: #e9f6f0;
    --insertcolor: #b2ffdb;
    --accentcolor: #d70000;
  }

  body{
    text-align:center;
    font-family: "BIZ UDMincho", serif,"ヒラギノ角ゴ Pro W3", sans-serif;
    font-size: 18px;
    line-height: 1.8;
    letter-spacing: .8px;
    color: var(--main-text);
    background-color: var(--backcolor);
    /* background-color: rgb(0, 0, 0, 0.7); */
    margin: auto;
    padding-bottom: 10vh;
    /* max-width: 93vw; */
    overflow-wrap: break-word;
  
  }

  a:hover{
    color: var(--accentcolor);
  }

  h3{
    border-bottom: 4px solid var(--insertcolor);
    margin-left: 0%;
    margin-right: 5%; 
  }

  h4 {
    margin-bottom: 0;
}

  mark{
    color: #d70000;
    background-color: rgb(255, 255, 198);
    font-weight: 900;
  }

  .back-ground{
    background-color: var(--fullback);
    margin-top: 10px;
    width: 90vw;
    margin: 0 auto;
    border-radius: 20px;
    padding-bottom: 5vh;
  } 
  
  .title-section{
    text-align:center;
  }
  .about-section{
    text-align:left;
    margin-left: 2%;
    margin-right: 2%;
  }
  .thought-section{
    text-align:left;
    margin-left: 2%;
    margin-right: 2%;
  }

  .article-image{
    text-align:center;
  }

  .article-image img{
    width: 30vw;
    object-fit: contain; /* 画像の比率を保ちながら枠に収める */
    /* flex: left; */
  }

  @media only screen and (max-width: 600px) {
    .article-image img{
      width: 60vw;
      object-fit: contain; /* 画像の比率を保ちながら枠に収める */
      /* flex: left; */
    }  

    iframe{
      max-width: 90vw;
      object-fit: contain; /* 画像の比率を保ちながら枠に収める */
    }
  }