@charset "utf-8";

h1 {position: fixed; left: 5%; top: 30px; z-index: 1000; width:260px; height: auto;}
.box {padding:170px 0; width: 100%;}

@media screen and (max-width : 1023px ){
	h1 {left: 6%; top: 4%; width: 50%}
	.box {padding:120px 0;}
}

@media screen and (max-width : 768px ){
	 h1 {left: 4%; top: 3%; width:65%; }
}

.none {display:none}

#mainArea {width: 100%; min-height: calc(100% - 80px);}

#tab {width: 90%; margin: 0 auto 80px; color: #FFF; display: flex;}
#tab li { width: 33.333%; text-align: center; border-bottom: 2px solid #FFF; padding: 0 0 20px 0;}
#tab .active:hover {cursor: pointer; color: #FFF; transition: all 0.5s; }
#tab .active {border-bottom: 1px #999 solid; color: #999}

.box2 {margin:0 auto; width: 90%; overflow: hidden; background: url("../img/works/works.svg") no-repeat; background-size: 500px; padding-top: 40px}

.box2 h3 {color: #FFF; font-size: 24px; display: flex; align-items: center;}
.box2 h3:before {content:""; width:20px; height: 1px; background-color: #FFF; margin-right: 10px; float: left;}

.box2 h4 {color: #FFF; font-size: 16px; margin-bottom: 40px}
.box2 {font-size: 12px;}

.box2 .recording, .box2 .other {margin:80px 0 0; width: 100%; color: #FFF; word-wrap: break-word; display: flex; flex-direction: column;}

.box2 .recording .inner {display: flex; flex-direction: column; margin-bottom: 3em}
.box2 .recording .inner:last-child {margin-bottom: 0}
.box2 .recording .category {font-size: 14px; margin-bottom: 10px}
.box2 .recording .work {line-height: 2}

.box2 .other .inner {display: flex; margin-bottom: 2em}
.box2 .other .inner:last-child {margin-bottom: 0}
.box2 .other .date {width: 20%;}
.box2 .other .name {width: 20%;}
.box2 .other .place {width: 60%;}

.box2 .site p {margin-bottom: 1em; line-height: 2}
.box2 .site {margin-bottom: 60px;}

@media screen and (max-width : 1023px ){

	#tab {width: 88%; margin: 0 auto 50px; flex-direction: column; font-size: 16px;}
	#tab li {width: 100%; text-align: left; padding: 16px 0; display: block; position: relative;}
	#tab li:after {content: ''; width: 6px; height: 6px; border: 0; border-top: solid 1px #fff; border-right: solid 1px #fff; transform: rotate(135deg); position: absolute; top: calc(50% - 5px); right: 10px;}
	
	#mainArea {min-height: calc(100% - 40px);}
	
	.box2 {margin:0 6%; width: 88%;}
	
	.box2 .other .inner {flex-wrap: wrap; margin-bottom: 30px; height: auto;}
	.box2 .other .date {width: 100%; font-weight: 300; padding-bottom: 8px;}
	.box2 .other .name {width: 100%; font-size: 14px; padding-bottom: 6px;}
	.box2 .other .place {width: 100%; line-height: 1.6em;}
}

@media screen and (max-width : 768px ){
	
	h2 img {height:12vw; width: auto; margin:0 4vw 40px; position: relative;} 
	
	#tab{width: 92%;}
	
	.box2 {margin:0 4vw; width: 92%; background-size: 320px; padding-top: 20px}
	
	.box2 .recording, .box2 .other {margin:50px 0 0;}

	.box2 h3 {line-height: 1.2}
	
}