@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Oswald:wght@200..700&display=swap');

/* root */ 
:root {
--osw : 'Oswald', sans-serif;
--cha : 'Chakra Petch', sans-serif;
}

.btn_ld {cursor:pointer; transition:all ease-in-out 0.2s; display:inline-block; font-size:0; color:transparent; vertical-align:top; position:relative; width:48px; height:48px; padding:6px; background:#151515; }
.btn_ld > span {display:block; width:36px; position:relative; height:36px; background-repeat:no-repeat; background-position:center center; background-size:100% auto; font-size:0; color:transparent;}
.btn_ld > span:before, .btn_ld > span:after {transition:all ease-in-out 0.2s; content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
.btn_ld > span:before { background:url('/images/common/event/multi_landing/btn_ld.png') center center no-repeat; background-size:100% auto; opacity:1;}
.btn_ld > span:after {box-shadow:inset 0 0 0 1px #fff; opacity:0;}
.btn_ld:hover {background:#000;}
.btn_ld:hover > span {    background-size: 100% auto;}
.btn_ld:hover > span:before {opacity:0;}
.btn_ld:hover > span:after {opacity:1;}

.landing_sidebar {z-index:102; transform: translateX(-100%); transition: transform 0.4s ease; width:240px; background:rgba(21, 21, 21, 0.6); -webkit-backdrop-filter: blur(2rem); backdrop-filter: blur(2rem); position:fixed; top:0; bottom:0; left:0; padding:9.6rem 0 92px;} 
.landing_sidebar.open {transform: translateX(0);}
.landing_sidebar.no-trans {transition: none !important;}
.landing_sidebar .bi_wrap {height:9.6rem; display:flex; align-items:center; justify-content:center; width:100%; position:absolute; top:0; left:0; right:0; padding:2rem;}
.landing_sidebar .bi_wrap .bi img {max-width:16rem;}
.landing_sidebar .link_list {height:100%;}
.landing_sidebar .link_list ul {max-height:100%; overflow:auto;}
.landing_sidebar .link_list li {padding:2.4rem 3.6rem 0; position:relative; border-bottom:1px solid rgba(102, 102, 102, 0.3);}
.landing_sidebar .link_list li:first-child {border-top:1px solid rgba(102, 102, 102, 0.3);}
.landing_sidebar .link_list .thum {transition:all ease-in-out 0.2s; z-index:1; width:100%; max-width:168px; position:relative; margin:0 auto;}
.landing_sidebar .link_list .thum:after {content:''; display:block; padding-bottom:57.15%;}
.landing_sidebar .link_list .thum:before {content:''; display:block; position:absolute; top:0; width:100%; left:0; height:100%; box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.5); transition:all ease-in-out 0.2s;}
.landing_sidebar .link_list .thum img {z-index:-1; position:absolute; top:0; left:0; width:100%; height:100%;}
.landing_sidebar .link_list .txt {transition:all ease-in-out 0.2s; font-size:14.5px; color:#cccccc; letter-spacing:0.03em; font-family:var(--osw); line-height:1.14; min-height:7.2rem; padding:1rem 0; display:flex; align-items:center; justify-content:center; word-break: break-word; font-weight: 500;}
.landing_sidebar .link_list .bg_color {z-index:-1; transition:all ease-in-out 0.2s; position:absolute; opacity:0; top:-1px; left:0; bottom:0; right:0; height: calc(100% + 2px);}
.landing_sidebar .link_list .line {position:absolute; top:0; width:0.6rem; left:0; height:0; background:#ee0000; transition:all ease-in-out 0.3s;}
.landing_sidebar .link_list li:hover .bg_color {background:#ee0000; opacity:0.2;}
.landing_sidebar .link_list li:hover .thum:before {box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 1);}
.landing_sidebar .link_list li.act .bg_color {background:#ee0000; opacity:0.3;}
.landing_sidebar .link_list li.act .thum:before {box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 1);} 
.landing_sidebar .link_list li.act .txt {color:#fff;}
.landing_sidebar .link_list li.act .line {height: calc(100% + 2px); top:-1px;}
.landing_sidebar .s_link {position:absolute; left:0; bottom:0; right:0; top:0; text-indent:-99999px; z-index:10; background:#ffffff; opacity: 0; filter: alpha(opacity=0); font-size:0;}

.landing_sidebar .sns_wrap {height:92px; width:100%; position:absolute; bottom:0; left:0; right:0; padding:1.8rem;}
.landing_sidebar .sns_wrap ul {height:100%; width:100%; display:flex; align-items:center; flex-wrap: wrap; justify-content: center;}
.landing_sidebar .sns_wrap li {display:inline-block; vertical-align:top; margin:0 2px;}
.landing_sidebar .sns_wrap ul a {transition:all ease-in-out 0.2s; display:block; width:36px; height:36px; font-size:0; color:transparent; background-repeat:no-repeat; background-position:0 0; background-repeat:no-repeat; opacity:0.4; background-size:100% auto;}
.landing_sidebar .sns_wrap .sns_fb a {background-image:url('/images/common/event/multi_landing/sns_fb.png');} 
.landing_sidebar .sns_wrap .sns_it a {background-image:url('/images/common/event/multi_landing/sns_it.png');} 
.landing_sidebar .sns_wrap .sns_dc a {background-image:url('/images/common/event/multi_landing/sns_dc.png');} 
.landing_sidebar .sns_wrap .sns_yt a {background-image:url('/images/common/event/multi_landing/sns_yt.png');} 
.landing_sidebar .sns_wrap .sns_tt a {background-image:url('/images/common/event/multi_landing/sns_tt.png');} 
.landing_sidebar .sns_wrap li a:hover {opacity:1;}

.landing_controls {position:fixed; top:2.4rem; right:2.4rem; font-size:0; z-index:99; }
.landing_controls > a {display:inline-block; vertical-align:top;}
.landing_controls .btn_home > span {background-image:url('/images/common/event/multi_landing/icon_home.png');}
.landing_controls .btn_today {width:auto; margin-left:1.2rem; font-family:var(--osw); text-transform:uppercase; color:#fff; letter-spacing:0.02em; font-weight:500; padding-right:2.4rem; font-size:17px;}
.landing_controls .btn_today > span {display:inline-block; vertical-align:middle; background-image:url('/images/common/event/multi_landing/icon_close.png'); margin-right:1.2rem;}
.landing_controls .btn_today font {display:inline-block; vertical-align:middle; margin-top: -0.01rem; min-width:133px;}

.landing_sidebar .btn_close {position:absolute; top:2.4rem; right:-48px; background:rgba(21, 21, 21, 0.6);}
.landing_sidebar .btn_close > span {background-image:url('/images/common/event/multi_landing/icon_onoff.png'); transform:scaleX(-1); background-color:#ffff00; background-position:0 0;}
.landing_sidebar .btn_close > span:before {background-image:none;}
.landing_sidebar .btn_close > span:after {box-shadow: inset 0 0 0 1px #ffff00;}
.landing_sidebar .btn_close.open > span {transform:none;}
.landing_sidebar .btn_close:hover {background-color:#000; }
.landing_sidebar .btn_close:hover > span {animation:none; background-position:center 100%; background-size: 100% auto; background-color: rgba(0, 0, 0, 0);}

.landing_sidebar .os-scrollbar-handle {background: rgba(255, 255, 255, 0.2) !important; width:0.6rem !important;}
.landing_sidebar .os-scrollbar-vertical {right: 0.6rem !important; top: 0.6rem !important;  bottom:0.6rem !important;}

@keyframes step {from {background-position: 0 0;} to {background-position: 0 -108px;}}

/* white */
.white .btn_ld {background:#dddddd;}
.white .btn_ld:hover {background:#fff;}
.white .btn_ld > span:after {box-shadow: inset 0 0 0 1px #000;}
.white .btn_ld > span:before {background: url(/images/common/event/multi_landing/btn_ld_b.png) center center no-repeat; background-size:100% auto;}
.white .btn_home > span {background-image:url('/images/common/event/multi_landing/icon_home_b.png');}
.white .btn_today {color:#434343;}
.white .btn_today > span {background-image:url('/images/common/event/multi_landing/icon_close_b.png');}
.white .btn_today:hover {color:#000;}

.white .btn_home:hover > span {background-image:url('/images/common/event/multi_landing/icon_home_b_on.png');}
.white .btn_today:hover > span {background-image:url('/images/common/event/multi_landing/icon_close_b_on.png');}


/*** max-width 1023 ***/
@media screen and (max-width: 1023px) {
.landing_controls {right:0; display:none;}

.btn_ld {width:36px; height:36px; padding:3px;}
.btn_ld > span {width:30px; height:30px;}

.landing_sidebar {width: calc(100% - 320px); padding-top:54px;}
.landing_sidebar .bi_wrap {display:none;}
.landing_sidebar .bi_wrap .bi img {max-width:24rem; width:100%;}
.landing_sidebar .btn_close { top:0; width:54px; height:54px; right:-54px; padding:8px;}
.landing_sidebar .btn_close > span {width:100%; height:100%;}
.landing_sidebar .landing_controls {position:absolute; left:0; top:9px; padding:0 8px; display:flex; align-items:center; justify-content:space-between;}
.landing_sidebar .landing_controls > a {box-shadow:inset 0 0 0 1px rgba(255, 255, 255, 0.5);}
.landing_sidebar .landing_controls .btn_today {padding-right:3rem;}
.landing_sidebar .landing_controls .btn_today > span {margin-right:2rem;}
.landing_sidebar .landing_controls .btn_today font {min-width:0;}
.landing_sidebar .link_list li {padding:2rem 3rem; display:flex; align-items:center; justify-content:flex-start;}
.landing_sidebar .link_list .thum {flex-shrink: 0; width: 168px; display:inline-block;}
.landing_sidebar .link_list .txt {flex-grow: 1; text-align:left; padding-left:3rem; line-height:1.3; display:inline-block; min-height:0;}
		
@keyframes step {from {background-position: 0 0;} to {background-position: 0 -90px;}}
}

/*** max-width 768 ***/
@media screen and (max-width: 768px) {
html {font-size:32%;}	

.landing_sidebar {width: calc(100% - 54px);}
.landing_sidebar .btn_close {padding:1.8rem;}
.landing_sidebar .landing_controls { top:1.8rem; padding:0 2.4rem;}
.landing_sidebar .landing_controls .btn_today {font-size:2.8rem;}
.landing_sidebar .link_list .txt { font-size:2.85rem; }
.landing_sidebar .link_list .thum {width: 100px;}	
.landing_sidebar .link_list li {padding:4rem; }
.landing_controls .btn_today {font-size:2.3rem;}
}

@media screen and (max-width: 370px) {
.landing_sidebar .link_list li {padding:3rem;}	
.landing_sidebar .link_list .txt {font-size:2.3rem;}
}