/*
Theme Name: Tokyo Concerts
Description: Custom Theme for Tokyo Concerts
Version: 1.0

Accent color: #a53434;
*/

  /**************************/
 /***   GENERAL STYLES   ***/
/**************************/

	body {
		font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Hiragino Kaku Gothic Pro W3','Meiryo',sans-serif;
		line-height: 1.5;
		font-size: 14px;
		background: #FFF;
		margin: 0;
	}

	p {
		font-size: 13px;
		line-height: 170%;
	}
	
	ul {
		font-size: 13px;
		line-height: 170%;
	}

	a {
		text-decoration: none;
		transition: 250ms;
		color: #a53434;
	}
	a:hover {
		color: #851414;
		text-decoration: none !important;
	}

	a img {border: none;}

	section {margin-bottom: 40px;}

	.section-title a {color: #888;}

	.section-title, .page-title, h1 {
		padding-top: 10px;
	} 

	.section-title, .page-title,
	.section-subtitle, h1, h2 {
		font-size: 21px;
		text-align: left;
		position: relative;
		font-weight: normal;
		color: #888;
	} 
	.section-subtitle, h3 {
		font-size: 17px;
	}

	@media (min-width:800px) {
		.section-title, .page-title, h1, h2 {font-size: 21px;}
		.section-subtitle, h3 {font-size: 17px;}
	}

	.section-subtitle:after {
		width: 100px;
	}

	.text img {
		max-width: 100%;
		height: auto;
		display: block; 
	}
	.main-area.text img {
		 max-width: 100%;
		 height: auto; 
		 display: inline-block;
	}	
	@media (min-width:800px) {
		.text .alignleft {float: left;margin:0 1em 1em 0;}
		.text .alignright {float: right;margin:0 0 1em 1em}
	}
	.alignleft img, .alignright img, .alignleft, .alignright {max-width: 100%;height: auto;}
	figcaption {font-size: 11px;}

	a.tc-btn2 {
		display: inline-block;
		padding: 5px 15px;
		border: 0px solid #666;
		text-transform: uppercase;
		color: black;
		margin: 5px;
		vertical-align: top;
	}

	a.tc-btn {
		display: inline-block;
		padding: 5px 15px;
		border: 1px solid #666;
		text-transform: uppercase;
		color: black;
		margin: 5px;
		vertical-align: top;
	}
	a.tc-btn:hover,
	a.tc-btn.selected {
		background: rgba(0,0,0,.25);
		border-color: black;
	}
	a.tc-btn.selected {
		opacity: .5;
		cursor: pointer;

	}

	a.tc-btn.toukon {padding: 2px;}
	a.tc-btn.toukon img {display:block;}

	hr {clear: both;}

  /*********************/
 /***   STRUCTURE   ***/
/*********************/

	#website-content {
		padding-top: 15px;
	}

	#website-content .container {
		background: white;
		min-height: calc(100vh - 145px);
	}

	.home #website-content .container {
		border-top: 0px;
		margin-top: 0px;
		
	}
	.home #website-content .container:before {
		content: "";
		display: block;
		height: 0px;
		margin: 0 -10px;
	}
	@media (min-width:800px) {
		.home #website-content .container:before {
			margin: 0 -20px;
		}
	}

	.container {
		padding: 0 10px;
		overflow: hidden;
		max-width: 960px;
		margin: auto;
	}

	@media (min-width:800px) {
		.container {
			padding: 0;
			width: 80%;
		}
	}

  /******************************/
 /***   HEADER & NAVIGATION  ***/
/******************************/

	.website-header {
		display: block;
		position: relative;
		background: white;
		top: 0;
		width: 100%;
		min-height: 50px;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		z-index: 2;
	}
	.website-header.mobile  {
		display: block;
		padding-bottom: 5px;
		}
	.website-header.desktop {
		display: none;}
	@media (min-width:800px) {
		.website-header.mobile  {
			display: none;
			position: fixed;
			}
		.website-header.desktop {
			display: block;
			position: fixed;
			}
		body {
			padding-top: 100px;
		}
	}
	.website-brand {
		display: block;
		font-size: 24px;
		text-transform: uppercase;
		text-align: left;
		font-weight: normal;
		color: black;
		text-indent: -999px;
		overflow: hidden;
		background: url(img/logo.png) no-repeat left;
		background-size: 95%;
		background-position: 5px;
	}
	@media (min-width:350px) {
		.website-brand {
			background-size: 350px;
			width: 100%;
		}
	}
	
	.website-header .lang {
		color: #888;
		padding-bottom: 10px;
	}
	.social-links {
		padding-left: 10px;
		text-align: center;
	}

	.social-links a {
		display: inline-block;
		margin: 5px;
		color: white;
		background: #888;
		height: 32px;
		width: 32px;
		border-radius: 50%;
		overflow: hidden;
		position: relative;
	}
	.social-links svg {
		height: 20px;
		width: 20px;
		fill: currentColor;
		margin: 6px;
		position: relative;
	}

	.social-links a.twitter:hover    {background: #00aced;}
	.social-links a.instagram:hover  {background: #ff3a49;}
	.social-links a.linkedin:hover   {background: #007bb6;}
	.social-links a.facebook:hover   {background: #3b5998;}

	.social-links a.instagram:before {
		content: "";
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		background: -webkit-radial-gradient(4px 28px, #ffda75 18%, #ff3a49 43%, #ff3a49 50%, #e518a1 70%, #6634e1 100%);
		opacity: 0;
		transition: 500ms;
		border-radius: 50%;
	}
	.social-links a.instagram:hover:before {opacity: 1;}

	.website-navigation {
		top: 50px;
		right: 0;
		background: white;
		transition: 500ms;
		overflow: hidden;
	}
	.website-navigation ul a {
		display: block;
		padding: 6px 10px;
		color: #555;
		text-align: left;
	}
	.website-navigation ul a:hover {
		color: #000;
		background: #EEE;
	}
	.website-navigation ul {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	.website-navigation>ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;

	}

	.website-navigation>ul>li {
		flex-grow: 1;
	}
	li.menu-item-has-children>a:after {
		content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30.7 30.7"><path d="M30 10.2L15.4 24.8 0.7 10.2c-1-1-1-2.6 0-3.5 1-1 2.6-1 3.5 0l11.1 11.1L26.5 6.6c1-1 2.6-1 3.5 0C31 7.6 31 9.2 30 10.2z"/></svg>');
		height: 12px;
		width: 8px;
		display: inline-block;
		margin-left: 5px;
	}

	.website-navigation ul ul {
		background: white;
		position: absolute;
		width: 80%;
		left: 10%;
		max-height: 0px;
		transition: box-shadow .25s, max-height .5s cubic-bezier(0.075, 0.820, 0.165, 1.000);
		overflow: hidden;
	}

	/* hover states are disabled on when touch events are detected */
	body:not(.touch) .website-navigation ul li.menu-item-has-children:hover>a,
	.website-navigation ul li.menu-item-has-children.open>a {
		background: white;
		position: relative;
		z-index: 2;
	}
	body:not(.touch) .website-navigation ul li.menu-item-has-children:hover ul,
	.website-navigation ul li.menu-item-has-children.open ul {
		display: block;
		max-height: 500px;
		transition-timing-function: ease-out;
		box-shadow: 0 0 200px rgba(0,0,0,0.66);
	}

	@media (min-width:800px) {

		.website-header .container {
			display: flex;
			align-items: flex-end;
			flex-wrap: wrap;
		}
		.website-navigation {width: 100%;}
		.website-header .website-brand {
			flex-grow: 1;
			text-align: left;
			font-size: 28px;
			padding-top: 15px;
			padding-bottom: 5px;
		}

		.website-header .social-links {text-align: right;}

		/*.website-navigation ul li.menu-item-has-children:hover>a:hover {
	        background: #EEE;
	    }*/
		.website-navigation ul ul {
			width: auto;
			left: auto;
			min-width: 180px;
		}
		.website-navigation ul ul a {
			text-align: left;
		}
		.website-navigation ul li.menu-item-has-children ul {
			box-shadow: 0 0 150px rgba(0,0,0,0.25) !important;
		}
	}

	/* For browser that don't support flexbox */
	.legacy .website-navigation>ul {text-align: right;}
	.legacy .website-navigation>ul>li {
		display: inline-block;
	}
	@media (min-width:800px) {
		.legacy .website-brand {float: left;}
	}

  /******************/
 /***   FOOTER   ***/
/******************/

	#website-footer {
		
		padding-top: 20px; 
		background-color: white;
		box-shadow: 0 0 10px rgba(0,0,0,0.3);
		padding-bottom: 20px;
		font-size: 12px;
		width: 100%;
	}
	#website-footer .tc-btn, .tc-btn2 {
		float: right;
	}

	a.tc-logo-btn {padding: 0 10px 0 5px;}
	.tc-logo-btn img {height: 30px;}

  /**********************/
 /***   FRONT PAGE   ***/
/**********************/


	@media (min-width:800px) {
		.front-page-content {
			display: flex;
		}
		.front-page-content .updates {
			flex-grow: 1;
			padding-right: 30px;
		}
		.front-page-content .concerts {
			width: 490px;
			flex-grow: 1;
			flex-shrink: 0;
		}
	}


	.news {}
	.news ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.news .news-item {
		display: block;
		position: relative;
		/*padding: 0 0 0 85px;
		min-height: 75px;*/
		font-size: 12px;
		margin: 20px 0;
	}
	.news .news-item:hover {
		background: #EEE;
	}
	.news .news-item img {
		width: 75px;
		height: 75px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.news .news-item .title {
		color: black;
		font-weight: bold;
		border-bottom: 0px solid rgba(0,0,0,.2);
		margin-bottom: 5px;
		font-size: 15px;
		line-height: 1.2;
	}
	.news .news-item .date {
		font-weight: bold;
		color: #888;
		padding-bottom: 5px;
	}
	.news .news-item a { color:#111111 ; font-weight: bold;}

	.events {}
	.events ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.events .event {
		display: block;
		position: relative;
		padding: 0px 5px 0px 85px;
		min-height: 75px;
		color: #888;
		font-size: 12px;
		margin: 20px 0;
	}

	/* Hide after 5th on mobile */
	@media (max-width:799px) {
		.events li:nth-child(n+6) .event {
			display: none;
		}
	}
	.events .event:hover {
		background: #EEE;
		color: #555;
	}
	.events .event img {
		width: 75px;
		height: 75px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.events .event .artist-title {
		color: black;
		font-weight: bold;
		font-size: 15px;
		line-height: 1.2;
		margin-bottom: 9px;
	}
	.events .event .event-title {
		color: black;
	}

	.events .event .date {
		font-weight: bold;
		padding-bottom: 0px;
	}

  /************************/
 /***   CONCERT LIST   ***/
/************************/
	
	.concerts-flyers {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.concerts-flyers li {
		padding-top: 10px;
		padding-bottom: 20px;
	}
	.concerts-flyers .concert {
		position: relative;
		display: block;
		min-height: 110px;

	}
	.concerts-flyers .concert img {
		width: 120px;
		display: block;
		object-fit: cover;
	}
	.concerts-flyers .concert .info {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		padding: 0 0px 0 130px;
		font-size: 12px;
		
	}
	.concerts-flyers .concert:hover {background: #EEE;color: #555;}
	.concerts-flyers .concert .info .date {font-weight: bold;color: #888;}
	.concerts-flyers .concert .info .title {
		font-size: 15px;
		font-weight: bold;
		border-bottom: 0px solid rgba(0,0,0,.2);
		margin-bottom: 5px;
		color: black;
	}
	.concerts-flyers .concert .info .soldouttext {font-size: 12px;}

	.concerts-flyers .concert .info .place {
		color: #000;
	}

	.archive-button {
		margin: 50px 0;
		text-align: center;
	}


  /***********************/
 /***   ARTIST LIST   ***/
/***********************/

	.artist-list-subtitle {padding-top: 110px;}
	.artists-internal-link {font-size: 12px;float: right;}
	.tax-artist_category .artists-internal-link {display: none;}


	.artists-list {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.artists-list li {
		display: inline-block;
		padding: 10px 10px 10px 0px;
		vertical-align: top;
		max-width: 49%;
	}
	.artists-list li a {
		display: block;
		text-align: left;
		padding: 10px;
		width: 100%;
		max-width: 170px;
		box-shadow: 0 1px 3px rgba(0,0,0,.25);
	}
	.artists-list li a:hover {
		box-shadow: 0 3px 5px rgba(0,0,0,.25);
		transform: translateY(-3px);
	}
	.artists-list li a img {
		display: block;
		/*width: 100%;
		max-width: 150px;*/
		width: 150px;
		height: 150px;
		filter: saturate(0);
		transition: .25s;
	}
	.artists-list li a:hover img {
		filter: saturate(1);
	}
	.artists-list li a .title {
		padding-top: 5px;
		color: #444;
	}
	.artists-list li a .subcategory {
		color: #888;
		font-size: 10px;
	}
	.artists-list li a:hover .title {color: #000;}

  /***********************/
 /***   ARTIST PAGE   ***/
/***********************/
	
	@media (min-width: 800px) {
		.single-artists .intro {
			display: flex;
		}
		.single-artists .intro .image {
			width: 300px;
			padding: 1em 0 0 0;
			flex-shrink: 0;
		}
		.single-artists .intro .image img {width: 100%}
		.single-artists .intro .text {
			padding-left: 2em;
		}
	}
	
	#artist-tabs {
		background: #efefef;
		list-style-type: none;
		margin: 50px 0 0 0;
		padding: 0px 0px 0 0;
		font-size: 15px;
	}
	#artist-tabs li {
		display: inline-block;
	}
	#artist-tabs a {
		display: inline-block;
		color: #444444;
		padding: 0 20px 0 3px;
	}
	#artist-tabs a:hover {
		color: #a53434;
		background: rgba(255,255,255,.8);
	}
	#artist-tabs a.active {
		color: #a53434;
		background: #f9f9f9;
	}

	#tab-contents {}

	#tab-contents .tab-content {display: none;}

	.artist-activity-list {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.artist-activity-list li {
		padding: 10px 0;
	}


  /************************/
 /***   CONCERT PAGE   ***/
/************************/
	.soldout {
		font-weight: bold;
		background: #a53434;
		display: inline-block;
		padding: 3px 10px;
		border-radius: 5px;
		color:white;
		font-size: 8px;
	}
	.concerts-flyers .soldout {font-size: 8px;}
	.concert-open .date,
	.concert-open .place {
		font-weight: bold;
		font-size: 14px;
	}
	.concert-open .flyer {
		float: left;
		margin-right: 1em;
	}

  /*************************/
 /***   ACTIVITY PAGE   ***/
/*************************/


	@media (min-width:800px) {
		.activity-page {
			display: flex;
		}
		.activity-page .monthly-navigation {
			width: 150px;
			flex-shrink: 0;
			order: -1;
		}
	}

	.activity-page .monthly-navigation ul {
		list-style-type: none;
		padding: 0;
		margin: 0;
	}
	.activity-page .monthly-navigation ul li {
		display: inline-block;
	}

	@media (min-width:800px) {
		.activity-page .monthly-navigation ul li {
			display: block;
		}
	}

	.activity-artists h3 {font-size: 14px;text-align: justify;}
	.activity-artists a {
		display: inline-block;
		padding: 5px 15px;
		margin: 0 0 5px 0;
		text-align: justify;
		border: 1px solid #CCC;

	}
	.activity-artists a:hover {
		background: #EEE;
	}

	.artist-activities {
		
	}
	.artist-activities h2 {
		padding-top: 3em;
		border-bottom: 2px solid #CCC;
		font-size: 24px;
	}
	.artist-activities h2 a.top-link {
		float: right;
		font-size: 12px;
		padding-top: 10px;
	}
	.artist-activities h3 {
		border-bottom: 1px solid #CCC;
		font-size: 18px;
	}

	.news-activities {
		padding-top: 1em;
	}
	.news-activities .artist-activities .news-date, 
	.news-activities .artist-activities .news-area {
		display: inline;
		font-weight: bold;
		opacity: .5;
	}
	.news-activities .news-title {
		font-weight: bold;
		color:#000000
	}
	.news-activities span {
		display: inline-block;
		width: calc(100% - 140px);
		vertical-align: top;
	}
	.news-activities .label {
		display: inline-block;
		width: 120px;
		text-align: right;
		padding: 0 10px 0 0;
		font-weight: bold;
		opacity: .5;
	}