@charset "utf-8";


/*---------------------------------------------
--------------------------------------------
 Workshop
--------------------------------------------
---------------------------------------------*/


/* workshop_page
--------------------------------------------*/

.video_container {
  max-width: 640px;
  margin: 30px auto 0;
  text-align: center;
}

.video_wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.video_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.video_container .video_title {
  margin-top: 20px;
  line-height: 1.4;
  font-size: 2.0rem;
  font-weight: 600;
  color: #006636;
}

.video_container .video_date {
  margin-top: 10px;
  line-height: 1.4;
  font-size: 1.8rem;
  font-weight: 600;
}

.list_workshop {
  margin-top: 30px;
  border-top: 2px solid #006636;
}

.list_workshop li {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 30px 0;
  border-bottom: 2px dashed #006636;
}

.list_workshop li:last-child {
  border-bottom: none;
}

.list_workshop figure {
  width: 285px;
  margin-right: 30px;
  line-height: 1;
}

.list_workshop figure img {
  width: 100%;
  height: auto;
}

.list_workshop .list_workshop_text {
  flex: 1;
}

.list_workshop .list_workshop_title {
  line-height: 1.4;
  font-size: 1.8rem;
  font-weight: 600;
  color: #006636;
}

.list_workshop .list_workshop_date {
  margin-top: 10px;
  padding-bottom: 10px;
  line-height: 1.4;
  font-size: 1.6rem;
  font-weight: 600;
}

.list_workshop .list_workshop_link {
  position: relative;
  width: 180px;
}

.list_workshop .list_workshop_link a {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
}

.list_workshop .list_workshop_link a:hover {
  opacity: .7;
  background-color: transparent;
}

.list_workshop .list_workshop_link a img {
  width: 100%;
}

/*---------------------------------------------
---------------------------------------------
-------------------------------------------
-----------------------------------------
---------------------------------------
-------------------------------------
-----------------------------------
---------------------------------
-------------------------------

 SP CSS START  */



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



/* workshop_page ■■■ SP ■■■
--------------------------------------------*/

.list_workshop li {
  flex-wrap: wrap;
}

.list_workshop figure {
  width: 100%;
  margin-right: 0;
  text-align: center;
}

.list_workshop figure img {
  width: 85%;
  margin: 0 auto;
}

.list_workshop .list_workshop_title {
  margin-top: 10px;
  text-align: center;
}

.list_workshop .list_workshop_date {
  text-align: center;
}

.list_workshop .list_workshop_link {
  width: 100%;
  height: 90px;
}

.list_workshop .list_workshop_link a {
  width: 70px;
  height: 70px;
  margin: -25px 0 0 -35px;
}


}
/*   SP CSS END

-------------------------------
---------------------------------
-----------------------------------
-------------------------------------
---------------------------------------
-----------------------------------------
-------------------------------------------
---------------------------------------------
---------------------------------------------*/