@charset "utf-8";

/****************
 * Google Fonts *
****************/
@import url('https://fonts.googleapis.com/css2?family=Zen+Antique&display=swap');

.contentIn {
  max-width: 100%;
  padding: 0;
}

#heading > div.contentIn {
  padding: 0 10px;
  max-width: 1280px;
}

#contentsBox {
  font-family: "Zen Antique", serif;
  font-size: 15px;
  width: auto;
  background: url(/kyobun/images/bg.jpg) no-repeat;
  background-size: cover;
  padding: 2em 0 4em;
}

#contentsBox h2 {
  text-align: center;
  font-size: 60px;
  color: #003399;
  text-shadow :
  4px  4px 6px #ffffff,
  -4px  4px 6px #ffffff,
   4px -4px 6px #ffffff,
  -4px -4px 6px #ffffff,
   4px  0px 6px #ffffff,
   0px  4px 6px #ffffff,
  -4px  0px 6px #ffffff,
   0px -4px 6px #ffffff;
  margin: 2em 0;
}

.kyobun_body section {
  width: 1080px;
  margin: 0 auto 4em;
}

.kyobun_body .bg_wht {
  background: rgba(255, 255, 255, 0.75);
  padding: 2em;
  border-radius: 2em;
}

.kyobun_body .lead {
  font-size: 24px;
}

.kyobun_body .total {
  color: #0000ff;
  text-align: center;
  font-size: 36px;
  margin: 0.5em 0;
}

.kyobun_body .total span {
  border-bottom: 2px solid;
}

.kyobun_body .total span.sm {
  font-size: 21px;
  border-bottom: none;
}

.kyobun_body .lead p:last-child {
  text-align: right;
}

.kyobun_body .item {
  margin: 1em 1em 3em;
}

.kyobun_body .item:last-child {
  margin: 1em;
}

.kyobun_body .item h4 {
  position: relative;
  text-shadow: 0 0 2px white;
  z-index: 0;
  font-size: 24px;
  margin: 0 0 0.5em;
  letter-spacing: 0.5em;
}

.kyobun_body .item h4::before {
  content: "";
  position: absolute;
  background: linear-gradient(45deg, lightskyblue, transparent);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  top: 50%;
  left: -0.5em;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: -1;
}

.kyobun_body .item .detail {
  font-size: 21px;
  padding: 0 1em;
  line-height: 1.75em;
}

.kyobun_body .item .detail div {
  margin: 1em 0 0;
}

.kyobun_body .item .detail img {
  vertical-align: bottom;
}

.kyobun_body .blu {
  color: #0000ff !important;
}

.kyobun_body .red {
  color: #ff0000 !important;
}

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

  #contentsBox {
    font-size: 12px;
  }

  #contentsBox h2 {
    font-size: 8vw;
    text-shadow :
    0.1em  0.1em 0.2em #ffffff,
    -0.1em  0.1em 0.2em #ffffff,
     0.1em -0.1em 0.2em #ffffff,
    -0.1em -0.1em 0.2em #ffffff,
     0.1em  0px 0.2em #ffffff,
     0px  0.1em 0.2em #ffffff,
    -0.1em  0px 0.2em #ffffff,
     0px -0.1em 0.2em #ffffff;
  }

  .kyobun_body {
    margin: 0 1em;
  }

  .kyobun_body section {
    width: auto;
  }

  .kyobun_body .bg_wht {
    padding: 1em;
    border-radius: 1em;
  }

  .kyobun_body .lead {
    font-size: 16px;
  }

  .kyobun_body .total {
    font-size: 24px;
  }

  .kyobun_body .item h4 {
    font-size: 21px;
  }

  .kyobun_body .item {
    margin: 1em 0 3em 1em;
  }

  .kyobun_body .item .detail {
    font-size: 16px;
    padding: 0 0.5em;
  }

  .kyobun_body .item .detail img {
    vertical-align: middle;
  }

}