h1 {
  margin-top:5px;
  margin-bottom:5px;
}

.comment_container {
  display:flex;
}
.comment_left {
  width:12%;
}
.comment_left_top {
  height:70%;
  display:flex;
  align-items: center;
  justify-content: center;
  
  > img {
    width:100%;
  }
}
.comment_left_bottom {
}

#list_pdf {
  padding:0px;
  padding-top:10px;
  padding-bottom:5px;
  width:100%;
  border-radius:2px;
  border-radius:6px;
  /*
  background:transparent;
  */
  background:#E2F0D9;

  >a {
    font-size:100%;
    font-weight:bold;
    text-decoration:none;
  }
}

.comment_right {
  width:88%;
}

/* https://webspe.net/tools/speech-bubble/
 */
.speechBubble {
  position: relative;
  display: inline-block;
  margin-left: 16px;
  padding: 16px;
  border: 2px solid #000000;
  border-radius: 12px;
  background-color: #ffffff;
  /*
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  */
  /* -added- */
  width:90%;
  margin-top:5px; 
}

.speechBubble::before {
  content: "";
  position: absolute;
  top: 37%;
  left: 0;
  border-style: solid;
  border-width: 0 16px 16px 0;
  border-color: transparent #000000 transparent transparent;
  translate: -100% -50%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 37%;
  left: 0;
  border-style: solid;
  border-width: 0 11.2px 11.2px 0;
  border-color: transparent #ffffff transparent transparent;
  translate: -100% calc(-50% - 0.4px);
}

.speechBubble ul {
  padding-left:20px;
}
.speechBubble ul>li {
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  margin-bottom:3px;
}

.circle_container {
  width:50%;
  display:flex;
  align-item:center;
  justify-content:center;
  margin:40px 0px;
  position:relative;
}
.circle {
  position:relative;
  /* https://untype.jp/blog/202407261600
 */
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--r) * 2px);
  height: calc(var(--r) * 2px);
  border: 25px solid #ddd;
  border-radius: 50%;
  box-sizing: border-box;
  --r:150;
  > div {
    cursor:pointer;
    --a2: calc(var(--a) * 1deg - 90deg);
    --x: calc(cos(var(--a2)) * var(--r) * 1px);
    --y: calc(sin(var(--a2)) * var(--r) * 1px);
    position:absolute;
    font: 700 50px / 1 Impact;
    translate: var(--x) var(--y);
    > a {
      color: #555;
      color: black;
      text-decoration:none; 
    }
  }
}
.circle_center {
  position:absolute;
  z-index:-1;
  width:100%;
  height:100%;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size:400%;
}
.circle_text {
  font-weight:bold;
}

.incircle_ruby {
  font-size:11px;margin:1px; text-align:center;
}
.incircle_main {
  margin:-9px; text-align:center;
}

#rei {
 font-family: "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho";
}