body {
    font-family: "ヒラギノ丸ゴ ProN";
}
h1, h5 {
    display: inline-block; /* インラインブロック要素に変更 */
    margin: 0; /* 余白をリセット */
}
.title_form {
    /* background: #eeeeee; */
    /* padding: 10px 10px; */
    width: 350px;
    height: 80px;
}
.xp_form {
    background: #eaf4ff;
    padding: 10px 10px;
    width: 330px;
    height: 500px;
}
form dl dt {
    width: 170px;
    height: 40px;
    padding: 10px 0;
    line-height: 40px;
    float: left;
}
form dl dd {
    padding: 10px 0;
    margin: 0;
}
.box {
    box-sizing: border-box;
    width: 150px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 10px !important;
}
.calc-btn {
    width: 120px;
    height: 40px;
    display: inline-block;
    font-size: 18px; /* 文字サイズ */
    font-weight: bold; /* 文字を太字に */
    color: white; /* 文字の色 */
    background-color: #007bff; /* ボタンの背景色（青） */
    border: none; /* ボーダーをなくす */
    border-radius: 10px; /* 角丸にする */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* ボタンに影を付ける */
    text-align: center; /* テキストを中央寄せに */
    cursor: pointer; /* カーソルをポインタに */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* ホバー時のトランジション */
}
.calc-btn:hover {
    background-color: #0056b3; /* ホバー時の背景色 */
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.15); /* ホバー時の影 */
}
/* タッチ時のスタイル */
.calc-btn:active {
    background-color: #004085; /* タッチ時の背景色 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* タッチ時の影 */
}
table {
    background-color: white;
    text-align: center;
    min-width: 300px;
}
#toggle-button {
    display: none;
    width: 80px;
    height: 30px;
    font-size: 12px; /* 文字サイズ */
    font-weight: bold; /* 文字を太字に */
    color: rgb(0, 0, 0); /* 文字の色 */
    background-color: #cccccc; /* ボタンの背景色 */
}
.target {
    display: none;
    background: linear-gradient(transparent 70%, rgba(255, 255, 0, 0.5) 70%); /* 半透明の黄色 */
    padding-bottom: 3px; /* テキストと下線の間に少し余白 */
}