/* ------------------------ title */
div.content-title{
  width: 100%;
  background-image: url("../images/bk-head.png");
  padding: 80px 16px;
  margin-bottom: 20px;
}
div.content-title h1{
  font-size: 1.4em;
}
@media screen and (max-width: 600px) {
  div.content-title h1{
    font-size: 1.1em;
  }
}

/* ------------------------ section-content */
section.content .inner{
  max-width: 1200px;
}

/* ------------------------ title */
section.content ul.title li{
  /* background-color: #f6f3f0; */
  /* font-size: 1.1em; */
  /* font-weight: 700; */
  /* line-height: 30px; */
  /* padding: 30px 16px; */
  border-radius: 10px;
  border-bottom: 1px dotted #1AA0C9;

  padding-bottom: 20px;
  margin-bottom: 20px;
}
section.content ul.title li > div{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
section.content ul.title li > div:first-of-type{
  margin-bottom: 16px;
}
section.content ul.title li span{
  width: 100px;
  text-align: center;
  color: #1AA0C9;
  background-color: #ffffff;
  border: 1px solid #1AA0C9;
  border-radius: 30px;
  margin-right: 20px;
  padding: 3px 8px;
}
section.content ul.title p.teacher-title{
  margin-right: 16px;
}
@media screen and (max-width: 600px) {
  section.content ul.title li{
    font-size: 1em;
    padding: 30px 14px;
  }
  /* section.content ul.title li p:first-of-type{
    margin-bottom: 16px;
  } */
}

/* ------------------------ detail-list */

section.content ul.detail li{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 20px;
}
section.content ul.detail li:last-child{
  margin-bottom: 50px;
}
section.content ul.detail li p,
section.content ul.detail li a{
  padding-top: 4px;
}
section.content ul.detail li > span{
  display: block;
  width: 100px;
  text-align: center;
  margin-right: 16px;
}
section.content ul.detail.box01 li > span{
  color: #ffffff;
  border: 1px solid #004B84;
  background-color: #004B84;
  border-radius: 3px;
  padding: 5px 8px;
}
section.content ul.detail.box02 li > span{
  color: #1AA0C9;
  border: 1px solid #1AA0C9;
  background-color: #fff;
  border-radius: 30px;
  padding: 3px 8px;
}
section.content ul.detail li.file a{
  display: block;
  color: #000;
  margin-bottom: 16px;
}
section.content ul.detail li.file a:hover{
  color: #1AA0C9;
}
section.content ul.detail li.file a:last-of-type{
  margin-bottom: unset;
  padding-bottom: unset;
}
section.content ul.detail li.file a > span{
  font-size: 0.9em;
  border-radius: 3px;
  padding: 0 5px;
  margin-left: 8px;
}
p.close-comment{
  color: #CC1919;
}
section.content ul.detail li.file a > span.pdf{
  color: #CC1919;
  border: 1px solid #CC1919;
}
section.content ul.detail li.file a > span.word{
  color: #1667E1;
  border: 1px solid #1667E1;
}
section.content ul.detail li.file a > span.pdf{
  color: #CC1919;
  border: 1px solid #CC1919;
}
section.content ul.detail li.file a > span.excel{
  color: #0b8d48;
  border: 1px solid #0b8d48;
}


section.content div.other,
section.content div.url{
  border-top: 1px dotted #1AA0C9;
  padding: 25px 16px;
}

section.content ul.detail.box02 li:first-child{
  border-bottom: 1px dotted #1AA0C9;
  padding-bottom: 20px;
}
@media screen and (max-width: 500px) {
  section.content.inner ul.detail{
    max-width: 400px;
    margin: 0 auto;
  }
  section.content ul.detail li{
    flex-direction: column;
  }
  section.content ul.detail li > span{
    font-size: 0.9em;
    margin-right: unset;
  }
  section.content ul.detail li p,
  section.content ul.detail li a{
    padding-top: 14px;
  }
  section.content ul.detail li.file a{
    margin-bottom: unset;
  }

  section.content div.other,
  section.content div.url{
    padding: 25px 0;
  }
}

/* ------------------------ url */
section.content div.url{
  border-bottom: 1px dotted #1AA0C9;
  text-align: center;
  margin-bottom: 30px;
}
section.content div.url > p{
  color: #CC1919;
  font-size: 1.4em;
  font-weight: 700;
  margin-bottom: 14px;
}
section.content div.url > a{
  display: block;
  width: 100%;
  max-width: 280px;
  color: #fff;
  background-color: #004B84;
  margin: 0 auto;
  padding: 16px 0;
}
section.content div.url > a:hover{
  opacity: 0.2;
  transition: 0.3s
}
/*  url-close */
section.content div.url.close > p.closing,
section.content div.url > p.closing-none{
  color: #888;
}
section.content div.url.close p:last-of-type{
  display: block;
  width: 100%;
  max-width: 280px;
  color: #fff;
  background-color: #888;
  margin: 0 auto;
  padding: 16px 0;
}

section.content div.url.date-end > p{
  margin-bottom: unset;
}

/* ------------------------ contact */
div.contact-area{
  text-align: right;
  line-height: 25px;
  margin-bottom: 50px;
}
div.contact-area span{
  display: block;
  margin-bottom: 10px;
}
div.contact-area p{
  font-size: 1.1em;
}