ul.simplemenu {
margin: 20px auto;
padding: 0;
list-style: none;
display: flex;
justify-content: center;
gap: 15px;
}
/* simplemenu 用の li */
ul.simplemenu li {
margin: 0;
padding: 0;
}
/* simplemenu 用の a */
ul.simplemenu li a {
display: block;
padding: 8px 18px;
text-decoration: none;
border-radius: 25px;
background: white;
border: 2px solid #3cb371;
color: #2b4a3f;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
transition: 0.25s;
font-weight: bold;
}
/* simplemenu ホバー */
ul.simplemenu li a:hover {
background: #3cb371;
color: white;
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
/* 注意事項リスト(カード風) */
/* simplemenu 以外の ul のみに適用! */
ul:not(.simplemenu) {
width: 90%;
max-width: 800px;
margin: 0 auto 20px;
padding: 20px 25px;
background: white;
border-left: 6px solid #3cb371;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
text-align: left; /* ← ここで左揃えを明示 */
}
ul:not(.simplemenu) li {
margin: 8px 0;
line-height: 1.6;
text-align: left; /* ← 念のため左揃え */
}
/* タイトル */
h1 {
border-bottom: 6px solid #3cb371;
padding-bottom: 10px;
margin: 20px auto;
width: 90%;
max-width: 800px;
font-size: 28px;
letter-spacing: 2px;
}
/* セクション見出し */
h2, h3 {
width: 90%;
max-width: 800px;
margin: 30px auto 10px;
color: #2f4f4f;
}
/* チャット表示エリア */
#chat {
border: 2px solid #3cb371;
height: 300px;
overflow-y: auto;
padding: 10px 15px;
background: #ffffff;
border-radius: 10px;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
font-family: "Noto Sans JP", sans-serif;
margin-bottom: 15px;
}
/* メッセージ */
.message {
margin: 8px 0;
padding: 8px 12px;
border-radius: 6px;
background: #f7f7f7;
border-left: 4px solid #3cb371;
font-size: 14px;
}
/* システムメッセージ(灰色) */
.info {
color: #666;
font-size: 13px;
text-align: center;
margin: 5px 0;
}
/* テキストエリア */
.tarea {
width: 100%;
padding: 12px 14px;
border: 2px solid #ccc;
background: #f5f5f5;
border-radius: 8px;
box-sizing: border-box;
line-height: 1.6;
height: 6em;
font-size: 15px;
font-family: "Noto Sans JP", sans-serif;
transition: 0.2s;
}
/* テキストエリアのフォーカス */
.tarea:focus {
background: #ffffff;
border-color: #3cb371;
outline: none;
box-shadow: 0 0 6px rgba(60, 179, 113, 0.4);
}
/* 結果表示ボックス */
#result {
border: 2px solid #3cb371;
padding: 15px;
margin-top: 20px;
background: #ffffff;
min-height: 60px;
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
font-family: "Noto Sans JP", sans-serif;
}