/* =home
-----------------------------------------------------------------------------*/

.home #header{
    min-height:840px; 
}

.home h2{
    color: #ff0;
    text-transform: uppercase;
}

.home #header .circle-list{
	position: absolute;
    right: 20px;
    bottom:0;
}

#news-area{
	position: absolute;
	z-index: 2;
	bottom:50px;
	left:20px;
	width:55%;
	overflow: hidden;
}

#news-area h2{
	text-transform: uppercase;
	float:left;
	width:5em;
}

#news-area ul{
	margin:0 0 0 5em;
}

#news-area h2,
#news-area h3,
#news-area time{
	display:inline;
}

#news-area time{
    margin: 0 10px 0 0;
    color: #bbb;
}

#news-area a{
	text-decoration: none;
}

#news-area a:hover{
	color:#ff0;
}

/*-- top about --*/

#about{
    padding: 80px 0 60px 0;
}

#about .row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

#about h2{
   font-size:5rem;
    line-height: 1;
    margin: 0 0 20px 0;
    text-align: right;
}
.about-block{
    width:48%;
}

.about-block:first-child p{
    text-align: right;
    margin: 0 0 40px 0;
    font-size: 1.3rem;
}
.about-block:last-child p{
    margin:0 0 20px 0;
}

#about .btn a{
    max-width:inherit;
    text-decoration: none;
    text-transform: uppercase;
}

#about .btn a:after {
    content: "\f019";
}

/*-- top stage --*/

#stage{
    background: url(/2018/wp-content/themes/titf/common/img/bg_stage.png) no-repeat center top;
    background-size:contain;
    padding:80px 0 0 0;
}

#stage .heading-block{
    display: flex;
    flex-direction: row-reverse;
    color: #ff0;
    line-height: 1;
}

#stage .heading-block .date{
    font-size:2rem;
    padding: 0 20px 0 0;
    text-align: right;
}

#stage .heading-block .date span{
    font-size:4rem;
}

#stage h2{
    font-size:7rem;
    margin:0 0 10px 0;
}

#stage .top-lead{
    position: absolute;
    width:45%;
    top:180px;
}

#stage .stage-area{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
}

#stage .stage-detail{
    width:37%;
}

#stage .stage-detail .date{
    font-size:2rem;
    text-align: right;
}

#stage .stage-detail .price{
    font-size:1.5rem;
    margin:0 0 50px 0;
    text-align: right;
}

#stage .stage-detail .place{
    margin:0 0 50px 0;
}

#stage .stage-detail .place dt{
    font-size:1.5rem;
    margin: 0 0 20px 0;
}

#stage .stage-performer{
    color: #ff0;
    margin:0 0 50px 0;
}

#stage .stage-performer h3{
    font-size:1.2rem;
    margin: 0 0 10px 0;
}

#stage .stage-performer-others{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    color: #ff0;
    margin:0 0 50px 0;
}

#stage .stage-performer-others ul:first-child{
    padding: 0 30px 0 0;
}

#stage .stage-btn{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    text-transform: uppercase;
}

#stage .stage-btn li{
    text-align: center;
    width:47%;
 }

#stage .stage-btn li a{
    border:1px solid #fff;
    display: block;
    padding: 20px;
    text-decoration: none;
    min-height:180px;
}

#stage .stage-btn li a:hover,
#stage .stage-btn li a:active{
    background:#ff0;
    color: #000;
}

#stage .stage-btn li dt{
    position:relative;
    display: inline;
    padding: 0 0 20px 0;
}

#stage .stage-btn li dt:after{
    content: "";
     position: absolute;
     left: 0;
     right: 0;
     bottom: 0;
     border-bottom: 1px solid #fff;
     width : 80% ;
     width : -webkit-calc(100% - 40px) ;
     width : calc(100% - 40px) ;
     margin: 0 auto; 
}

#stage .stage-btn li a:hover dt:after,
#stage .stage-btn li a:active dt:after{
 border-bottom: 1px solid #000;   
}

#stage .stage-btn li dd{
    padding:40px 0 0 0;
}

#stage ul.stage-img{
    width:55%;
    margin:250px 0 0 0;
    min-height: 980px;
    position: relative;
}

#stage ul.stage-img li:nth-child(1){
    position: absolute;
    top:0;
    left:0;
    width:250px;
}

#stage ul.stage-img li:nth-child(2){
    position: absolute;
    top:200px;
    right:0;
    width:400px;
}

#stage ul.stage-img li:nth-child(3){
    position: absolute;
    top:500px;
    left:0;
    width:400px;
}

#stage ul.stage-img li:nth-child(4){
    position: absolute;
    top:550px;
    right:0;
    width:250px;
}

#stage ul.stage-img li:nth-child(5){
    position: absolute;
    top:800px;
    left:0;
    width:400px;
}

/*-- top audition --*/

#audition h2{
    font-size:1.6rem;
    color: #fff;
    margin: 0 0 20px 0;
}

#audition h3{
    font-size:1.3rem;
    margin:0 0 10px 0;
}

#audition p{
    margin: 0 0 20px 0;
}

#audition .btn a{
    text-decoration: none;
}

#audition .btn a:after {
      content: "\f105";
}

/*-- top party --*/

#party{
    padding:80px 0 60px 0;
}

#party .heading-block{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #ff0;
    line-height: 1;
}

#party .heading-block .date{
    font-size:2rem;
    padding: 0 0 0 20px;
}

#party .heading-block .date span{
    font-size:4rem;
}

#party h2{
    font-size:6rem;
    margin:0 0 30px 0;
}

#party h2 span{
    display: block;
    font-size:2rem;
}

#party .party-detail{
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
}

#party .img-block{
    position: relative;
    width:48%;  
}

#party .img-block{
    position: relative;
    z-index: 1;
}

#party .img-block p{
    position: absolute;
    right:20px;
    z-index: 2;
    background: #000;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    text-orientation:upright;
}

#party .detail-block{
    width:45%;
}

#party .detail-block .date{
    font-size:2rem;
}

#party .detail-block .price{
    font-size:1.3rem;
    margin:0 0 50px 0;
 }

#party .detail-block .place{
    margin:0 0 50px 0;
}

#party .detail-block .place dt{
    font-size:1.3rem;
    margin: 0 0 20px 0;
}

#party .btn{
    margin:0 0 50px 0;
}

#party .btn a{
    max-width:inherit;
    text-decoration: none;
}

/*-- top workshop --*/

#workshop{
    padding:80px 0 0 0;
}

#workshop .heading-block{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #ff0;
    line-height: 1;
}

#workshop .heading-block .date{
    font-size:2rem;
    padding: 0 0 0 20px;
}

#workshop .heading-block .date span{
    font-size:4rem;
}

#workshop h2{
    font-size:6rem;
    margin:0 0 50px 0;
}

#workshop .workshop-detail{
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;   
}

#workshop .price{
    font-size:1.5rem;
    margin:0 0 50px 0;
    width:48%;
 }

#workshop .place{
    margin:0 0 50px 0;
    width:48%;
}

#workshop .place dt{
    font-size:1.3rem;
    margin: 0 0 20px 0;
}

#workshop #ws-time{
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;   
}

#workshop #ws-time .ws-time-block h3{
    text-align: center;
    margin: 0 0 10px 0;
}

#workshop #ws-time .ws-time-block:nth-child(1) h3 {
    position: relative;
    left: 26%;
}

#workshop #ws-time .ws-time-block{
    width:20%;
    color: #ff0;
}

#workshop #ws-time .ws-time-block:first-child{
    width:33%;
}

#workshop #ws-time .box-block{
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
}

#workshop #ws-time .ws-time-block dt.box-time{
    text-align: right;
}

#workshop #ws-time .ws-time-block dt.box-time span{
    display:block;
}

#workshop #ws-time .ws-time-block:nth-child(2) dt.box-time,
#workshop #ws-time .ws-time-block:nth-child(3) dt.box-time,
#workshop #ws-time .ws-time-block:nth-child(4) dt.box-time{
    display:none;
}

#workshop #ws-time .ws-time-block dt.box-time,
#workshop #ws-time .ws-time-block h3{
   font-size:2.5rem;
    line-height: 1;
}

#workshop #ws-time .ws-time-block dt.box-time{
    width: 30%;
}

#workshop #ws-time .ws-time-block dt.box-time span,
#workshop #ws-time .ws-time-block h3 span{
    font-size:1rem;
}

#workshop #ws-time .ws-time-block dd.box{
    border:2px solid #ff0;
    padding: 10px 10px 4px 4px;
    margin:0 0 20px 0;
    width:100%;
}

#workshop #ws-time .ws-time-block:nth-child(1) dd.box{
    width:58%;
}

#workshop #ws-time .ws-time-block dd.box dl ul{
    display:flex;
    justify-content:flex-start;
}

#workshop #ws-time .ws-time-block dd.box dl dt{
    text-align: center;
    margin: 0 0 10px 0;
}

#workshop #ws-time .ws-time-block dd.box dl ul li:first-child{
    background:#ff0;
    color: #000;
    text-align: center;
    padding: 0 10px;
    margin: 0 10px 0 0;
    white-space: nowrap;
}

#workshop #ws-time .ws-time-block dd.box dd ul li:last-child{
   margin-left:auto;
    font-size: 0.8rem;
}

#workshop .btn{
    margin:0 0 50px 0;
}

#workshop .btn a{
    max-width:340px;
    text-decoration: none;
}

/*-- top guest lectures --*/

#guest{
	position:relative;
	z-index: 2;
	overflow: hidden;
	padding:2% 0 17% 0;
 }

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

#guest h2{
    color:#fff;
    font-size:5rem;
    text-align: center;
    margin:0 0 50px 0;
}

#guest h2:after{
   border-bottom: 1px solid #fff;
}

.guest-block{
    display: flex;
    justify-content:space-between;
    flex-wrap: wrap;
} 

.guest-block section{
    width:30%;
}

.guest-block .img-block{
    position: relative;
}

.guest-block .img-block p{
    position: absolute;
    bottom:0;
    left:0;
}

.guest-block .img-block p span.bgy{
    background:#ff0;
    color: #000;
    padding: 0 10px;
}

.guest-block .img-block p i{
    color: #ff0;
}

.guest-block h3{
    margin:20px 0;
}

.guest-block h3 span{
    color: #ff0;
    font-size:1.2rem;
    display: block;
}

#guest .btn{
    margin:0 0 50px 0;
}

#guest .btn a{
    max-width:340px;
    text-decoration: none;
}

/* =media query
-----------------------------------------------------------------------------*/
@media only screen and (max-width:1255px){
    #workshop h2{margin:0 0 5px 0;}
    #workshop .heading-block .date{
        padding: 0;
        width: 100%;
        margin:0 0 50px 0;
    }
    #workshop #ws-time .ws-time-block dt.box-time{
        font-size:2rem;
    }
}

@media only screen and (max-width:1235px){
#stage .stage-detail,
#stage ul.stage-img{
    width: 48%;
}
    
#stage ul.stage-img li:nth-child(1),
#stage ul.stage-img li:nth-child(4){
     width:200px;
}

#stage ul.stage-img li:nth-child(2),
#stage ul.stage-img li:nth-child(3),
#stage ul.stage-img li:nth-child(5){
      width:300px;
}

}

@media only screen and (max-width:1075px){
.home #header .circle-list li a{
     font-size:0.8rem;   
    width:100px;
    height: 100px;
    }
    
}

@media only screen and (max-width:995px){
    #workshop #ws-time .ws-time-block dt.box-time{
        width:25%;
    }
    #workshop #ws-time .ws-time-block{
        width:40%;
    }
    #workshop #ws-time .ws-time-block:nth-child(3),
    #workshop #ws-time .ws-time-block:first-child{
        width:57%;
    }
    
    #workshop #ws-time .ws-time-block:nth-child(3) dt.box-time{
        display: block;
    }

    #workshop #ws-time .ws-time-block:nth-child(1) dd.box,
    #workshop #ws-time .ws-time-block:nth-child(3) dd.box{
        width: 68%;
    }
    #workshop #ws-time .ws-time-block:nth-child(1) h3,
    #workshop #ws-time .ws-time-block:nth-child(3) h3 {
    position: relative;
    left: 21%;
}
}

@media only screen and (max-width:970px){
    .about-block:first-child p{
        font-size: 1rem;
    }
    #stage .heading-block{
        margin: 0 0 40px 0;
    }
    #stage .top-lead{
        position: relative;
        width:100%;
        top:inherit;
        margin:0 0 40px 0;
    }
#stage .stage-detail,
#stage ul.stage-img{
    width:100%;
    min-height: inherit;
    margin:0 0 20px 0;
} 

#stage .stage-performer-area{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
}
    
#stage ul.stage-img{
    display: flex;
    flex-wrap: wrap;
    justify-content:space-around;
}

#stage ul.stage-img li:nth-child(1),
#stage ul.stage-img li:nth-child(2),
#stage ul.stage-img li:nth-child(3),
#stage ul.stage-img li:nth-child(4),
#stage ul.stage-img li:nth-child(5){
    position: relative;
    top:inherit;
    left: inherit;
    margin: 0 0 20px 0;
    }
    
}
@media only screen and (max-width:900px){
    #logo{
        top:30%;
    }

#news-area{
	left:inherit;
	bottom:inherit;
	max-width: inherit;
	top:58%;
    width:100%;
	padding:60px 20px;
}

#news-area:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 65%;
  margin: 0 -10% 0;
  background: #000;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
  z-index: -1;
}

    
#news-area h2{
        display: block;
        float: none;
        width:auto;
    margin: 0 0 20px 0;
}
    
#news-block{
	height:230px!important;
    font-size:0.9rem;
}

#news-area ul li {
    padding: 5px 0!important;
    height: auto!important;
}
    
.home #header .circle-list{
    width:100%;
     right:inherit;
     bottom:inherit;
     top:90%;
     background:#000;
     z-index: 2;
}
    
.home #header .circle-list li {
    width: 33.333%;
    margin:0;
    text-align: center;
}
    
.home #header .circle-list li a {
    background:#ff0;
    color: #000;
    width: auto;
    height:auto;
    border-radius: 0;
    border: 5px solid #000;
    padding: 10px;
}
    
.home #header .circle-list li a:hover,
.home #header .circle-list li a:active{
    background:#666;
    }
#party .detail-block {
    width: 48%;
}

.guest-block {
    display:block;
}
.guest-block section{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin:0 0 50px 0;
}
    .guest-block .img-block{
        width:35%;
    }
    .guest-block .description-block{
        width:60%;
    }
    .guest-block .img-block p{
        position: relative;
    }
}

@media only screen and (max-width:798px){
    #party .img-block,
    #party .detail-block{
        width:100%;
        margin: 0 0 20px 0;
    }
    #party .heading-block .date span{
        font-size:3rem;
    }

}

@media only screen and (max-width:760px){
.about-block{
    width:100%;
}
    #stage .heading-block{
        display: block;
    }
    
      #stage h2{
      text-align: right;
     }
    #stage .heading-block .date{
        padding: 0;
    }

    #stage .stage-performer{
        width:48%;
    }
    #audition .link-area{
        text-align: left;
    }
    #audition h2{
        font-size:1.4rem;
    }
    #party h2{
           font-size: 5rem;
    }
    #guest h2{
        font-size:4rem;
    }

}

@media only screen and (max-width:700px){
    #workshop #ws-time .ws-time-block dt.box-time{
        font-size:1.5rem;
    } 
    
    #audition .btn a,
    #guest .btn a,
    #workshop .btn a{
        max-width: inherit;
    }
}

@media only screen and (max-width:665px){
    #party h2{
        font-size:7rem;
        margin: 0 0 20px 0;
       width:100%;
    }
    #party .heading-block .date{
        padding: 0 0 20px 0;
    }
    #party .img-block p{
        right: 0;
        line-height: 1.6;
        font-size:0.9rem;
    }

    
    #workshop h2{
        font-size:4rem;
    }
    #workshop .heading-block .date span,
    #guest h2{
        font-size:3rem;
    }
    #guest h2{
        line-height: 1;
    }
}
   
@media only screen and (max-width:540px){
#workshop .price,
#workshop .place{
    width:100%;
}
    #workshop #ws-time .ws-time-block dt.box-time{
        font-size:1.2rem;
        white-space: nowrap;
    } 
}

@media only screen and (max-width:500px){
    #stage .stage-btn li{
        width:100%;
        margin: 0 0 20px 0;
    }
    #stage .stage-btn li a{
        min-height: inherit;
    }
    
    #stage .stage-detail .date{
        font-size:1.4rem;
        text-align: left;
    }
    
    #party .detail-block .place dt,
    #party .detail-block .price,
    #stage .stage-detail .price{
        font-size:1rem;
    text-align: left;
    }
    #workshop #ws-time .ws-time-block dd.box dl ul{
        display: block;
    }
    #workshop #ws-time .ws-time-block dd.box{padding:5px;}
    #workshop #ws-time .ws-time-block dd.box dl ul li:first-child{
        margin: 0 0 10px 0;
    }
}

@media only screen and (max-width:470px){
    #stage h2,
    #party h2{
        font-size:4.5rem;
     }
    #stage .heading-block .date span{
        font-size:3rem;
    }
    #workshop h2{
        font-size:3.5rem;
    }
    #workshop .heading-block .date{
        font-size:1rem;
    }
    #workshop .heading-block .date span{
        font-size:2rem;
    }
    #stage .stage-performer,
    .guest-block .img-block,
    .guest-block .description-block{
        width:100%;
    }
   
}

@media only screen and (max-width:400px){
    #about h2{
        font-size:4rem;
    } 
    .about-block:first-child p br{
        display: none;
    }
    #workshop h2{
        font-size:2.6rem;
    }
    #workshop .price{
        font-size:1.2rem;
    }
    #workshop #ws-time .ws-time-block h3{
        font-size:2rem;
    }
    #workshop #ws-time .ws-time-block dt.box-time{
        font-size:1rem;
    }
    #workshop #ws-time .ws-time-block dt.box-time span{
        font-size:0.9rem;
    }
#workshop #ws-time .ws-time-block:nth-child(3), #workshop #ws-time .ws-time-block:first-child {
    width: 59%;
}
#workshop #ws-time .ws-time-block {
    width: 40%;
}

}