@charset "UTF-8";
/*
Theme Name: TITF
Theme URI: /2020/wp-content/themes/titf/
Description: Tokyo International Tap Festival Theme
Author: Coco-Factory
Version: 2.1
License: Coco-Factory
License URI: http://coco-factory.jp
*/

/* =common
-----------------------------------------------------------------------------*/

@import url(/2020/wp-content/themes/titf/common/css/reset.css);

@font-face {
    font-family: 'gotham';
    src: url('/2020/wp-content/themes/titf/common/font/gotham_black_regular-webfont.eot');
    src: url('/2020/wp-content/themes/titf/common/font/gotham_black_regular-webfont.eot#iefix') format('embedded-opentype'),
         url('/2020/wp-content/themes/titf/common/font/gotham_black_regular-webfont.woff') format('woff'),
         url('/2020/wp-content/themes/titf/common/font/gotham_black_regular-webfont.ttf') format('truetype'),
         url('/2020/wp-content/themes/titf/common/font/gotham_black_regular-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.fade-up {
transition: opacity 0.7s;
-moz-transition: opacity 0.7s;
-webkit-transition: opacity 0.7s;
-o-transition: opacity 0.7s;
transition: transform 0.7s;
-moz-transition: transform 0.7s;
-webkit-transition: transform 0.7s;
-o-transition: transform 0.7s;
}


.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*左から右*/
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #0D0C0C;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}
.bgLRextendTrigger,
.bgappearTrigger{
    opacity: 0;
}

/*--------------- Layout -----------------*/

body{
	background:#c11920;
	font-family: 'gotham', 'Noto Sans JP', sans-serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	color:#555;
}

a{
	color:#fff;
}

.container a{
    text-decoration: underline;
}

.error404 .container a{
	color: #fff;
}

a:active,
a:hover{
	color:#fff;
}

.container a:active,
.container a:hover{
    text-decoration: none;
}

.row{
	max-width:1250px;
}

.wp-pagenavi{
	padding:0 20px 50px 20px;
	text-align:center;
}

.wp-pagenavi li{
	display:inline;
}

.wp-pagenavi span,
.wp-pagenavi a{
	background:#333;
	color:#555;
	text-decoration:none;
	padding:3px 10px!important;
	border:none!important;
}

.wp-pagenavi a:hover,
.wp-pagenavi a:active{
	background:#fff!important;
	color:#000!important;
	border:none!important;
}

.wp-pagenavi span.current{
	background:#000!important;
	padding:3px 10px!important;
	font-weight: normal!important;
	border:none!important;
	color:#000!important;
}

.font-red{
    color: #f00;
    margin:0 0 30px 0;
}

.fonty{
    color: #c11920;
    font-size:1.2rem;
}

.fontg{color: #999;}


/* =outline
-----------------------------------------------------------------------------*/

#header{
	position: relative;
	background:#c11920;
	height:25vh;
	z-index:5;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 60px 0 100px 0;
}

.home #header{
	background:#000;
	height:100vh;
	display: block;
	padding: 0;
	
}

.header-area{
    display:flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.header-block:first-child{
    width:40%; 
    transform: rotate(-13deg);
}

.header-block:last-child{
    width:60%; 
    padding: 80px 5% 0 0;
    text-align: center;
}

.header-block:last-child img{
    height: 65vh;
    margin:0 auto;
}

.header-block:first-child img{
    height: 95vh;
    margin:0 auto;
}

@media only screen and (max-width:960px){
.header-block:first-child{
    width:100%; 
    transform: rotate(0deg);
    text-align: center;
}

.header-block:last-child{
    width:100%; 
    padding: 0;
    text-align: center;
}

.header-block:last-child img{
    height: 35vh;
}

.header-block:first-child img{
    height: 46vh;
}
    
}

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

.header-block:last-child img{
    height: 28vh;
}
.header-block:first-child img{
    height: 50vh;
}
    
}

.home #header h1 span{
	margin:0 0 20px 0;
	display: block;
}

#header.active{
    z-index: 7;
}

#logo{
	width:100px;
}

.home #logo{
	display: none;
}

.under-heading{
	position: relative;
	top:-60px;
	text-align:center;
	text-transform: uppercase;
	color: #fff;
	font-size:5rem;
    line-height: 1.5;
	z-index: 6;
}

.container{
	background:#000;
	color: #fff;
}

/* =nav
-----------------------------------------------------------------------------*/
#openbtn{
	display:none;
}

.home nav#g-nav,
nav#g-nav.fixed{
	background: #c11920;
	position:fixed;
	width:100%;
	z-index: 8;
	top: 0;
}


nav#g-nav ul{
	display: flex;
	justify-content:center;
	align-items: center;
	text-transform: uppercase;
}

.home nav#g-nav ul{
	padding: 20px 0 ;
}

nav#g-nav.fixed ul{
	padding:10px 0;	
}

nav#g-nav ul li{
	padding:0 20px;
}

nav#g-nav ul li:first-child{
	display:none;
}

nav#g-nav.fixed ul li:first-child{
	display: block;
}

nav#g-nav.fixed ul li img{
	width:70px;
	height: auto;
}

a.current{
	color:#fff;
}



/* =footer
-----------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
	z-index: 5;
}

.btn a{
	position: relative;
	display:block;
	border:1px solid #fff;
	max-width:250px;
	margin:50px auto 0 auto;
	padding: 10px 0;
	text-align: center;
	color: #fff;
}

.btn a:hover,
.btn a:active{
	background:#c11920;
	border:1px solid #c11920;
	color: #000;
}

.btn a:after{
  position: absolute;
  top: 25%;
  left: 5%;
  content: "\f105";
  font-family: FontAwesome;
}

.link-area .btn a:after{
  content: "\f104";
  font-family: FontAwesome;
}

.link-area{
	position:relative;
	z-index: 2;
	overflow: hidden;
	padding:14% 0;
	margin:10% 0 5% 0;
	text-align: center;
}

.link-area:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #000;
  transform-origin: left center;
  transform: rotate(3deg);
  z-index: -1;
}



.link-area:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 80%;
  margin: 3% -10% 0;
  background: #333;
  transform-origin: right center;
  transform: rotate(-3deg);
  z-index: -2;
}

.circle-list{
	display: flex;
	justify-content: center;
	align-items: center;
    flex-wrap: wrap;
	margin:0 0 20px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.circle-list li{
	margin:0 10px;	
}

.circle-list li a{
	background:#c11920;
	width:120px;
	height: 120px;
	border-radius:50%;
	display: flex;
	justify-content: center;
	align-items: center;
    flex-wrap: wrap;

}

.circle-list li a:active,
.circle-list li a:hover{
	border:double 5px #000;
	color: #fff;
}

.circle-list li a span.font-red{
	margin:0;
	position: relative;
	top:-10px;
	width:100%;	
}

.home #footer-inner{
	padding: 60px 0 0 0;
}

#footer-logo{
	text-align:center;
	margin: 0 0 20px 0;
}

#footer-logo img{
	width:100px;
	height: auto;
-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

#footer-logo img:hover{
    opacity: 0.8;
}

#footer-sns{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:2rem;
	margin:0 0 50px 0;
}

#footer-sns a{
	color: #fff;
}

#footer-sns a:active,
#footer-sns a:hover{
	color:#c11920;
}

#footer-sns li{
	margin:0 10px;
}

#footer-history{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin:0 0 50px 0;
}

#footer-history li{
	width:10%;
	padding:0 10px;
	margin:0 0 20px 0;
}

#footer-history li img{
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

#footer-history li img:hover{
	opacity: 0.8;
}

#supporter{
	text-align: center;
	margin:0 0 20px 0;
}

#supporter dt{
	margin:0 0 20px 0;
	color: #fff;
}

#supporter dd img{
	width:300px;
	height: auto;
	margin:0 0 20px 0;
-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

#supporter dd:last-child img{
	width:120px;
	height: auto;
}

#supporter dd img:hover{
    opacity: 0.8;
}

small{
	display: block;
	font-size:0.8rem;
	text-align:center;
	color: #fff;
	padding:0 0 50px 0;
}

/* =news
-----------------------------------------------------------------------------*/

.news-block{
    border: 2px solid #fff;
    padding:30px;
    margin:0 0 30px 0;
}

.news-block h2{
    font-size:1.5rem;
    margin:0 0 30px 0;
	color: #c11920;
}

/* =performers
-----------------------------------------------------------------------------*/

.performers-list{
	display: flex;
	flex-wrap: wrap;
    justify-content:space-around;
}

.performers-list-area{
    margin:0 0 50px 0;
    padding: 0 0 50px 0;
    border-bottom:1px solid #666;
}

.performers-list-area:last-child{
    border:none;
}

.performers-list-area h2{
    margin:0 0 50px 0;
    text-align: center;
    font-size:3rem;
    text-transform: uppercase;
    line-height: 1;
    color: #c11920;
}

.performers-list .performers-area h3{
    text-align: center;
    font-size:2rem;
    margin: 0 0 20px 0;
}

.performers-list-area p.cat-desc{
    margin:0 0 30px 0;
}

.performers-list li{
	width:23%;
	text-align: center;
	margin: 0 0 40px 0;
}

.performers-list-area:nth-child(4) .performers-list li{
    width:18%;
}

.performers-list li span{
	display: block;
	margin:10px 0 0 0;
}

.performers-list li a{
    text-decoration: none!important;
	color: #fff;
}

.performers-list li a:hover{
	color: #c11920;
}


.performers-list li img{
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

.performers-list li img:hover{
	opacity: 0.8;
}

.profile-img{
	max-width:300px;
	height: auto;
	margin:0 auto;
}

.profile-content{
	text-align: left;
}

.profile-heading{
	color: #fff;
	font-size:1.5rem;
	margin:30px 0;
}

.profile-heading span{
	display: block;
	font-size:1rem;
}

/* =workshop
-----------------------------------------------------------------------------*/

.workshop .container a{
	color: #fff;
}

.workshop .container a:hover{
	color: #c11920;	
}


.ws-table{
    width:100%;
    text-align: center;
    margin:0 0 50px 0;
}

.ws-table th{
    font-size:2rem;
    color: #c11920;
    padding: 10px;
    vertical-align: top;
}
.ws-table th span{
    font-size:1.1rem;
}
.ws-table thead th{
    width:45%;
}
.ws-table thead th:first-child{
    width:10%;
}

.ws-table tbody td{
    padding:10px;
}
.ws-table td{
    border:2px solid #c11920;
    vertical-align: top;
}

.ws-table td span.wpcf7-form-control-wrap label{
    display: block;
   cursor: pointer;
    padding: 20px;
}

.ws-table td span.bg-bk{
    display: block;
    background:#c11920;
    color: #000;
    padding: 5px 10px;
}

.ws-table input[type="checkbox"]{
    width:20px;
    height: 20px;
}

.total{
    text-align: right;
}

span.wpcf7-list-item{
    margin:0!important;
}
    
/* =stage
-----------------------------------------------------------------------------*/

.stage .container a{
	color: #fff;
}

.stage .container a:hover{
	color: #c11920;	
}

.stage-heading{
	color: #c11920;
}

.stage-list{
	display: flex;
	flex-wrap: wrap;	
}

.stage-list li {
    margin: 0 0 10px 0;
}

.stage-list li:after {
    content: " / ";
    padding: 0 5px;
}

.stage-list li:last-child:after {
	display: none;
}

.border-box{
    border:3px solid #fff;
    padding: 40px;
    margin:60px 0;
}

.border-box p{
    margin:0 0 20px 0;
}
/* =contact
-----------------------------------------------------------------------------*/

.contact-form ol{
	margin:80px 0 50px 0;	
}

.contact-form .txtR{
    text-align: right;
}

.contact-form span.bgy{
	background:#c11920;
	color: #000;
	padding: 2px 10px;
	margin:0 0 0 10px;
	line-height: 1;
}

.contact-form li{
	margin:0 0 30px 0;
    display: flex;
    flex-wrap: wrap;
}

.contact-form li label{
    width:25%;
    padding: 0 20px 0 0;
}

.contact-form li .inputarea{
    width:75%;
}

input.wpcf7-calculated[type="text"],
.contact-form input[type="text"] ,
.contact-form input[type="email"] ,
.contact-form select{
	height:55px;
    background:#fff;
	border: none;
	color:#333;
	width:100%;
	padding:5px 10px;
}

input.wpcf7-calculated[type="text"],
.contact-form .tapsum input[type="text"],
.contact-form .address input[type="text"],
.contact-form .address02 input[type="text"],
.contact-form .sum input[type="text"]{
    width: 145px;
}

input.wpcf7-calculated[type="text"],
.contact-form .address input[type="text"],
.contact-form .address02 input[type="text"]{
    margin:0 0 20px 0;
}

.contact-form textarea{
	height:232px;
	width:100%;
	border: none;
	background:#fff;
	color:#333;
	padding:10px;
}

.submit-btn{
    width:230px;
	margin: 0 auto;
}

input[type="submit"] {
   -webkit-appearance: none;
	background:#fff;
	color: #000;
	border: none;
	padding:10px 20px;
	margin: 0 0 20px 0;
	width: 230px;
	cursor: pointer;
}

/* =media query
-----------------------------------------------------------------------------*/
@media only screen and (max-width:1075px){

nav#g-nav ul li{
	padding:0 12px;
}
	
}

@media only screen and (max-width:960px){
	.home #header,
	#header{
		padding: 0;
	}
    .under-heading{
        font-size:2.5rem;
        top:0;
        z-index: 0;
       padding:50px 0;
    }
	

 #footer-history li{
        width:15%;
        padding: 0 5px;
    }
#g-nav.gnavactive{
	position: fixed;
	top:0;
	z-index: 999;
	background:#c11920;
	width:100%;
	height:100%;
}

nav#g-nav,
nav#g-nav.fixed{
	display:none;
}
    
nav#g-nav.fixed ul{
    padding: 40px 0 0 0;
}

nav#g-nav.fixed.gnavactive,
nav#g-nav.gnavactive{
    display:block;
}
    
nav#g-nav.gnavactive ul{
	flex-wrap: wrap;
	padding: 30px 0 0 0;
}

nav#g-nav.gnavactive ul li{
    width:100%;
    text-align:center;
    font-size:1.3rem;
    margin:0 0 10px 0;
    padding: 0;
}
    
nav#g-nav.fixed ul li:first-child{
    display: none;
}
nav#g-nav.gnavactive ul li:nth-child(8){
    margin:0 0 40px 0;
}

nav#g-nav.gnavactive ul li:nth-child(10),
nav#g-nav.gnavactive ul li:nth-child(9){
    width: 50%;
    font-size:2.5rem;
    border-top:1px solid #c11920;
    border-bottom:1px solid #c11920;
    }
    nav#g-nav.gnavactive ul li:nth-child(9){
    border-right:1px solid #c11920;    
    }

nav#g-nav.gnavactive ul li:nth-child(10) a,
nav#g-nav.gnavactive ul li:nth-child(9) a{
    display: block;
    }
nav#g-nav.gnavactive ul li:nth-child(10) a:active,
nav#g-nav.gnavactive ul li:nth-child(9) a:active,
nav#g-nav.gnavactive ul li:nth-child(10) a:hover,
nav#g-nav.gnavactive ul li:nth-child(9) a:hover{
    background: #c11920;
    color:#fff; 
    }
	
	
#openbtn{
	cursor: pointer;
	display:block;
	position:fixed;
	right:0;
	top:0;
	width:68px;
	height: 68px;
	z-index:9999;
	background:#c11920;
	color: #fff;
	text-transform: uppercase;
	font-size: 0.8rem;
}

#openbtn span:nth-of-type(1) ,
#openbtn span:nth-of-type(2) ,
#openbtn span:nth-of-type(3) {
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 17px;
	width: 50%;
	margin:0 auto;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
}

#openbtn span:nth-of-type(1) {
	top: 15px;
}

#openbtn span:nth-of-type(2) {
	top: 25px;
}

#openbtn span:nth-of-type(3) {
	top: 33px;
}

#openbtn span:nth-of-type(4) {
	position: absolute;
	top: 39px;
	left:15px;
}

.btnactive#openbtn span:nth-of-type(1) {
	top: 22px;
	-webkit-transform: translateY(6px) rotate(-45deg);
	transform: translateY(6px) rotate(-45deg);
}

.btnactive#openbtn span:nth-of-type(2) {
	top: 33px;
	-webkit-transform: translateY(-6px) rotate(45deg);
	transform: translateY(-6px) rotate(45deg);
}

.btnactive#openbtn span:nth-of-type(3){
	opacity: 0;
}

.contact-form li label{
    width:100%;
    padding: 0 0 20px 0;
}

.contact-form li .inputarea{
    width:100%;
}
    
}

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

    .performers-list li,
    .performers-list-area:nth-child(4) .performers-list li{
        width:31%;
    }
    .link-area{
        padding: 20% 0;
    }
    .link-area:after,
    .link-area:before{
        height: 88%;
    }
    .ws-table thead th {
    width: 50%;
    }
    .ws-table thead th:first-child,
    .ws-table tbody th{
        display: none;
    }
    .ws-table tbody td{
        text-align: left;
        padding: 10px 5px;
        font-size:0.9rem;
    }
    .ws-table td span.wpcf7-form-control-wrap label{
        padding:10px;
    }
}

@media only screen and (max-width:450px){
    .lead{
        text-align: left;
    }
    #footer-inner{
        padding: 0 20px;
    }
    #footer-history li{
        width:33.333%;
        padding: 0 5px;
    }
    .performers-list li,
    .performers-list-area:nth-child(4) .performers-list li{
        width:48%;
    }
    .border-box{
        padding: 20px;
    }
    .contact-form .tapsum input[type="text"],
    .contact-form .address input[type="text"],
    .contact-form .address02 input[type="text"],
    .contact-form .sum input[type="text"]{
    width: 105px;
    }
    .performers-list-area h2{
        font-size:2.5rem;
    }
}