@charset "utf-8";

.wrap-history.on {background: #fff;z-index: 5;}
.wrap-history .banner {margin-bottom:5rem;background:url('../images/bg-history.png') no-repeat top right / cover;border-radius:2rem;}
.wrap-history .banner .banner-txt-box {padding:5.2rem 0 5.9rem 6.5rem;}
.wrap-history .banner .banner-txt-box span {display:block;margin-bottom: 1rem;font-size:2rem;color:#1174ff;font-family:'paper';font-weight:500;}
.wrap-history .banner .banner-txt-box span em {font-weight:700;font-size:2rem;}
.wrap-history .banner .banner-txt-box strong {font-size:2.6rem;font-family:'paper';font-weight:500;color:#191d2b;}
.wrap-history .banner .banner-txt-box strong i {display:block;font-weight:600;font-size:4.2rem;line-height:1.2;}

.wrap-history > .inner {display:flex;}

.hist_menu {position:relative;flex-shrink:0;width:44.5rem;}
.hist_menu .tab-list > ul {display: block;}
.hist_menu .tab-list li {margin-bottom:3.5rem;}
.hist_menu .tab-list li:last-child  {margin-bottom: 0;}
.hist_menu .tab-list li a {position:relative;display:inline-block;padding-bottom:2rem;font-size:4.2rem;color:#d9d9d9;font-family:'paper';font-weight:800;background-image:linear-gradient(#191d2b,#191d2b);background-position:left bottom;background-size:0 .4rem;background-repeat:no-repeat;transition:background-size .5s;}
.hist_menu .tab-list li.on a,
.hist_menu .tab-list li a:hover {background-size:100% .4rem;color:#191d2b;}
.hist_menu .tab-list li.on a::before {content:'';position:absolute;right:-4rem;top:0;width:1.7rem;height:1.7rem;background:url('../images/ic-year_deco.png') no-repeat center / 1.7rem;}

.hist_cont {position: relative;flex:1;}
.hist_cont::before {display: none;content: '';position: absolute;top: -1rem;width: 100%;height: 3rem;;background: #fff;z-index: 100;}
.hist_cont.on::before {display: block;}

.hist_list {position:relative;height:100vh;overflow:hidden;}
.hist_list .scroll-wrap {position:relative;height:100%;will-change:transform;z-index:10;}
.hist_list .box {position:relative;margin-bottom:4.8rem;}
.hist_list .scroll-wrap > div:last-child {margin-bottom:0;}

.hist_list .scroll-bar {position:absolute;left:1.5rem;top:2.8rem;width:.4rem;height:calc(100vh - 8rem);background:#dadada;z-index:5;}
.hist_list .scroll-bar > div {position:relative;width:100%;height:100%;}
.hist_list .scroll-bar .bar {position:absolute;left:0;top:0;width:100%;height:0;background:#1174ff;}
.hist_list .scroll-bar .bar::before {content: '';position: absolute;top: 0;left: 50%;transform: translateX(-50%);background: #1174ff;}
.hist_list .scroll-bar .bar .dot {position:absolute;bottom: 0;left:-.28rem;width:.96rem;height:.96rem;background:#1174ff;transform:rotate(45deg);z-index:1;}
.hist_list .scroll-bar .bar .dot::before {content:'';position:absolute;top:50%;left:50%;width:100%;height:100%;border-radius:50%;background-color:rgba(17,116,255,.2);transform:translate(-50%,-50%);animation:dotWidth 1.5s infinite;z-index:9;}

.hist_list .box .year h1 {position: relative;padding-left:7.5rem;margin-bottom: 1.8rem;}
.hist_list .box .year h1 a {pointer-events: none;color:#1174ff;font-family:'paper';font-weight:700;font-size:3rem;}

.hist_list .box-content {display:flex;align-items:flex-start;padding-left:7.5rem;margin-bottom: 1.5rem;}
.hist_list .box-content > ul {margin-top: -.28rem;}
.hist_list .box-content h2 {position:relative;width:12rem;padding-left:1.3rem;font-size:2rem;color:#121212;font-family:'paper';font-weight:600;flex-shrink: 0;line-height: 1;}
.hist_list .box-content h2::before {content:'';position:absolute;left:0;top:50%;margin-top:-.15rem;width:.3rem;height:.3rem;background:#1174ff;}
.hist_list .box-content li {font-size:1.7rem;color:#333;font-family:'paper';font-weight:400;}

.hist_menu > button   {display: none;}

.hist_list .scroll-wrap{will-change:transform;transform:translate3d(0,0,0);}
.hist_list .scroll-bar .bar{will-change:height;transform:translateZ(0);}

@keyframes dotWidth {
	0% {width:0;height:0;}
	50% {width:3rem;height:3rem;}
	100% {width:0;height:0;}
}

@media screen and (max-width:1280px) {
	.hist_menu {width: 30rem;}
	.hist_menu .tab-list li a {font-size: 3.5rem;padding-bottom: .2rem;}
	.hist_list .box .year h1 {padding-left: 7rem;margin-bottom: 1.3rem;}
	.hist_list .box-content {padding-left: 7rem;align-items: flex-start;}
	.hist_list .box-content h2 {width: 10rem;}
	
	.hist_list .scroll-bar {height: calc(100vh - 30rem);}
	.hist_list .scroll-bar .bar .dot {left: -.34rem;}
	.hist_menu .tab-list li.on a::before {right: -3rem;top: .5rem;width: 1.6rem;height: 1.6rem;background-size: contain;}
}

@media screen and (max-width:768px) {
	.wrap-history > div > .inner {flex-direction: column;}
	.wrap-history .banner {margin-bottom: 3.5rem;}
	.wrap-history .banner .banner-txt-box {padding: 5rem 0 6rem 4rem;}
	.wrap-history .banner .banner-txt-box strong {font-size: 2.2rem;}
	.wrap-history .banner .banner-txt-box strong i {font-size: 3rem;}
	.wrap-history .banner .banner-txt-box span {font-size: 1.7rem;}
	.wrap-history .banner .banner-txt-box span em {font-size: 1.8rem;}
	.hist_menu .tab-list li {margin-bottom: 2rem;}
	.hist_menu .tab-list li a {font-size: 2.3rem;}
	.hist_list .scroll-bar {height: calc(100vh - 10.4rem);}

	.hist_menu{width:100%;z-index: 100;}
	.hist_menu > button {display: block;position: absolute; top: 1rem; z-index: 10; width: 2.4rem; height: 2.4rem; text-indent: -9999rem;}
	.hist_menu > button.prev {left: 0; background: url('../images/btn-prev.png') no-repeat center / contain;}
	.hist_menu > button.next {right: 0; background: url('../images/btn-next.png') no-repeat center / contain;}

	.hist_menu .tab-list {overflow:hidden;width: calc(100% - 8rem);margin: 0 auto;}
	.hist_menu .tab-list > ul.swiper-wrapper {display:flex;}
	.hist_menu .tab-list li.swiper-slide {text-align: center;}

	.hist_list .box .year h1 {padding-left: 5rem;}
	.hist_list .box .year h1 a {font-size: 2.2rem;}
	.hist_list .box-content {padding-left: 5rem;}
	.hist_list .box-content > ul {margin-top: -.34rem;}
	.hist_list .box-content h2 {font-size: 1.7rem;}
	.hist_list .box-content li {font-size: 1.6rem;}
	.hist_list .box {margin-bottom: 2rem;}
	.hist_list .box .year h1::before {margin-top: 0;}
	
	.hist_menu .tab-list li.on a::before {display: none;right: -2rem;top: .5rem;width: 1.3rem;height: 1.3rem;}
	.hist_cont {margin-top: -1rem;}
}