/* CSS Document */

#top-disp {
    margin: 0px auto 40px;
    min-width: 1200px;
}

/*==========================================
	+today-atelier
==========================================*/
#today-atelier {
}
#today-atelier li {
    width: 250px;
    float: left;
    margin: 0 32.5px 40px 0;
}
#today-atelier li:nth-child(4n) {
    margin: 0 0 40px 0
}
#today-atelier li a {
    text-decoration: none;
}
.today-img {
    height: 176px;
    overflow: hidden;
    margin: 0 auto 15px;
    position: relative;
}
#today-atelier li a:hover img {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure {
  position: relative;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
figure:hover::before {
  -webkit-animation: shine .75s;
  animation: shine .75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

#today-atelier dl {
    font-family: 'Kosugi Maru', sans-serif  !important;
    font-weight: 500;
    transition: .3s;
}
#today-atelier dt {
    font-size: 12px;
    box-sizing: border-box;
    padding: 0 5px 10px 5px;
    background-position: left bottom;
    background-repeat: repeat-x;
}
#today-atelier dt span{
  display: inline-block;
}
#today-atelier dd {
    font-size: 16px;
    font-weight: bold !important
}
#today-atelier li:first-child dt ,
#today-atelier li:nth-child(5) dt {
    background-image: url("../images/today/line-red.png");
}
#today-atelier li:nth-child(2) dt,
#today-atelier li:nth-child(6) dt {
    background-image: url("../images/today/line-blue.png");
}
#today-atelier li:nth-child(3) dt,
#today-atelier li:nth-child(7) dt {
    background-image: url("../images/today/line-yellow.png");
}
#today-atelier li:nth-child(4) dt,
#today-atelier li:nth-child(8) dt {
    background-image: url("../images/today/line-green.png");
}
#today-atelier a:hover dt span, 
#today-atelier a:hover dd {
  transform: rotate(3deg);
}

#atelier-link a {
    margin: 10px auto 0;
    position: relative;
    width: 335px;
    text-decoration: none;
    text-align: center;
    line-height: 42px;
    height: 50px;
    font-family: 'TakaHandStd' !important;
    font-size: 16px;
    box-sizing: border-box;
    border: 4px solid #32b4c3;
    display: block;
    outline: none;
    z-index: 2;
    overflow: hidden;
}
#atelier-link a .fas {
    color: #32b4c3;
    position: absolute;
    right: 20px;
    font-size: 18px;
    line-height: 42px;
}
#atelier-link a::before,
#atelier-link a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
#atelier-link a,
#atelier-link a::before,
#atelier-link a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

#atelier-link a:hover,
#atelier-link a:hover .fas {
  color: #fff !important;
}
#atelier-link a::after {
  top: -100%;
  width: 100%;
  height: 100%;
}
#atelier-link a:hover::after {
  top: 0;
  background-color: #32b4c3;
}

/*==========================================
	+atelier-about
==========================================*/
#atelier-about {
    text-align: center
}
#atelier-about  p {
    margin: 0 auto 30px;
}



/*==========================================
	+atelier-staf
==========================================*/
#atelier-staff ul {
    text-align: center;
    margin-bottom: 60px;
}
#atelier-staff li {
    width: 30%;
    display: inline-block;
    margin: 0 15px;
}
#atelier-staff li a {
    text-align: center;
    font-family: 'TakaHandStd' !important;
    font-size: 16px;
    text-decoration: none
}
.staff-img {
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    /* height: 214px; */
    /* border-radius: 50%; */
    /* border-width: 10px; */
    /* border-style: solid; */
    /* margin: 0 0 15px; */
    color: #5e5e5e;
    transition: .5s;
    transform: rotateY( 0deg );
}
#atelier-staff li:hover .staff-img {
    transform: rotateY( 360deg ) ;
}
#atelier-staff li:first-child .staff-img  {
    border-color: #f1b8c3
}
#atelier-staff li:first-child a:hover  {
    color: #f1b8c3 !important
}
#atelier-staff li:nth-child(2) .staff-img  {
    border-color: #aed0ee;
}
#atelier-staff li:nth-child(2) a:hover   {
    color: #aed0ee !important
}
#atelier-staff li:nth-child(3) .staff-img  {
    border-color: #f1bc66
}
#atelier-staff li:nth-child(3) a:hover  {
   color: #f1bc66 !important
}
#atelier-staff li:nth-child(4) .staff-img  {
    border-color: #bad867
}

#atelier-staff li:nth-child(4) a:hover   {
    color: #bad867 !important
}

/*------ staff-detal -----*/
.modal > label {
    cursor: pointer;
    display: inline-block;
}
.modal-overlay {
    background: rgba(0,0,0,0.6);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center;
}
.modal-wrap {
    position: relative;
    width: 850px;
    margin: 10% auto;
    background: #32b4c3;
    box-sizing: border-box;
    padding: 20px;
    border-radius: 5px;
    color: #fff;
    text-align: left;
    display: flex;
}
.modal-wrap label {
    width: 30px;
    height: 30px;
    background: url("../images/clase.jpg") no-repeat ;
    cursor: pointer;
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-block;
}
input {
    position: absolute;
    z-index: -9999;
    visibility: hidden;
}
.modal-overlay {
    opacity:0;
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    -moz-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    -ms-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    -o-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
    z-index: -999;
}
input:checked ~ .modal-overlay {
    opacity: 1;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -0-transform: scale(1);
    transform: scale(1);
    z-index: 999;
}
.modal-wrap dt  {
    margin: 10px auto;
    font-weight: bold;
    text-align: left;
    color: #fff !important;
    font-size: 20px;
}
.modal-wrap dd  p {
    width: calc(100% - 230px);
    text-align: left;
    color: #fff;
    float: left
}
.staff-detail-inner {
    margin: -10px 0 15px;
    float: right;
    width: 214px;
    text-align: center;
}
.staff-detail-img {
    box-sizing: border-box;
    overflow: hidden;
    width: 215px;
    /* height: 214px; */
    margin: 0 0 10px;
    /* border-radius: 50%; */
    /* border: 10px solid #1492a1; */
}
.staff-detail-inner span {
    color: #fff;
}
.staff_img_in{
  width:450px;
}
.staff_cmt_in{
  padding:0 0 0 10px;
  width:calc(100% - 450px);
}

.staff_name{
    font-size: 23px;
    font-family: 'TakaHandStd' !important;
}
.com_title{
    font-size: 18px;
    line-height: 1.4;
    font-weight: bold;
}
.staff_name span{
    display: inline-block;
    /* padding: 0 5px; */
    position: relative;
    line-height: 1.2;
}
.staff_name span b{
    position: relative;
    z-index: 999;

}
.staff_name span:before{
    /* content: ''; */
    width: 100%;
    height: 5px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #fffb00;
    z-index: 990;
}
.inline_disp figure{
    width: 60%;
    display: inline-block;
}
.inline_disp div{
    display: inline-block;
    width: 36%;
    padding: 0 0 0 15px;
    vertical-align: text-bottom;
    box-sizing: border-box;
    line-height: 1.7;
}

.comment_disp dt{
    border-radius: 20px;
    width: 145px;
    padding: 0 0 0 16px;
    font-size:14px;
    background: #1d92a0;
    margin: 0;
}
.comment_disp dd{
	margin: 3px 6px 10px;
	font-size:14px;
}



/*==========================================
	+atelier-flow
==========================================*/
#atelier-flow {
    text-align: center
}
#atelier-flow li {
    float: left;
    width: 240px;
    margin: 20px 40px 0 0;
    position: relative;
}
.flow-img {
    min-height: 91px;
    height: 91px;
    overflow: hidden
}
#atelier-flow li .fas {
    position: absolute;
    right: -27px;
    top: 115px;
    font-size: 20px;
    color: #32b4c3
}
#atelier-flow li:last-child {
    margin: 20px 0 0;
}
#atelier-flow li dt {
    border:3px solid #f0a8b6;
    font-family: 'TakaHandStd' !important;
    font-size: 18px;
    line-height: 50px;
    margin: 10px;
    font-weight: normal
}
#atelier-flow li dd {
    line-height: 1.4
}
#atelier-flow li dd span {
    font-size: 12px;
    padding: 10px 0 0;
}

#atelier-flow h3 {
    margin: 60px auto 10px;
    font-size: 26px;
    font-family: 'TakaHandStd' !important;
    font-weight: normal
}


/* activity  */
section#activity{
	margin: 70px 0 30px;
}

#activity ul{
	display: flex;
	margin: 65px auto 0;
	padding: 0 0 70px;
	justify-content: center;
}
#activity ul li{
    width: 20%;
    padding: 0 3px;
    font-size: 14px;
    line-height: 1.6;
}

#activity ul li p{
	margin:10px 0 0;
}