@charset "utf-8";

/* 遅延読み込み用フェードイン */
.WorksList .yearContents li > .inner > .inner > a .thum > .inner {
	transition:opacity .6s;
	opacity:0;
}
.WorksList .yearContents li > .inner > .inner > a .thum.lazyloaded > .inner {
	opacity:1;
}





/*--------------------------------------------------------------------------------------------------------------------------------------------------------------
作品履歴
--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.Layout2Colum.-work_history .Layout2Colum__nav { width:136px; } /* 追従エリアの横幅 */





/* 左メニュー */
.WorksMenu { width:136px; height:100vh; } /* WorksHistoryとWorksHistoryの比較 */
.WorksMenu > .inner { width:100%; height:100vh; position:relative; }
/* 年度 */
.WorksMenu__year { width:calc(100% - 4px); height:calc(100% - 80px); box-sizing:border-box; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.WorksMenu__year > .inner { display:table; width:100%; height:100%; }
.WorksMenu__year > .inner > ul { width:100%; height:100%; display:table-cell; vertical-align:middle; }
.WorksMenu__year > .inner > ul > .year {}
.WorksMenu__year > .inner > ul > .year > a { display:block; text-decoration:none; color:inherit; overflow:hidden; height:20px; position:relative; }
/* テキスト */
.WorksMenu__year > .inner > ul > .year > a > .inner { font-family:'Roboto', sans-serif; text-align:center; position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:2; transition:all .1s;  font-size:12px; color:rgba(255,255,255,.7); }
/* アクティブ時テキスト */
.WorksMenu__year > .inner > ul > .year.-active > a > .inner { font-size:20px; }
.hover .WorksMenu__year > .inner > ul > .year > a:hover > .inner { font-size:20px; }
/* ホバー時ライン */
.hover .WorksMenu__year > .inner > ul > .year > a::after { content:""; display:block; width:0%; height:1px; background:rgba(255,255,255,1); position:absolute; top:50%; left:50%; transform:translateX(-50%) translateY(-50%); z-index:1; }
.hover .WorksMenu__year > .inner > ul > .year > a:hover::after { width:100%; background:rgba(255,255,255,.1); transition:all .6s cubic-bezier(.2,1,.20,1); }
.hover .WorksMenu__year > .inner > ul > .year.-active a { pointer-events:none; }

.normal .WorksMenu__year > .inner > ul > .year.-active > a > .inner { color:rgba(255,255,255,.9); }
.normal .hover .WorksMenu__year > .inner > ul > .year > a:hover > .inner { color:rgba(255,255,255,.9); }

.dark .WorksMenu__year > .inner > ul > .year.-active > a > .inner { color:rgba(255,255,255,.9); }
.dark .hover .WorksMenu__year > .inner > ul > .year > a:hover > .inner { color:rgba(255,255,255,.9); }



@media screen and (max-width:1023px) {
	.WorksMenu__year { width:100%; height:calc(100% - 104px); padding:40px 0; box-sizing:border-box; position:relative; }
	.WorksMenu__year > .inner > ul > .year > a { height:32px; }
	.WorksMenu__year > .inner > ul > .year > a > .inner { font-size:16px; }
	.WorksMenu__year > .inner > ul > .year.-active > a > .inner { font-size:24px; }
	.hover .WorksMenu__year > .inner > ul > .year > a:hover > .inner { font-size:24px; }

	.WorksMenu > .inner::before { content:""; display:block; width:100%; height:40px; position:absolute; top:64px; left:0; z-index:1000; }
	.normal .WorksMenu > .inner::before {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#223a5f+0,223a5f+100&1+0,0.7+50,0+100 */
		background: -moz-linear-gradient(top, rgba(34,58,95,1) 0%, rgba(34,58,95,0.7) 50%, rgba(34,58,95,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(34,58,95,1) 0%,rgba(34,58,95,0.7) 50%,rgba(34,58,95,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(34,58,95,1) 0%,rgba(34,58,95,0.7) 50%,rgba(34,58,95,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#223a5f', endColorstr='#00223a5f',GradientType=0 ); /* IE6-9 */
	}
	.dark .WorksMenu > .inner::before {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#333333+0,333333+100&1+0,0.7+50,0+100 */
		background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,0.7) 50%, rgba(51,51,51,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(51,51,51,0.7) 50%,rgba(51,51,51,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(51,51,51,1) 0%,rgba(51,51,51,0.7) 50%,rgba(51,51,51,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#00333333',GradientType=0 ); /* IE6-9 */
	}

	.WorksMenu > .inner::after { content:""; display:block; width:100%; height:40px; position:absolute; bottom:40px; left:0; z-index:2; }
	.normal .WorksMenu > .inner::after {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#223a5f+0,223a5f+100&0+1,0.7+50,1+100 */
		background: -moz-linear-gradient(top, rgba(34,58,95,0) 0%, rgba(34,58,95,0) 1%, rgba(34,58,95,0.7) 50%, rgba(34,58,95,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(34,58,95,0) 0%,rgba(34,58,95,0) 1%,rgba(34,58,95,0.7) 50%,rgba(34,58,95,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(34,58,95,0) 0%,rgba(34,58,95,0) 1%,rgba(34,58,95,0.7) 50%,rgba(34,58,95,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00223a5f', endColorstr='#223a5f',GradientType=0 ); /* IE6-9 */
	}
	.dark .WorksMenu > .inner::after {
		/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#333333+0,333333+100&0+1,0.7+50,1+100 */
		background: -moz-linear-gradient(top, rgba(51,51,51,0) 0%, rgba(51,51,51,0) 1%, rgba(51,51,51,0.7) 50%, rgba(51,51,51,1) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(51,51,51,0) 0%,rgba(51,51,51,0) 1%,rgba(51,51,51,0.7) 50%,rgba(51,51,51,1) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(51,51,51,0) 0%,rgba(51,51,51,0) 1%,rgba(51,51,51,0.7) 50%,rgba(51,51,51,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00333333', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
	}

}



/* リストセクション全体 */
.WorksHistory { width:100%; } /* WorksHistoryとWorksHistoryの比較 */
.WorksHistory > .inner { overflow:hidden; }







/* リスト */
.WorksList {}



/* 年度タイトル */
.WorksList .yearTitle { display:flex; justify-content:center; align-items:center; height:240px; border-bottom:1px solid #ccc; }
.WorksList .yearTitle > .inner { position:relative; }
.WorksList .yearTitle > .inner > .ttl { display:block; font-family:'Roboto', sans-serif; font-weight:400; font-size:16px; letter-spacing:.2em; text-indent:.2em; text-align:center; margin-bottom:8px; }
.WorksList .yearTitle > .inner > .category { display:block; font-family:'Roboto', sans-serif; font-weight:400; font-size:12px; letter-spacing:.2em; text-indent:.2em; text-align:center; }
.WorksList .yearTitle.noTitle > .inner::after { content:"Not Found"; display:block; padding-top:8px; font-size:11px; color:#cc0000; opacity:1; text-align:center; letter-spacing:.2em; text-indent:.2em; }



/*カラーモード*/
.normal .WorksList .yearTitle { border-color:rgba(0,0,0,.1); }
.normal .WorksList .yearTitle.noTitle > .inner::after { color:#cc0000; }

.dark .WorksList .yearTitle { border-color:rgba(255,255,255,.1); }
.dark .WorksList .yearTitle.noTitle > .inner::after { color:#ffff00; }
.dark .WorksList .yearTitle > .inner > .ttl { color:#AA8B5D; }
.dark .WorksList .yearTitle > .inner > .category { color:#AA8B5D; }

@media screen and (max-width:1600px) { /* pc3 macbookpro15 */ }
@media screen and (max-width:1400px) { /* pc2 macbookpro13 */ }
@media screen and (max-width:1199px) { /* pc1 tablet横表示 ＆ PC小 */ }
@media screen and (max-width:1023px) { /* tablet tablet */ }
@media screen and (max-width:767px) { /* sp_3 6Plus */
	.WorksList .yearTitle { height:160px; }
}
@media screen and (max-width:413px) { /* sp_2 6 */ }
@media screen and (max-width:374px) { /* sp_1 5 */ }







/* 各リスト */
.WorksList {}
.WorksList .yearContents { overflow:hidden; }
.WorksList .yearContents > ul { margin-right:-1px; margin-bottom:-1px; /*position:relative;*/ display:flex; flex-wrap:wrap; }
.WorksList .yearContents > ul > li { width:33.333%; /*content:""; display:block; width:100%; height:1px; position:absolute; bottom:0; left:0;*/ border-right:1px solid #ccc; border-bottom:1px solid #ccc; padding:16px; box-sizing:border-box; }
.WorksList .yearContents > ul > li > .inner {}
.WorksList .yearContents > ul > li > .inner > .inner {}
.WorksList .yearContents > ul > li > .inner > .inner > a { color:inherit; text-decoration:none; }
.WorksList .yearContents > ul > li > .inner > .inner > a.noLink { pointer-events:none; display:block; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead { display:flex; width:100%; margin-bottom:8px; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea { width:40%; max-width:240px; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea > .thum { overflow:hidden; background:#151515; position:relative; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea > .thum::after { content:""; display:block; padding-top:100%; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea > .thum > .inner { position:absolute; top:0; left:0; width:calc(100% + 2px); height:calc(100% + 2px); }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea > .thum > .inner > img { width:100%; height:100%; object-fit:contain; font-family:'object-fit:contain;'; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea > .thum > .inner > img.cover { object-fit:cover; font-family:'object-fit:cover;'; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea > .thum > .inner > img { transition:transform .2s; }
.hover .WorksList .yearContents > ul > li > .inner > .inner > a:hover > .listHead { background:rgba(0,0,0,.05); }
.hover .WorksList .yearContents > ul > li > .inner > .inner > a:hover > .listHead > .thumArea > .thum > .inner > img { transform:scale(1.1) rotate(0.1deg); opacity:.7; }

.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea { width:60%; display:flex; justify-content:left; align-items:center; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner { padding:0 0 0 8px; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div { margin-bottom:8px; font-feature-settings:"palt"; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div:last-child { margin-bottom:0; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.label { font-size:12px; line-height:1.3; }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.ttl { font-size:14px; line-height:1.3; font-weight:bold;  }
.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.copy { font-size:10px; line-height:1.3; }

.WorksList .yearContents > ul > li > .inner > .inner > .listBody { padding:8px; }
.WorksList .yearContents > ul > li > .inner > .inner > .listBody > .textArea {}
.WorksList .yearContents > ul > li > .inner > .inner > .listBody > .textArea > .text { font-size:12px; line-height:1.5; margin-bottom:-3px; }
.WorksList .yearContents > ul > li > .inner > .inner > .listBody > .iconArea { font-size:0; text-align:right; margin:0 0 -8px -8px; padding-top:8px; min-height:52px; }
.WorksList .yearContents > ul > li > .inner > .inner > .listBody > .iconArea > .icon { display:inline-block; width:44px; height:44px; border-radius:50%; overflow:hidden; position:relative; z-index:1; margin:0 0 8px 8px; }
.WorksList .yearContents > ul > li > .inner > .inner > .listBody > .iconArea > .icon > a { display:inline-block; }
.WorksList .yearContents > ul > li > .inner > .inner > .listBody > .iconArea > .icon > a > img { transition:transform .2s; }
.hover .WorksList .yearContents > ul > li > .inner > .inner > .listBody > .iconArea > .icon > a:hover > img { transform:scale(1.2) rotate(0.1deg); }


/*カラーモード*/
.normal.hover .WorksList .yearContents > ul > li > .inner > .inner > a:hover > .listHead { background:rgba(0,0,0,.05); }
.dark.hover .WorksList .yearContents > ul > li > .inner > .inner > a:hover > .listHead { background:rgba(0,0,0,.3); }

.normal .WorksList .yearContents > ul > li > .inner > .inner > .listBody > .textArea { color:rgba(0,0,0,.7); }
.dark .WorksList .yearContents > ul > li > .inner > .inner > .listBody > .textArea { color:rgba(255,255,255,.7); }

.normal .WorksList .yearContents > ul > li > .inner > .inner > .listBody { background:rgba(0,0,0,.05); }
.dark .WorksList .yearContents > ul > li > .inner > .inner > .listBody { background:rgba(255,255,255,.05);  }

.normal .WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.label { color:rgba(0,0,0,.7); }
.normal .WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.ttl { color:rgba(0,0,0,.9); }
.normal .WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.copy { color:rgba(0,0,0,.7); }

.dark .WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.label { color:rgba(255,255,255,.7); }
.dark .WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.ttl { color:#AA8B5D; }
.dark .WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.copy { color:rgba(255,255,255,.7); }

.normal .WorksList .yearContents > ul > li { border-color:rgba(0,0,0,.2); }
.dark .WorksList .yearContents > ul > li { border-color:rgba(255,255,255,.1); }



@media screen and (max-width:1600px) { /* pc3 macbookpro15 */ 
	.WorksList .yearContents > ul > li { width:50%; }
}

@media screen and (max-width:767px) { /* sp_3 6Plus */
	.WorksList .yearContents > ul > li { width:100%; }
/*
	.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .thumArea { width:28%; }
	.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea { width:72%; }
	.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div { margin-bottom:4px; }
	.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.label { font-size:10px; line-height:1.2; }
	.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.ttl { font-size:12px; line-height:1.2; font-weight:bold; }
	.WorksList .yearContents > ul > li > .inner > .inner > a > .listHead > .textArea > .inner > div.copy { font-size:9px; line-height:1.2; }
*/
}







.WorksList .is-hide { display:none; height:0px; } /* 対象以外のエリアを隠す */






/*
.normal .WorksMenu { background:rgba(34,58,95,1); }
.normal .yearTitle { background:#fff; border-bottom:1px solid #ccc; }
.normal .WorksList .yearContents .listHead { background:#f5f5f5; }
.normal .WorksList .yearContents .listHead .textArea {}
.normal .WorksList .yearTitle > .inner { color:#333; }
.normal .WorksList .yearTitle > .category { color:#333; }

.normal .WorksList .yearContents li { border-right:1px solid #ccc; border-bottom:1px solid #ccc; box-sizing:border-box; }
.normal .WorksList .yearContents li > .inner {}
.normal .WorksList .yearContents li > .inner > .inner > a::after {border-top:1px solid #fff; border-left:1px solid #fff; }

.normal .WorksList .yearContents ul::before { background:#ccc; }
.normal .WorksList .yearTitle.noTitle { background:#ccc; border-bottom:1px solid #fff; }


.normal.hover .WorksList .yearContents li > .inner > .inner > a:hover img { transform:scale(1.1) rotate(0.1deg); opacity:.7; }
.normal.hover .WorksList .yearContents li > .inner > .inner > a:hover .listHead { background:#eee; }


.dark .WorksMenu { background:#333; }
.dark .yearTitle { background:#222; border-bottom:1px solid #5F5F5F; }
.dark .WorksList .yearContents .listHead { background:#333; }
.dark .WorksList .yearContents .listHead .textArea {}
.dark .WorksList .yearTitle > .inner { color:#AA8B5D; }
.dark .WorksList .yearTitle > .category { color:#AA8B5D; }
.dark .WorksList .yearContents li > .inner { border-right:1px solid #5F5F5F; border-bottom:1px solid #5F5F5F; box-sizing:border-box; }
.dark .WorksList .yearContents li > .inner > .inner > a::after { border-top:1px solid #222; border-left:1px solid #222; }

.dark .WorksList .yearContents ul::before { background:#5F5F5F; }
.dark .WorksList .yearTitle.noTitle { background:#111; border-bottom:1px solid #5F5F5F; }


.dark.hover .WorksList .yearContents li > .inner > .inner > a:hover img { transform:scale(1.1); opacity:.7; }
.dark.hover .WorksList .yearContents li > .inner > .inner > a:hover .listHead { background:#2C2C2C; }
*/





/*ソートエリア*/
.WorksMenu .selectArea { padding:16px; }
.WorksMenu .selectArea .search-box_label { display:block; margin-bottom:8px; font-size:10px; font-family:'Roboto',sans-serif; font-feature-settings:"palt"; font-weight:400; letter-spacing:.08em; }
.WorksMenu .selectArea .display_selectedArea { position:relative; z-index:1000; }
/*選択中のアイテム*/
.WorksMenu .selectArea .display_selectedItem { display:flex; justify-content:left; align-items:center; width:100%; height:32px; box-sizing:border-box; padding:0 20px 0 8px; cursor:pointer; font-family:'Roboto',sans-serif; font-weight:500; font-feature-settings:"palt"; font-size:10px; line-height:1.1; position:relative; }
.WorksMenu .selectArea .display_selectedItem::after { content:""; display:block; width:5px; height:10px; position:absolute; top:50%; right:8px; transform:translateY(-50%); }
/*リスト*/
.WorksMenu .selectArea .select_box { display:none; position:absolute; top:32px; left:0; z-index:1; }
.WorksMenu .selectArea .select_box { overflow:hidden; width:100%; }
.WorksMenu .selectArea .select_box li { position:relative; cursor:pointer; padding:5px 8px; min-height:28px; display:flex; justify-content:left; align-items:center; font-size:10px; line-height:1.1; font-family:'Roboto',sans-serif; font-feature-settings:"palt"; cursor:pointer; box-sizing:border-box; }
.WorksMenu .selectArea .select_box li::after { content:""; display:block; width:calc(100% - 16px); height:1px; position:absolute; top:0; left:0; right:0; margin:auto; }
.WorksMenu .selectArea .select_box li:last-child { border-bottom:none; }
/* normal */
.normal .WorksMenu .selectArea .search-box_label { color:rgba(255,255,255,.7); }
.normal .WorksMenu .selectArea .display_selectedItem { color:#223A5F; background:#fff; }
.normal .WorksMenu .selectArea .display_selectedItem::after { opacity:1; background:url(/static/img/library/arrow.png) 0 0 no-repeat; background-size:5px 10px; }
.normal .WorksMenu .selectArea .select_box { color:rgba(0,0,0,.7); background:#fff; }
.normal .WorksMenu .selectArea .select_box li::after { background:rgba(0,0,0,.1); }
.normal .WorksMenu .selectArea .select_box li.selected { background:#eee; }
.normal.hover .WorksMenu .selectArea .display_selectedItem:hover { background:#eee; }
.normal.hover .WorksMenu .selectArea .select_box li:hover { background:#eee; }
/* dark */
.dark .WorksMenu .selectArea .search-box_label { color:rgba(255,255,255,.7); }
.dark .WorksMenu .selectArea .display_selectedItem { color:rgba(255,255,255,.7); background:#222; }
.dark .WorksMenu .selectArea .display_selectedItem::after { opacity:.7; background:url(/static/img/library/arrow_white.png) 0 0 no-repeat; background-size:5px 10px; }
.dark .WorksMenu .selectArea .select_box { color:rgba(255,255,255,.7); background:#222; }
.dark .WorksMenu .selectArea .select_box li::after { background:rgba(255,255,255,.1); }
.dark .WorksMenu .selectArea .select_box li.selected { background:#111; }
.dark.hover .WorksMenu .selectArea .display_selectedItem:hover { background:#111; }
.dark.hover .WorksMenu .selectArea .select_box li:hover { background:#111; }
@media screen and (max-width:1600px) { /* pc3 macbookpro15 */ }
@media screen and (max-width:1400px) { /* pc2 macbookpro13 */ }
@media screen and (max-width:1199px) { /* pc1 tablet横表示 ＆ PC小 */ }
@media screen and (max-width:1023px) { /* tablet tablet */ }
@media screen and (max-width:767px) { /* sp_3 6Plus */ }
@media screen and (max-width:413px) { /* sp_2 6 */ }
@media screen and (max-width:374px) { /* sp_1 5 */ }





.WorksMenuToggle { display:none; }
@media screen and (max-width:1023px) { /* tablet */
	.Layout2Colum.-work_history .Layout2Colum__contents { position:relative; min-height:100vh; }
	.WorksMenu { background:#223A5F; position:fixed; top:0; left:0; width:136px; box-sizing:border-box; height:100vh; z-index:1000; display:flex; align-items:center; transform:translate3d(-136px,0,0); transition:transform .3s; }
	.WorksMenu.-active { transform:translate3d(0,0,0); }
	.WorksMenuCover { position:fixed; top:0; left:0; z-index:999; background:#000; width:0; height:0; opacity:0; transition:opacity .3s; }
	.WorksMenu.-active + .WorksMenuCover { width:100%; height:100vh; opacity:.3; }
	.WorksMenu form { width:100%; }

	.WorksMenuToggle { display:flex; align-items:center; justify-content:center; width:40px; height:40px; cursor:pointer; position:absolute; top:16px; left:16px; z-index:998; box-sizing:border-box; }
	.WorksMenuToggle i { font-size:12px; }
	.normal	.WorksMenuToggle{ color:rgba(0, 0, 0, .7); border:1px solid rgba(0,0,0,.3); background:rgba(255,255,255,1); }
	.dark .WorksMenuToggle { color:rgba(255, 255, 255, .7); border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,0); }

	.normal .WorksMenu { background:#223A5F; }
	.dark .WorksMenu { background:#333; }

	.WorksMenuToggle { position:absolute; top:16px; left:16px; transition:all .2s; }
	.WorksMenuToggle.-fixed { position:fixed; top:16px; left:16px; }
	.normal .WorksMenuToggle.-fixed { background:rgba(0,0,0,.3); border:none; color:rgba(255,255,255,1); }
	.dark .WorksMenuToggle.-fixed { background:rgba(0,0,0,.3); }

}