@charset "UTF-8";
@media screen and (min-width: 768px) {
  
html{
  scroll-behavior: smooth
}
  

header{
  background-color: white;
  text-align: center;
}

.panda2_1 {
    width: 5%;         
    padding-top:20px;
      }

.site_name {
    width: 20%;        
    margin-bottom: 15px;
      }
}  

main{
  background-image:  url(frogpattern.png);
  background-size: 20%;
  color: black;
  font-family: "Verdana", sans-serif;
  padding: 20px;
  text-align: center;
}

.article_background{
    display: block; 
    background-color: rgba(255, 255, 255, 0.75) !important;
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px 20px 20px 20px;
    width: 70%;
    box-sizing: border-box;
}

.num-img{
    text-align: center;
}

.No {
  padding-top:20px;
  display: flex;
  align-items: center;   /* 上下中央揃え */
  justify-content: center; /* 左右中央揃え */
  gap: 0.2em;            /* 文字と画像の間の隙間 */
}

.genre{
  background-color: #000000;
  color: #ffffff;           
  padding: 6px 8px 8px 8px; 
  font-weight: bold;         
  font-size: 21px;
  letter-spacing: 0.1em;
  
  text-indent: 0.1em;    /* letter-spacing分、右に寄るのを防ぐ（微調整） */
  border-radius: 2px;        /* 角を少し丸くする場合（不要なら消してOK） */
  display: inline-block;     /* 四角形として認識させる */
  vertical-align: middle;    /* 周りの文字と高さを合わせる */
  }

.title{
  font-weight: bolder;  
  font-size: 56px;
}

.attention{
  font-weight: bold;
  display: inline-block; /* inlineよりinline-blockの方が崩れにくいです */
  background: linear-gradient(transparent 50%, yellow 50%) !important;
}

section{
  width:70%;
  margin: 0 auto;
  font-size: 24px;
  line-height: 1.8;
  text-align: justify;
}

h1,h2{
  text-align: center;
}

figure{
  text-align: center;
}

figcaption{
  font-style: oblique;
  font-size: 80%;
  color: #666;
  display: block;
  text-align: center;
  margin-bottom: 5px;
}

embedPlayer{
  width: auto;
  margin: 0 auto;
}