@charset "UTF-8";
/* 画面幅別レイアウト設定 */
/* フォント設定 */
/* -------------------------------- */
/* コンテンツ用ボックス */
#contents {
  width: 100%;
  text-align: left;
  background-color: #D5CBB5; }
  #contents p {
    display: inline-block;
    padding: 5px 20px; }
    @media screen and (min-width: 401px) and (max-width: 899px) {
      #contents p {
        width: 96%;
        padding: 5px 8px; } }
    @media screen and (max-width: 400px) {
      #contents p {
        width: 96%;
        padding: 5px 4px; } }
    #contents p::after {
      display: block;
      content: "";
      width: 760px;
      border-bottom: 1px dotted #A08563;
      margin: 8px auto; }
      @media screen and (min-width: 401px) and (max-width: 899px) {
        #contents p::after {
          width: 96%; } }
      @media screen and (max-width: 400px) {
        #contents p::after {
          width: 96%; } }

/*#contents #calendar {
    padding: 10px 50px;
}

#contents span.eventfont1 {
    color: #FFFFFF;
    background-color: #3BA89A;
}

#contents span.eventfont2 {
    color: #FFFFFF;
    background-color: #D1567F;
}*/
.event {
  width: 800px;
  padding: 10px 25px;
  margin: 10px auto;
  background-color: #ebe3cf; }
  @media screen and (min-width: 401px) and (max-width: 899px) {
    .event {
      width: 96%;
      padding: 10px 8px; } }
  @media screen and (max-width: 400px) {
    .event {
      width: 96%;
      padding: 10px 4px; } }
  .event img {
    width: 100%;
    height: auto; }

.event table {
  width: 800px; }
  @media screen and (min-width: 401px) and (max-width: 899px) {
    .event table {
      width: 96%; } }
  @media screen and (max-width: 400px) {
    .event table {
      width: 96%; } }
  .event table td {
    height: 30px;
    border-bottom: 1px solid #A08563; }
  .event table th {
    width: 20%; }