.clrfx:after {
    content:" ";
    display:block;
    clear:both;
}

/*

px   %
10 = 77 
11 = 85  
12 = 93 (was 93)  
13 = 100  
14 = 108 (was 107) 
15 = 116 (was 114) 
16 = 123.1 (was 122) 
17 = 131 (was 129) 
18 = 138.5 (was 136) 
19 = 146.5 (was 144) 
20 = 153.9 (was 152) 
21 = 161.6 (was 159) 
22 = 167
23 = 174
24 = 182
25 = 189
26 = 197

*/

/*====================================

ブラウザのデフォルトリセット　初期設定

====================================*/
html, body, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p,
header, hgroup, nav, section, article, aside, footer, figure, figcaption , div {
    margin: 0;
    padding: 0;
    font-size: 100%;
	list-style:none;
	line-height:0;
}
body {
	text-align: center;
	background:#000000;
	line-height: 1;
	font-style: normal;
	font-weight: 200;
	font-size:100%;
	color:#000000;
	-webkit-text-size-adjust: none;
}

/* Yu Gothic for Windows */
@font-face {
  font-family: MyYuGothic;
  font-weight: normal;
  src: local(YuGothic-Medium),
       local("Yu Gothic Medium"); /* for Chrome */
}
@font-face {
  font-family: MyYuGothic;
  font-weight: bold;
  src: local(YuGothic-Bold),
       local("Yu Gothic"); /* for Chrome */
}

body {
  font-family: sans-serif;
}
body[data-os^="Windows"] {
  font-family: "Noto Sans CJK JP", Meiryo, sans-serif;
}
body[data-os="Windows 10"] {
  font-family: "Noto Sans CJK JP", MyYuGothic, Meiryo, sans-serif;
}
body[data-os^="Mac OS"] {
  font-family: "Noto Sans Japanese", YuGothic, sans-serif;
}
body[data-os^="iOS"] {
  font-family: sans-serif;
}
body[data-os^="Android"] {
  font-family: Roboto, sans-serif;
}
body[data-os^="Android 4"] .change ,
body[data-os^="Android 5"] .change {
  /*font-family: Roboto, MotoyaLCedar, sans-serif;*/
  font-family: MotoyaLCedar, sans-serif;
}

/*******************************************************/

@media screen and (max-width : 800px) {
	video {
		display: none;
	}
}

/****loading***/
.loading_wrap {
	background:#000000;
	height:100%;
	width:100%;
	display:table;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
}

.loading {
	position:fixed;
	top:50%;
	left:50%;
	margin:-27.5px 0 0 -47.5px;
	z-index:2000;
}


.container {
	width:100%;
	height:100%;
	position:fixed;
}

#monokromprofile .container {
	position: relative;
}

.boxMusician {
	background-image: url(../img/bg_profile_sp.png);/*background-image:url(../img/00102_1_2.gif);*/
	background-size:cover !important;
	background-position:center center;
	background-repeat: no-repeat;
	width:50%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	transition-delay:.1s;
	-webkit-transition-delay:.1s;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
}

#musicprofile .boxMusician {
	background-image:none;
	z-index: 2;
	height: auto;
	width: auto;
	position: fixed;
	left:2%;
	top:5%;
}

canvas#particle {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

.boxMusicianHeader {
	color:#ffffff;
	position:absolute;
	top:5%;
	left:5%;
	height:100%;
}

@media screen and (max-width : 800px) {
	.boxMusicianHeader {
		top:30px;
	}
}
	

.boxMusicianHeader h2 {
	line-height:1;
	max-width:250px;
	padding:0;
	position:relative;
	text-align:center;
	margin:0 auto;
	width:100%;
	top:50%;
	transform:-webkit-translateY(-50%);
	transform:translateY(-50%);
	opacity:0;
	transition:1s;
	-moz-transition:1s;
	-webkit-transition:1s;
}

.boxMusicianHeader h2.fadeInH2 {
	opacity:1;
	top:50%;
	z-index: 2000;
}

.boxMusicianHeader h2 img {
	width:100%;
	height:auto;
}

.boxMusicianHeader nav {
	z-index:2000;
	position:fixed;
	top:5%;
	left:2%;
}

.musician .boxMusicianHeader nav {
	position: relative;
	top:auto;
	left:auto;
	padding: 15px 0;
}

.boxMusicianHeader nav ul li {
	line-height:1;
	text-align:left;
	font-size:0.7em;
	padding:5px 0;
    font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing:3px;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.4s;
}

header nav li span {
	background-color:#0a8981;
	letter-spacing:1px;
	padding:3px 5px 2px;
	display:inline-block;
	
}

.boxMusicianHeader nav ul li a {
	color: #ffffff;
	text-decoration: none;
}

.boxMusicianHeader nav ul li:hover {
	padding:5px 10px 5px 10px;
}

.creative-p_cover {
	background-color:#000000;
	width:50%;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	z-index:101;
	-webkit-trantion:.4s;
	transition:.4s;
	-webkit-transition-delay:.1s;
	transition-delay:.1s;
	-webkit-transition-timing-function:ease-in-out;
	transition-timing-function:ease-in-out;
}

.boxCreativeP {
	position:fixed;
	right:0;
	top:0;
	height: 100%;
	width:50%;
	transition:.4s;
	-webkit-trantion:.4s;
	transition-delay:.1s;
	-webkit-transition-delay:.1s;
	transition-timing-function:ease-in-out;
	-webkit-transition-timing-function:ease-in-out;
	z-index:9999;
}

.news {
	position:fixed;
	bottom:5%;
	left:2%;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	z-index:10000;
	color:#ffffff;
	font-size:0.75em;
	letter-spacing:1px;
	text-align:left;
	width:50%;
	
}

.news span {
	line-height:2;
	display:block;
}

.news span a {
	color:#ffffff;
	text-decoration:none;
}
	

@media screen and (max-width:600px) {
	
	.news {
		display:none;
	}
	
	#ddddd {
		display: none;
	}
	
	#top .boxMusicianHeader h2 {
		max-width: 180px;
		top:70%;
	}
	
	#top .boxMusicianHeader nav {
	left:5%;
	}

	#top .boxMusician {
		width: 100%;
		height: 50%;
		position: absolute;
	}
	
	#top .creative-p_cover{
		width: 100%;
		height: 50%;
		top:auto;
		bottom: 0;
	}
	
	#top .boxCreativeP {
		width: 100%;
		height: 50%;
		bottom:0;
		top:auto;	
	}
	
	#top .boxCreativeP h2 {
		max-width: 150px;
		top:30%;
	}
}

.creative .boxCreativeP {
	background-image:none;
	z-index: 99999;
	height: auto;
	width: auto;
	position: fixed;
	bottom:25px;
	right:25px;
}

.creative .boxCreativePHeader h1 {
	display: inline-block;
	position: fixed;
	bottom:25px;
	right:25px;
	max-width: 200px;
	width:90%;
}

.creative .boxCreativePHeader h1 img {
	width: 100%;
	height: auto;
}

.boxCreativePHeader {
	position:absolute;
	bottom:5%;
	right:5%;
	color:#ffffff;
	width:90%;
	height:90%;
	text-align:right;
}



.boxCreativePHeader h2 {
	line-height:2;
	padding:5px 0 0 0;
	max-width:280px;
	position:absolute;
	text-align:right;
	margin:0 auto 0 0;
	width:100%;
	top:52%;
	transform:translateY(-50%);
	right:0;
	opacity:0;
	transition:1s;
	-moz-transition:1s;
	-webkit-transition:1s;
}

.boxCreativePHeader h2.fadeInH2 {
	opacity:1;
	top:50%;
	transition: 1s;
	-webkit-transition:1s;
	transition-timing-function: ease-in-out;
	-webkit-transition-timing-function: ease-in-out;
}

.boxCreativePHeader h2.undercontent-open {
	top:100% !important;
}

.boxCreativePHeader h2 img {
	width:100%;
	height:auto;
}

.creative .boxCreativePHeader nav {
	display:inline-block;
}

.boxCreativePHeader nav ul {
	position:absolute;
	bottom:0;
	right:0;
}

.boxCreativePHeader ul li {
	line-height:1;
	text-align:right;
	font-size:0.7em;
	padding:5px 0px 5px 0;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing:3px;
	-moz-transition:.4s;
	-webkit-transition:.4s;
	transition:.4s;
}

.boxCreativePHeader nav ul li a {
	color: #ffffff;
	text-decoration: none;
}

.boxCreativePHeader ul li:hover {
	padding:5px 10px 5px 0;
}

.creative-p_cover.openWorksArea {
width:100%;
}

#worksList {
	position:absolute;
	z-index:101;
	top:0;
	left:0;
	color:#ffffff;
	width:100%;
}


#worksList ul {
	width:-webkit-calc(100% - 110px);
	width:calc(100% - 110px);
	margin: 0 55px;
}

#worksList li {
	line-height:1;
	text-align:left;
	padding:0;
	margin: 0;
	float:left;
	width:20%;
	position:relative;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	letter-spacing:2px;
	overflow: hidden;
}

@media screen and (max-width:1000px) {
	#worksList li {
		width: 25%;
	}
}

@media screen and (max-width:700px) {
	#worksList li {
		width: 33.33333%;
	}
}

@media screen and (max-width:499px) {
	#worksList li {
		width: 50%;
	}
}

#worksList li a {
	display: block;
	height: 100%;
	width: 100%;
	text-decoration: none;
}

#worksList li .thumbnail_cover {
	background-image:cover;
	background-position:center center;
	background-size: cover;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:20;
	opacity:0.4;
	-webkit-transition: .8s;
	-moz-transition: .8s;
	-ms-transition: .8s;
	transition: .8s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

#worksList li span {
	position:relative;
	padding: 3% 3% 0 4%;
	top:50%;
	text-align:center;
	transform:translateY(-50%);
	color:#ffffff;
	z-index:21;
	line-height:1.3;
	display:block;
	margin-top: 0;
	-webkit-transition: .4s;
	-moz-transition: .4s;
	-ms-transition: .4s;
	transition: .4s;
}

#worksList li span.span_hover {
	margin-top: -5%;
}

#works001Btn .thumbnail_cover {background-image:url(../img/works/001_bg.jpg);}
#works002Btn .thumbnail_cover {background-image:url(../img/works/002_bg.jpg);}
#works003Btn .thumbnail_cover {background-image:url(../img/works/003_bg.jpg);}
#works004Btn .thumbnail_cover {background-image:url(../img/works/004_bg.jpg);}
#works005Btn .thumbnail_cover {background-image:url(../img/works/005_bg.jpg);}
#works006Btn .thumbnail_cover {background-image:url(../img/works/006_bg.jpg);}
#works007Btn .thumbnail_cover {background-image:url(../img/works/007_bg.jpg);}
#works008Btn .thumbnail_cover {background-image:url(../img/works/008_bg.jpg);}
#works009Btn .thumbnail_cover {background-image:url(../img/works/009_bg.jpg);}
#works010Btn .thumbnail_cover {background-image:url(../img/works/010_bg.jpg);}
#works011Btn .thumbnail_cover {background-image:url(../img/works/011_bg.png);}
#works012Btn .thumbnail_cover {background-image:url(../img/works/012_bg.jpg);}
#works013Btn .thumbnail_cover {background-image:url(../img/works/013_bg.jpg);}
#works014Btn .thumbnail_cover {background-image:url(../img/works/014_bg.jpg);}
#works015Btn .thumbnail_cover {background-image:url(../img/works/015_bg.jpg);}
#works016Btn .thumbnail_cover {background-image:url(../img/works/016_bg.jpg);}
#works017Btn .thumbnail_cover {background-image:url(../img/works/017_bg.jpg);}
#works018Btn .thumbnail_cover {background-image:url(../img/works/018_bg.jpg);}
#works019Btn .thumbnail_cover {background-image:url(../img/works/019_bg.jpg);}

.grad_cover {
	width: 100%;
	height: 100%;
	position:absolute;
	top:0;
	left:0;
	z-index:21;
	opacity:0;
	-webkit-transition: .8s;
	-moz-transition: .8s;
	-ms-transition: .8s;
	transition: .8s;
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
}

#works015Btn .grad_cover {
	background: #aad7ea;
background: -moz-linear-gradient(45deg, #aad7ea 0%, #71b3e3 100%);
background: -webkit-linear-gradient(45deg, #aad7ea 0%,#71b3e3 100%);
background: linear-gradient(45deg, #aad7ea 0%,#71b3e3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aad7ea', endColorstr='#71b3e3',GradientType=1 );
}

#works > div {
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:102;
	transition:.8s;
	-webkit-trantion:.8s;
	transition-delay:.2s;
	-webkit-transition-delay:.2s;
	display:none;
	background-color:#000000;
}

.works_detail .cover {
	background-size:cover;
	background-position:center center;
	width:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0.65;
	z-index: 1;	
}

.works_detail_wrap {
	position: relative;
	z-index: 2;
	padding: 0 0 50px 0;
}


.works_detail_wrap > h2 span {
	font-size: 0.5em;
	padding: 0 0 0 20px;
	display: inline-block;
}

.works_detail {
	color:#ffffff;
	text-align:left;
	transition:2s;
	-webkit-trantion:2s;
	transition-delay:1s;
	-webkit-transition-delay:1s;
    margin: 0 55px;
}

.works_detail_open {
	top:0;
	opacity:1;
}

.works_detail .close {
	right:10%;
	position: absolute;
	top:10%;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.works_detail h2 {
	line-height:1.35;
	font-weight:normal;
	padding:50px 0 20px 0;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing:2px;
	font-size: 2.4em;
}

@media screen and (max-width:600px) {
	.works_detail h2 {
		font-size: 1.5em;
	}
}

.works_detail h3 {
	line-height:1.35;
	font-weight:normal;
	padding:0 0 20px 0;
	font-size:0.9em;
}

.works_detail p {
	line-height:1.6;
	font-size:0.7em;
	padding: 0 0 30px 0;
}

.works_detail p a {
	color: #ffffff;
}

.credit {
	padding:30px 0 0 0;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	letter-spacing: 1px;
	max-width: 500px;
}

#works001 .cover {
	background-image:url(../img/works/001_bg.jpg);
}

#works002 .cover {
	background-image:url(../img/works/002_bg.jpg);
}

#works003 .cover {
	background-image:url(../img/works/003_bg.jpg);
}

#works004 .cover {
	background-image:url(../img/works/004_bg.jpg);
}

#works005 .cover {
	background-image:url(../img/works/005_bg.jpg);
}

#works006 .cover {
	background-image:url(../img/works/006_bg.jpg);
}

#works007 .cover {
	background-image:url(../img/works/007_bg.jpg);
}

#works008 .cover {
	background-image:url(../img/works/008_bg.jpg);
}

#works009 .cover {
	background-image:url(../img/works/009_bg.jpg);
}

#works010 .cover {
	background-image:url(../img/works/010_bg.jpg);
}

#works011 .cover {
	background-image:url(../img/works/011_bg.jpg);
}

#works012 .cover {
	background-image:url(../img/works/012_bg.jpg);
}

#works013 .cover {
	background-image:url(../img/works/013_bg.jpg);
}

#works014 .cover {
	background-image:url(../img/works/014_bg.jpg);
	background-position: center top;
}

#works015 .cover {
	background-image:url(../img/works/015_bg.jpg);
	background-position: center top;
}

#works016 .cover {
	background-image:url(../img/works/016_bg.jpg);
	background-position: center top;
}

#works017 .cover {
	background-image:url(../img/works/017_bg.jpg);
	background-position: center top;
}

#works018 .cover {
	background-image:url(../img/works/018_bg.jpg);
	background-position: center top;
}

#works019 .cover {
	background-image:url(../img/works/019_bg.jpg);
	background-position: center top;
}

#works > div.topPositionMoving {
	top:0px !important;
}

#producerProfile {
	position: relative;
	padding: 100px 0;
}

.blurs {
	-webkit-filter: blur(7px);
	-ms-filter: blur(7px);
	filter: blur(7px);
}

#ogata {
	position: fixed;
	width: 100%;
	height: 100%;
	/*background-image: url(../img/ogata.png);*/
	background-position: left 30% bottom;
	background-repeat: no-repeat;
	opacity: 0.3;
}

#monokromprofile a {
	color: #ffffff;
	text-decoration: none;
}

#producerProfileWrap {
	width: 80%;
	margin: 0 auto;
}

#producerProfile .left {
	float:left;
	width:48%;
}

#producerProfile .right {
	float:right;
	width:48%;
}

@media screen and (max-width:600px){
	#producerProfile .left {
		float:none;
		width:95%;
		margin: 0 auto;
	}

	#producerProfile .right {
		float:none;
		width:95%;
		margin: 0 auto;
	}
}

#producerProfile h2 {
	color:#ffffff;
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	font-size:2em;
	padding:0 0 20px 0;
	letter-spacing:2px;
	text-align:left;
}

#producerProfile h3 {
	color:#ffffff;
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	padding:2px 0 12px 0;
	letter-spacing:1px;
	font-size:1em;
	text-align:left;
}

#producerProfile h4 {
	color:#ffffff;
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	font-size:0.9em;
	padding:10px 0 0px 0;
	text-align:left;
}

#producerProfile p {
	color:#ffffff;
	line-height:1.8;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	font-size:0.8em;
	letter-spacing:1px;
	padding:0 0 15px 0;
	text-align:left;
}

#producerProfile li {
	color:#ffffff;
	line-height:1.35;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	font-size:0.7em;
	letter-spacing:1px;
	padding:2px 0;
	text-align:left;
}

#producerProfile .close {
	line-height:1;
	color:#ffffff;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	position:absolute;
	bottom:0%;
	right:10%;
}


/*
MUSICIAN
*/
.musician {
	background-color:#0a8981;
	width:100%;
}

.soundcloud_bar {
	z-index:1000;
	position:fixed;
	bottom:0px;
	right:0px;
	width:1px;
	opacity: 0;
	height: 1px;
}

.musician .cover {
	position:fixed;
	z-index:1;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
	width:100%;
	height:100%;
	overflow:hidden;
	background-color: #0a8981;
	opacity: 0.2;
}

.musician h1 {
	display: block;
	width:95px;
}

@media screen and (max-width:600px) {
	.musician h1 {
		width:78px;
	}
}

.musician h1 img {
	width: 100%;
	height: auto;
}

.musician .cover img {
	width:120%;
	height:auto;
	display:block;
	position:absolute;
	top:0%;
	opacity:0.7;
	left:0%;
	/*animation-name: musician_cover;
	animation-duration: 15s;
	animation-timing-function: ease;
	animation-iteration-count: infinite;*/
}

@keyframes musician_cover {
0% {
	webkit-filter: blur(9px);
	-moz-filter: blur(9px);
	filter: blur(9px);
}
70%{
	webkit-filter: blur(2px);
	-moz-filter: blur(2px);
	filter: blur(2px);
}
100%{
	webkit-filter: blur(9px);
	-moz-filter: blur(9px);
	filter: blur(9px);
}
}

.musician .content_wrap {
	position:relative;
	z-index:2;
}


.musician .leftbox {
	width:200px;
	float:left;
}

.musician .centerbox {
	width:calc(50% - 150px);
	width:-webkit-calc(50% - 150px);
	float:left;
	left:150px;
	position:relative;
	padding:150px 0 0 0;
}

.centerbox p {
	 font-size: 0.85em;
}

.centerbox a {
	color: #ffffff;
}

.rightbox p {
	 font-size: 0.75em;
}

.musician .rightbox {
	width:-webkit-calc(40%);
	width:calc(40%);
	padding:320px 0 0 0;
	float:right;
	margin-right: 5%;
}

.musician h2 {
	color:#ffffff;
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	font-size:2em;
	padding:0 0 20px 0;
	letter-spacing:2px;
	text-align:left;
}

.musician h3 {
	color:#ffffff;
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	padding:2px 0 12px 0;
	letter-spacing:1px;
	font-size:1em;
	text-align:left;
}

.musicbio_wrap h3 {
	padding: 35px 0 10px 0;
	text-align: center;
}

.musician h4 {
	color:#ffffff;
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	font-size:0.9em;
	padding:0px 0 10px 0;
	text-align:left;
}

.musician p {
	color:#ffffff;
	line-height:1.8;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	padding:0 0 15px 0;
	text-align:left;
}

ul.musicbio {
	text-align:center;
	margin:0 auto;
	background-image:url(../img/musicbio_center_border.png);
	background-repeat:repeat-y;
	background-position:center top;
	padding: 0 0 100px 0;
}

.musicbio li {
	color: #ffffff;
	font-size: 0.8em;
	line-height: 1.45;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	padding: 15px 12px 10px 12px;
	max-width:320px;
	text-align:right;
	margin:0 auto 0 auto;
	padding-right:360px;
	padding-left:0;
	background-image:url(../img/musicbio_center_circle.png);
	background-repeat:no-repeat;
	background-position:center center;
}

/*.musicbio li.open {
	background-image:url(../img/musicbio_center_circle_orange.png);
}*/

.musicbio li p {
	padding: 0;
}

.musicbio li:nth-child(2n) {
	padding-left:360px;
	padding-right:0;
	text-align:left;
}

.musicbio li a {
	color: #ffffff;
	text-decoration: none;
	-webkit-transition:.4s;
	-moz-transition:.4s;
	transition: .4s;
	opacity: 1;
}

.music_btn {
	background-image: url(../img/play.png);
	background-size: 14px auto;
	background-position: right top;
	min-height: 14px;
	background-repeat: no-repeat;
	line-height: 1;
	padding: 3px 18px 0px 0;
	display: inline-block;
}

.musicbio li a:hover {
	opacity: 0.4;
}

.detail_title {
	opacity: 1;
	-webkit-transition:.4s;
	-moz-transition:.4s;
	transition: .4s;
	cursor: pointer;
	/*color: #ff6c00;*/
}

.musician-profile-date {
	text-decoration: none !important;
}

.musician-profile-text {
	text-decoration: underline;
}

.detail_title:hover {
	opacity: .4;
}

@media screen and (max-width:900px){
	.musician .leftbox {
		width: 90px;
	}
	.musician .centerbox {
		width:calc(100% - 120px);
		width:-webkit-calc(100% - 120px);
		float: none;
		left:110px;
	}
	
	.musician .rightbox {
		width:calc(100% - 120px);
		width:-webkit-calc(100% - 120px);
		float: none;
		margin-left:110px;
		padding: 35px 0 0 0;
	}
}

@media screen and (max-width:600px){
	.musicbio_wrap h3 {
		text-align: left;
		margin-left: 110px;
	}
	ul.musicbio {
		background-position: left 3px center;
		margin-left: 110px;
	}
	.musicbio {
		margin-left: 110px;
		margin-right: 10px;
	}
	.musicbio li {
		width: calc(100% - 15px);
		max-width: -webkit-calc(100% - 15px);
		padding-right: 0px;
		text-align: left;
		background-position: left 18px;
		padding-left: 15px;
	}
	
	.musicbio li:nth-child(2n) {
		padding-left: 15px;
	}
}

#schedule {
	background-image:url(../img/bg_musician.jpg);
	background-size:cover;
	background-position:center center;
	width:100%;
	height:100%;
	position:fixed;
	z-index:100;
	display:none;
}

#scheduleWrap {
	position:relative;
	text-align:left;
	padding:0 10%;
	top:50%;
	transform:translateY(-50%);
}

#schedule h2 {
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:2px;
	color:#ffffff;
	font-size: 3em;
}

#schedule h3 {
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	color:#ffffff;
	font-size: 1.3em;
}

#schedule ul {
	padding: 0 0 30px 0;
}

#schedule li {
	line-height:1.35;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	color:#ffffff;
}

#ddddd {
	opacity:0.2;
}

#schedule .close {
	line-height:1;
	color:#ffffff;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	letter-spacing:1px;
	position:absolute;
	bottom:-25%;
	left:10%;
}

#archive {
	background-image:url(../img/bg_musician.jpg);
	background-size:cover;
	background-position:center center;
	width:100%;
	height:100%;
	position:fixed;
	z-index:100;
	display:none;
}

#archiveWrap {
	position:relative;
	text-align:left;
	padding:0 10%;
	top:50%;
	transform:translateY(-50%);
}

.backtotop {
	position: fixed;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	top:50%;
	transform:rotate(-90deg); 
	color: #ffffff;
	text-decoration: none;
	left:-20px;
	font-size: 0.8em;
	letter-spacing: 2px;
	display: inline-block;
	z-index: 9999;
}

.portfoliopdf {
	position: fixed;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	top:50%;
	transform:rotate(90deg); 
	color: #ffffff;
	text-decoration: none;
	right: -31px;
	font-size: 0.8em;
	letter-spacing: 2px;
	display: inline-block;
	z-index: 9999;
}

.snslist li {
	text-align: left;
}

.snslist li a {
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	line-height: 2;
	padding: 10px 0;
	color: #ffffff;
	text-decoration: none;
	font-size: 0.8em;
}

#musicprofile .left p a {
	text-decoration: none;
	color: #ffffff;
}

.eventtitle {
	line-height: 1.3;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	font-smoothing: antialiased;
	color: #ffffff;
	padding: 15px 0 5px 0;
	text-align: left;
}

.boxMusician video , .musician video {
	right:0;
	bottom:0;
	min-width:100%;
	min-height:100%;
	width:auto;
	height:auto;
	position: fixed;
}

.detail_title {
	line-height: 1.35;
}

.detail_box {
	display: none;
	line-height: 1.35;
	padding: 10px;
	background-color: rgba(255,255,255,0.2);
}

.pickupworks_ttl {
	position: relative;
	line-height: 1;
	padding: 30px 0;
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	letter-spacing: 3px;
	font-size: 1.3em;
	z-index: 4;
}

#ogata_photo {
	width: 150px;
}

#ogata_photo img {
	width: 100%;
	height: auto;
}

.iaoh {
	font-size: 0.75em;
}

iframe .cookiePolicy {
	display: none !important;
}

.musician-profile-date {
	padding: 0 10px 0 0;
}

.gifarea {
	background-image: url(../img/00102_1_2.gif);
	width: 100%;
	height: 100%; 
	position: fixed; 
	background-size: cover;
}

.gifarea_schedule {
	background-image: url(../img/00102_1_3.gif);
}

.gifarea_contact {
	background-image: url(../img/00102_1_4.gif);
}

.attention {
	font-size: 0.7em;
	max-width: 500px;
	padding: 20px 0;
	line-height: 1.55;
	text-align: left;
	margin-left: 55px;
	margin-right: 55px;
}

#top h2 span {
	font-family: "brandon-grotesque", sans-serif;
    font-weight: 400;
    font-style: normal;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-align: left;
	padding: 5px 0 0 0;
	display: inline-block;
	letter-spacing: 4px;
	font-size: 0.9em;
}

#top .boxMusicianHeader h2 {
	text-align: left;
}

.missionlist {
	padding: 0 0 30px 0;
}

.menu_btn {
	font-family: 'BrandonGrotesqueWeb-Bold';
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	background-image:url(../img/menu_arrow.png);
	background-size: 10px auto;
	background-repeat: no-repeat;
	background-position: center top;
	line-height: 1;
	padding: 12px 0 0 0;
	color: #ffffff;
	font-size: 0.9em;
	letter-spacing: 3px;
}

#spmenu {
	z-index: 99999;
	position: fixed;
	top:0px;
	left:0px;
	
}

#menucontent {
	display: none;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	background-color: rgba(10,137,129,0.95);
}

#spmenu li {	
	border-bottom: solid 1px #ffffff;
}

#spmenu li:first-child, #spmenu li.last {
	border-bottom: none;
}

#spmenu li:nth-child(2) {
	padding-top: 30px;
}

#spmenu li a {
	display: block;
	line-height: 1;
	font-family: 'BrandonGrotesqueWeb-Bold';
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-size: 0.9em;
	letter-spacing: 3px;
	color: #ffffff;
	padding: 16px 0 14px 0;
	text-decoration: none;
}

#spmenu ul.spmenu_left, #spmenu ul.spmenu_right {
	padding: 30px 0 0 0;
}

#spmenu .spmenu_left li:first-child img {
	width: 45%;
	height: auto;
}

#spmenu .spmenu_right li:first-child img {
	width: 80%;
	height: auto;
}

.spmenu_left {
	width: 50%;
	float: left;
	width: 100%;
	float: none;
}

.spmenu_right {
	width: 50%;
	float: left;
}

/*--------------------------------------
  SP用メニューボタン
---------------------------------------*/


.sp_menu_btn_threeline {
	width: 26px;
	height: auto;
	text-align: right;
	cursor:pointer;
	padding-top:4px;
	top:10px;
	left:10px;
	position: fixed;
	z-index: 100000;
}

.sp_menu_btn_threeline > span {
	height: 2px;
	width: 100%;
	display: block;
	line-height:0;
	margin-bottom:4px;
	background:#ffffff;
	margin:0 0 4px auto;
	border-radius:10px;
}

.sp_menu_btn_threeline > span.btn_Opencase {
	margin-top:2px;
	background:#ffffff;
}

.sp_menu_btn_threeline > span.rect1 {
	-webkit-transform:rotate(0deg);
    transform:rotate(0deg);
	-webkit-transition-property:margin-bottom,transform;
	transition-property:margin-bottom,transform;
	-webkit-transition-duration:0.3s;
    transition-duration:0.3s;
}

.sp_menu_btn_threeline > span.rect1_c {
	-webkit-transform:translate(0,4px) rotate(45deg);
    transform:translate(0, 4px) rotate(45deg);
}

.sp_menu_btn_threeline > span.rect2 {
	-webkit-transition-property:opacity,transform;
	transition-property:opacity,transform;
	-webkit-transition-duration:0.3s;
    transition-duration:0.3s;
	width:100%;
}

.sp_menu_btn_threeline > span.rect2_c {
	opacity:0;
	-webkit-transform:translate(0);
    transform:translate(0);
}

.sp_menu_btn_threeline > span.rect3 {
	-webkit-transform:rotate(0deg);
    transform:rotate(0deg);
	-webkit-transition-property:margin-bottom,transform;
	transition-property:margin-bottom,transform;
	-webkit-transition-duration:0.3s;
    transition-duration:0.3s;
	width:100%;
}

.sp_menu_btn_threeline > span.rect3_c {
	width: 100%;
	-webkit-transform:translate(0,-8px) rotate(-45deg);
    transform:translate(0, -8px) rotate(-45deg);
}

.pc_disnon {
	display: none !important;
}

.sp_disnon {
	display: block !important;
}

@media screen and (max-width : 800px) {
	.sp_disnon {
		display: none !important;
	}
	
	.pc_disnon {
		display: block !important;
	}
}

.aboutt {
	font-weight: bold;
	line-height: 1;
	text-align: left;
	font-size: 0.9em;
	padding: 0 0 10px 0;
	color: #ffffff;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

hr {
	margin:75px 0;
	padding:0;
	height:1px;
	background-color:#ffffff;
	border-top:none;
	border-bottom:none;
	border-left:none;
	border-right:none;
}

em.board1 {
	margin-top:15px;
	padding:13px;
	display:block;
	border:solid 1px #ffffff;
	font-style:normal;
	font-weight:bold;
}

@media print {
	.print_disnon, .pickupworks_ttl, #spmenu, #worksList > ul, .backtotop, .portfoliopdf, .attention, .boxCreativeP {
		display: none;
	}
	
	.works_detail .cover {
		position: relative;
		top:auto;
		height: auto;
		width: 600px !important;
		height: 400px !important;
		margin: 0 auto;
		opacity: 1 !important;
	}
	
	#worksList {
		position: relative !important;
		top: auto !important;
		left:auto !important;
	}
	
	.works_detail_wrap {
		color: #000000;
		min-height: auto !important;
	}
	body {
		background-color: #ffffff;
		background-image: url(../img/logo_koyaogata_black.png) !important;
		background-size: 80px auto !important;
		background-repeat: no-repeat !important;
		background-position: right top;
		padding: 60px 0 0 0;
	}
	
	.works_detail h2 {
		font-size: 2em;
	}
}