@charset "UTF-8";

/* -----------------------------------------------------------------
COMMON STYLE
----------------------------------------------------------------- */
.main { background: #f2f3f7; padding-bottom: 100px}
.inner { width: 100%; max-width: 1260px; margin: 0 auto; padding: 0 30px}
.container { max-width: 1260px; margin: auto; }
@media screen and (min-width: 769px) {
  .inner { padding: 0 20px}
  .container { padding: 0 0 0 10px}
}
/* CRUMBS */
.crumbs { padding-top: 25px; font-size: 12px; color: #808080}
.crumbs .inner { display: flex; justify-content: flex-start; align-items: center}
.crumbs a { color: #009bdc}
.crumbs a:after { content: ">"; color: #808080;  padding: 0 10px}
@media screen and (min-width: 769px) {
  .crumbs { font-size: 14px}
  .crumbs a:after { padding: 0 15px}
}
/* TITLE */
.title { display: flex;  justify-content: center; align-items: center; height: 105px; background: #009bdc}
.title__head { color: #fff; font-size: 20px; font-weight: 700}
@media screen and (min-width: 769px) {
  .title { height: 210px}
  .title__head { font-size: 30px}
}
/* -----------------------------------------------------------------
SEMINAR
----------------------------------------------------------------- */
.sec-seminar { padding-top: 0}
.sec-seminar:last-of-type { padding-bottom: 0}
.sec-seminar h2 { position: relative; display: flex; justify-content: center; align-items: center; margin-top: 50px; padding: 10px 0; color: #333; font-size: 18px; font-weight: 500; background: #c2e5ff; border-radius: 3px}
.sec-seminar:first-of-type h2 { margin-top: 0}
.sec-seminar h2 img { position: absolute; bottom: 0; right: 20px; width: auto; height: 60px}
.sec-seminar h3 { margin-top: 50px; padding-left: 20px; font-size: 18px; font-weight: 500; text-align: left; border-left: 3px solid #009bdc}
.sec-seminar h3:first-of-type { margin-top: 30px}
.ul-seminar { display: flex; justify-content: flex-start; flex-wrap: wrap; margin-top: 30px; }
.ul-seminar li { width: 100%}
.ul-seminar li .img-border { display: block; padding: 8px; border: 1px solid #bbb; background: #fff; border-radius:  8px; box-shadow: 3px 3px 3px rgba(0,0,0,.1)}
.ul-seminar li img { width: 100%; height: auto; object-fit: cover; border-radius:  8px}
.ul-seminar li .icon-area { width: 100%; margin: 15px 0 5px}
.ul-seminar li .icon-area span { display: flex; justify-content: center; align-items: center; width: fit-content;  min-width: 80px; height: 20px; padding: 0 20px; font-size: 12px; border-radius: 8px}
.ul-seminar li .icon-area span.live { color: #fff; background: #dc1357}
.ul-seminar li .icon-area span.meo, .ul-seminar li .icon-area span.booster { color: #fff; background: #009bdc}
.ul-seminar li .icon-area span.talk { color: #fff; background: #00da7e}
.ul-seminar li .ttl { font-weight: bold; line-height: 1.5}
.ul-seminar li .seminar-info { margin-top: 15px}
.ul-seminar li .date { color: #009bdc; font-weight: bold}
.ul-seminar li .date::before { content: "開催日："; color: #333; font-weight: bold}
.ul-seminar li .area::before { content: "場所："; font-weight: bold}
.ul-seminar li .deadline::before { content: "締切："; font-weight: bold}
.ul-seminar li .btn-detail { display: flex; justify-content: center; align-items: center; width: 250px; height: 40px; margin: 20px auto 0; color: #fff; background: #333; border-radius: 3px}
@media screen and (max-width: 768px) {
  .ul-seminar li { margin-top: 40px}
  .ul-seminar li:first-child { margin-top: 0}
}
@media screen and (min-width: 768px) {
  .sec-seminar h2 { height: 100px; font-size: 26px}
  .sec-seminar h2 img { height: 120px}
  .sec-seminar h2.left img{ right: 10%}
  .sec-seminar h2.right img { right: 10%}
  .sec-seminar h3 { font-size: 20px}
  .ul-seminar li { width: 32%; margin-right: 2%}
  .ul-seminar li:nth-child(3n) { margin-right: 0}
  .ul-seminar li .ttl { font-size: 18px}
  .ul-seminar li .seminar-info { font-size: 13px}
  .ul-seminar li .btn-detail { margin-top: 30px}
}
@media screen and (min-width:769px) and ( max-width:1024px) {
  .ul-seminar li { width: 48%; margin-right: 2%}
  .ul-seminar li:nth-child(2n) { margin-right: 0}
  .ul-seminar li:nth-child(n+3) { margin-top: 40px}
}