@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru:wght@400;500&family=Noto+Sans+JP:wght@100..900&display=swap');

header {
    color: #2e2e2e;
    font-family: 'Noto Sans JP', Consolas, 'Courier New', monospace;
    text-align: center;
    font-size: 32px;
    margin: auto;
}

body {
  background-color: #f5f5e6;
  color: #2e2e2e;
  font-family: 'Noto Sans JP', Consolas, 'Courier New', monospace;
}

body.body.page-id-3168 {
  color: #000000;
}

#mnemo-console {
  border: 1px solid #000000;
  background-color: #fae6e6;
  margin: 15px 40px;
}

#console-output {
  font-family: 'Noto Sans JP', Consolas, 'Courier New', monospace;
  font-size: 14px;
  text-align: left;
  border: 1px solid #cccccc;
  background-color: #ffffff;
  color: #2e2e2e;
  height: 48px;
}

#console-output div {
  line-height: 1.5;
}

/* リンク設定 */
a, a:visited {
  color: #0044cc;
  text-decoration: underline;
}

a:hover, a:active {
  color: #63cfcf; /* ホバー時にシアンに */
  text-decoration: underline;
}

#input-area {
  text-align: right;
}

.input-group {
  display: flex;
  justify-content: flex-end;
}

#mnemo-id {
  background-color: #ffffff;
  border: 1px solid #000000;
  color: #4228a9;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 16px;
  outline: none;
}

#mnemo-id:focus {
  border-color: #000000;
}

#input-area button {
  background: #e0e0d0;
  border: 1px solid #000000;
  color: #202020;
  font-family: Consolas, 'Courier New', monospace;
  font-size: 14px;
  cursor: pointer;
}

#input-area button:hover {
  background-color: #ffffff;
  color: #000;
}

#result-list {
  display: block; /* オーバーレイ用の display: none が指定されていたら block に変更 */
  text-align: left;
  margin: 15px 40px;
  width: 60%;
}

.comment-item {
  animation: fadeIn 0.5s ease-out;
}

.emphasis-purple {
  color: #9900cc;
  font-weight: bold;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

footer{
  margin-top: 30px;
  font-size: 14px;
  text-align: center;
  border-top: 1px solid #cacaca;
}

@media screen and (max-width: 768px) {
  header {
    font-size: 24px;
    margin-top: 10px;
    margin-bottom: 15px;
  }

  body {
    padding: 10px;
  }

  #console-output {
    font-size: 12px;
    width: 100%;             /* 横幅いっぱいに広げる */
    box-sizing: border-box;
  }

  .input-group {
    display: flex;
    gap: 5px;
    width: 72px;
    height: auto; 
  }

  #mnemo-form {
    display: flex;
    gap: 5px;
    height: 48px;
  }

    #input-area {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    align-items: flex-end;
    flex-direction: column;
      padding-left: 10px;  /* 左を控えめに */
  padding-right: 32px; /* 右を広めに */

  }

  #mnemo-id {
    flex: 1;
  }

  #input-area button {
    width: 48px;
    padding: 0;
  }

  #result-list {
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    align-self: flex-start;
      padding-left: 0px;  /* 左を控えめに */
  padding-right: 32px; /* 右を広めに */


  }

  footer {
    text-align: center;
    font-size: 10px;
    width: 100%; 
    box-sizing: border-box;
      padding-left: 32px;  /* 左を控えめに */
  padding-right: 20px; /* 右を広めに */
border-top: 1px solid #cacaca;
  }
}