@charset "utf-8";
/**************************************************

	SUPERBOARD :: HISTORY SKIN :: basic

**************************************************/
.his_tab {}
.his_tab ul { display: flex; border-bottom: 5px solid #eaeaea; box-sizing: border-box;}
.his_tab li { flex: 1; text-align: center;}
/* .his_tab li:first-child button { padding-left: 30px; } */
/* .his_tab li:last-child button { padding-right: 30px; } */
.his_tab li a { position: relative; display: block; width: 100%; height: 80px; align-content: center; background: none; border: 0; color: #888; font-size: 22px; font-weight: bold; text-decoration: none;}
.his_tab li.active a { color: var(--col-red);}
.his_tab li.active a::before { content: ''; position: absolute; bottom: -5px; left: 0; right: 0; height: 5px; background-color: var(--col-red); }

.history_wrap{position: relative;}
.history_wrap .line_wrap { content: '';display: block;position: absolute;top: 10px;left: calc(50% - 0.5px);width: 1px;height: 100%;background: #f1f1f1;}
.history_wrap .line_wrap .line { position: absolute; top: 0; left: 0; right: 0; height: 0; background-color: var(--col-red); }

.history_wrap dt h4{font-size: 60px;color: var(--col-red);letter-spacing: -1px;}
.history_wrap dt p { padding-top: 10px; font-size: 26px; font-weight: bold;}
.history_wrap img { display: inline-block; margin-top: 30px; border-radius: 20px; max-width: 100%; }
.history_wrap dl{position: relative;display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;margin: 70px 0;}
/* .history_wrap dl:before{content: '';display: block;position: absolute;top: 0;left: 50%;width: 1px;height: 100%;background: rgba(0,0,0,0.1);} */
/* .history_wrap dl:after{content: '';display: block;position: absolute;top: -12px;left: calc(50% - 6px);width: 12px;height: 12px;border-radius: 50%;background: rgba(0,0,0,0.1);} */
.history_wrap dl > *{width: 50%;box-sizing: border-box;}
.history_wrap dl dt{padding-right: 60px; position: sticky; top: 150px; left: 0;}
.history_wrap dl dd{}
.history_wrap dl dd .his_item_wrap { position: relative; padding-bottom: 70px;padding-left: 90px;}
.history_wrap dl dd .his_item_wrap::before {content: '';display: block;position: absolute;top: -5px;left: 0;transform: translateX(-50%);width: 40px;aspect-ratio: 1/1;border-radius: 50%;background: rgba(237,37,39,0.1);}
.history_wrap dl dd .his_item_wrap::after {content: '';display: block;position: absolute;top: 10px;left: 0;transform: translateX(-50%);width: 10px;aspect-ratio: 1/1;border-radius: 50%;background: var(--col-red)}
.history_wrap dl dd .his_item_wrap + .his_item_wrap {}
.history_wrap dl dd h5{font-size: 24px;color: var(--col-red); }
.history_wrap dl dd ul{margin-top: 15px;}
.history_wrap dl dd ul li{position: relative;padding-left: 60px;}
.history_wrap dl dd ul li.no-month{padding-left: 0;}
.history_wrap dl dd ul li > *{font-size: 18px;padding: 8px 0;}
.history_wrap dl dd ul li > strong{position: absolute;top: 0;left: 0;color: #222;}
.history_wrap dl dd ul li > p{color: #666;}

/* .history_wrap dl:nth-child(odd) dt{order: 2;padding-left: 60px;text-align: left;}
.history_wrap dl:nth-child(odd) dd{order: 1;text-align: right;padding-right: 60px;}
.history_wrap dl:nth-child(odd) dd h5{text-align: right;}
.history_wrap dl:nth-child(odd) dd ul li{padding-left: 0;padding-right: 60px;}
.history_wrap dl:nth-child(odd) dd ul li.no-month{padding-right: 0;}
.history_wrap dl:nth-child(odd) dd ul li strong{left: auto;right: 0;} */

/* .history_wrap dl dt { opacity: 0; visibility: hidden; transition: all .1s;}
.history_wrap dl.active dt { opacity: 1; visibility: visible;} */