@charset "utf-8";
.tab-area ul{
 display: table;
 width: 100%;
 margin-bottom: 30px;
 height: 36px;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
.tab-area ul li{
 display: table-cell;
 width: 50%;
 text-align: center;
 line-height: 1;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
 background: #f9f9f9;
}
.tab-area ul li a{
 display: block;
 width: 100%;
 height: 100%;
 padding: 10px 0 0;
 text-decoration: none;
 color: #333;
 font-size: 15px;
 font-size: 1.5rem;
 height: 36px;
 position: relative;
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
}
.tab-area ul li.active a{
 background: #98c119;
 color: #FFF;
 font-weight: bold;
}
.tab-area ul li:first-child a{
 border: 1px solid #ccc;
 -webkit-border-radius: 4px 0 0 4px;
         border-radius: 4px 0 0 4px;
}
.tab-area ul li:last-child a{
 -webkit-border-radius: 0 4px 4px 0;
         border-radius: 0 4px 4px 0;
 border-right: 1px solid #ccc;
 border-top: 1px solid #ccc;
 border-bottom: 1px solid #ccc;
}
.tab-area ul li.active a:before{
 content: '';
 position: absolute;
 display: block;
 width: 0;
 height: 0;
 left: 50%;
 top: 42px;
 border-right: 15px solid transparent;
 border-top: 15px solid #ccc;
 border-left: 15px solid transparent;
 -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
.tab-area ul li.active a:after{
 content: '';
 position: absolute;
 display: block;
 width: 0;
 height: 0;
 left: 50%;
 top: 40px;
 border-right: 15px solid transparent;
 border-top: 15px solid #98c119;
 border-left: 15px solid transparent;
 -webkit-transform: translate(-50%,-50%);
 -moz-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 -o-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
h2.subttl{
  color: #EB6666;
  font-size: 24px;
  font-size: 2.4rem;
  margin: 18px 0 26px;
  position: relative;
  padding-left: 4px;
}
h2.subttl:before{
    content: '';
    display: inline-block;
    position: relative;
    left: 0;
    width: 0;
    height: 0;
    border-top: 14px solid #EB6666;
    border-right: 10px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 10px solid transparent ;
}
.workshop-detail{
 padding: 20px 34px;
 margin: 0 0 20px;
 -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
 -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
 box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}
.workshop-detail h3.workshop-ttl{
 font-size: 24px;
 font-size: 2.4rem;
 border-bottom: 1px solid  #D3D3D3;
 padding: 0 4px 2px;
}
.workshop-detail .workshop-type{
 color: #fff;
 font-weight: bold;
 display: inline-block;
 padding: 2px 12px;
 font-size: 12px;
 font-size: 1.2rem;
 line-height: 1.4;
 margin-bottom: 8px;
}
/*.workshop-detail dl{
 margin: 8px 0 0;
}
.workshop-detail dt,
.workshop-detail dd{
 line-height: 1.0;
}
.workshop-detail dt{
  -moz-text-align-last: justify;
  text-align-last: justify;
  position: relative;
  padding-right: 4px;
  white-space: nowrap;
}
.workshop-detail dt:after{
 content: ":";
 position: absolute;
 right: -2px;
}*/
.btn-go-detail{
 text-align: right;
}
.btn-go-detail a{
 display: inline-block;
 -webkit-border-radius: 20px;
         border-radius: 20px;
 text-decoration: none;
 padding: 0 40px;
 text-align: right;
}
.btn-go-detail a{
 color: #363535;
 background: #E8E8E8;
}
.btn-go-detail.active a{
 background: #EB6666;
 color: #fff;
}