:root {
    --bg-color: #000c18;
}

body {
    color: #ffd700;
    background-color: var(--bg-color);
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    max-width: 950px;
}

.title {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    background: linear-gradient(transparent 80%, #ffd700 0%);
}

.overview {
    color: #daa520;
}

.overview-title {
    font-size: 150%;
}

/* 学習チケット表示時の枠 */
.ticket {
    font-size: 100%;
}

.box1,.box2,.box3,.box4 {
    padding: 0.5em 1em;
    margin: 1em 0;
}

.box1 {
    border: solid 2px #ff8c00;
    color: #ff8c00;
}

.box2 {
    border: solid 2px #dcdcdc;
    color: #dcdcdc;
}


.box3 {
    border: solid 2px #ffff00;
    color: #ffff00;
}

.box4 {
    border: solid 2px #00bfff;
    color: #00bfff;
}

.bar1,.bar2,.bar3,.bar4 {
    padding: 0.3em;
    font-size: 110%;
}

.bar1 {
    border-bottom: 2px solid #ff8c00;
}

.bar2 {
    border-bottom: 2px solid #dcdcdc;
}

.bar3 {
    border-bottom: 2px solid #ffff00;
}

.bar4 {
    border-bottom: 2px solid #00bfff;
}

.tic_txt1 {
    color: #ff8c00;
}

.tic_txt2 {
    color: #dcdcdc;
}

.tic_txt3 {
    color: #ffff00;
}

.tic_txt4 {
    color: #00bfff;
}

/* 枠に文字重ねるやつ */
.caption_box{
    position: relative;
  
    margin-top: 1.5em;
    padding: 2em;
    border: 2px solid #ffd700;
    text-align: center;
}

.caption_box .caption {
    position: absolute;
    white-space: nowrap;
    top: 0;
    left: 50%; /* 中央に寄せるために変更 */
    transform: translateY(-50%) translateX(-50%); /* 中央に寄せるために変更 */
    font-size: 150%;
    padding: 0 0.5em;
    margin: 0;
    background-color: var(--bg-color);
}

/* サブタイトルの線 */
.subtitle-bar {
    display: flex;
    align-items: center;
}
 
.subtitle-bar:before,
.subtitle-bar:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #ffd700;
}
 
.subtitle-bar:before {
    margin-right: 1rem;
}
 
.subtitle-bar:after {
    margin-left: 1rem;
}

.center {
    text-align: center;
}

.sim {
    display: inline-block;
    width: 100%;
    max-width: 300px; /* ボタン幅 */
    color: #ff0000; /* 文字色 */
    border-radius: 100vh;
    border: 2px solid #ff0000; /* 線幅・種類・色 */
    background: var(--bg-color); /* 背景色 */
    padding: 0.5em 2em;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size: 1.3em;
    text-decoration: none;
    text-align: center;
    transition: 0.3s;
}
  
  /* マウスオーバーした際のデザイン */
.sim:hover {
    color: var(--bg-color); /* 文字色 */
    background: #ff0000; /* 背景色 */
}

.lv {
    width: 20%;
}

.ex {
    width: 30%;
}

table {
    text-align: center;
    width: 100%;
    margin: 2em auto;
}

table th{
    height: 50px;
    border-bottom: 3px solid #ffd700;
}

table td{
    height: 50px;
    border-bottom: 2px solid #ffd700;
}

.margin {
    margin: 1.5em;
}

.sns_btn {
    width: 30px;
    margin: 10px;
}

.update-info {
    overflow:auto;
    margin: auto;
	/* width:90vw; */
    height:100px;
	padding:5px;
	/* border:2px dotted #ffffff; */
	/* color:#e8e8e8; */
    border-top: 1px solid #ffd700;
    border-bottom: 1px solid #ffd700;
	/* background-color:var(--accent); */
	line-height:1.5em;
}