@charset "utf-8";

/* === layout === */
@media screen and (min-width: 768px) {
  section {
    margin-bottom: 95px;
  }
}
@media not all and (min-width: 768px) {
  section {
    margin-bottom: 50px;
  }
}

/* === parts === */
@media screen and (min-width: 768px) {
  .area_2clm.ptnBsc p {
    flex: 1;
  }
  .area_2clm.ptnBsc .bscImg {
    width: 350px;
    margin-left: 16px;
  }
}
@media not all and (min-width: 768px) {
  .area_2clm.ptnBsc .bscImg {
    margin-top: 8px;
  }
}

@media screen and (min-width: 768px) {
  .btnBox {
    width: 600px;
    margin: 40px auto 0;
  }
  .btnBox a {
    transition : all 0.3s ease;
    padding-top: 18px;
    padding-bottom: 18px;
  }
}
@media not all and (min-width: 768px) {
  .btnBox {
    margin-top: 20px;
  }
}

/* === .topic === */
.topic .topicInner {
  background-color: #dce6f2;
  border-radius: 16px;
  position: relative;
}
.topic .topicInner::before {
  content: "";
  background: url( /assets/img/common/topic_img.png );
  position: absolute;
}
.topic .topicInner h2 {
  line-height: 1.3;
  border-bottom: 2px solid #215968;
}
.topic .topicInner .area_2clm {
  background-color: #fff;
}
.topic .topicInner h3 {
  display: inline-block;
  border-bottom: 1px solid #000;
  margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
  .topic .topicInner {
    margin: 0 0 0 32px;
    padding: 32px;
  }
  .topic .topicInner::before {
    width: 200px;
    height: 70px;
    top: 24px;
    left: -26px;
  }
  .topic .topicInner h2 {
    font-size: calc(30 / 16 * 1rem);
    text-align: center;
    padding-bottom: 24px;
  }
  .topic .topicInner h2+p {
    margin-top: 16px;
  }
  .topic .topicInner .area_2clm {
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 32px;
    margin-top: 32px;
  }
  .topic .topicInner .topicTxt {
    flex: 1;
  }
  .topic .topicInner .topicImg {
    width: 330px;
    margin-left: 16px;
  }
}
@media not all and (min-width: 768px) {
  .topic .topicInner {
    margin: 0 0 0 13px;
    padding: 16px;
  }
  .topic .topicInner::before {
    background-size: 100px 35px;
    width: 100px;
    height: 35px;
    top: 16px;
    left: -13px;
  }
  .topic .topicInner h2 {
    padding: 0 0 8px 72px;
  }
  .topic .topicInner h2+p {
    margin-top: 8px;
  }
  .topic .topicInner .area_2clm {
    padding: 16px;
    margin-top: 16px;
  }
  .topic .topicInner .topicImg {
    margin-top: 8px;
  }
}

/* === .workshop === */
.workshop .workshopInner {
  border: 2px solid #ccc;
}
.workshop .workshopInner h2 {
  color: #840017;
  line-height: 1.3;
  text-align: center;
}
.workshop .workshopInner h3 {
  line-height: 1.4;
}
.workshop .workshopInner h3+ul {
  margin-top: 8px;
}
@media screen and (min-width: 768px) {
  .workshop .workshopInner {
    padding: 32px;
  }
  .workshop .workshopInner h2 {
    font-size: calc(24 / 16 * 1rem);
  }
  .workshop .workshopInner h3 {
    margin-top: 16px;
  }
}
@media not all and (min-width: 768px) {
  .workshop .workshopInner {
    padding: 16px;
  }
  .workshop .workshopInner h2 {
    letter-spacing: 0;
  }
  .workshop .workshopInner h3 {
    margin-top: 12px;
    letter-spacing: 0;
  }
}