@charset "UTF-8";
/* CSS Document */

.style01 {
  font-size: 14px;
}
.style02 {
  font-size: 18px;
}
.style03 {
  font-size: 16px;
}

.style_event01 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px 10px;
}
.style_event03 {
  font-size: 14px;
  font-weight: bold;
  text-align: right;
  margin-right: 10px;
}
body {
  background-color: #f7f4ec;
  margin-top: 0;
}

#wrapper {
  width: 950px;
  margin: 0 auto;
  border: 1px solid #666;
  background-color: #ffffff;
}
#container {
  width: 950px;
  margin: 0 auto;
}
#header {
  height: 80px;
  width: 950px;
}
#sidebar {
  float: left;

  width: 255px;

  padding-top: 5px;
}

#sidebar ul {
  list-style-type: none;
  margin: 0px 0px 0px 5px;
  padding: 0;
}

#sidebar ul li {
  margin: 0;
  padding: 0;
}

#main {
  float: right;

  width: 685px;
  padding: 5px;
}
#main_event {
  float: right;

  width: 685px;
  padding: 5px;
}
.main01 {
  font-size: 14px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 10px;
  margin-top: 15px;
}

.img_left {
  float: left;
  padding: 0px 10px 5px 5px;
}
.main_event01 {
  width: 630px;
  font-size: 14px;
  margin: 20px 10px 0px 20px;
  border: 1px solid black;
  padding: 5px;
}
.main_event02 {
  width: 600px;
  font-size: 14px;
  margin: 20px 10px 0px 20px;

  padding: 5px;
}
#main_event ul {
  list-style-type: square;
  margin: 5px 0px 30px 30px;
  padding: 0;
  font-size: 14px;
}
#main_event ul li {
  margin: 0px 0px 5px 0px;
  padding: 0;
}

#main_event table {
  padding: 5px 0px 10px 0px;
}
#main_event table td {
  padding: 5px 5px 0 5px;
}

.img_event {
  margin: 20px 0px 10px 0px;

  padding: 5px;
}
.img_event02 {
  margin: 0px 15px 10px 0px;

  padding: 5px;
}
.img_event03 {
  margin: 50px 15px 10px 0px;

  padding: 5px;
}
.main_request01 {
  width: 630px;
  font-size: 14px;
  margin: 20px 10px 0px 20px;
  border: 1px solid black;
  padding: 5px;
}
#main ul {
  list-style-type: square;
  margin: 5px 0px 50px 30px;
  padding: 0;
  font-size: 14px;
}
#main ul li {
  margin: 0px 0px 5px 0px;
  padding: 0;
}
#footer {
  height: 80px;
  width: 950px;
  clear: both;

  padding-top: 10px;
}

.index_news {
  margin: 10px;
  font-size: 14px;
  width: 650px;
}

.index_text01 {
  margin: 20px 0 0 10px;
  font-size: 16px;
  font-weight: bold;
}

.index_table {
  width: 650px;
  border-collapse: collapse;
  border: 1px solid black;
  margin: 10px 0 20px 10px;
}

.index_table td {
  padding: 3px;
  border: 1px solid black;
}

.newsletter {
  margin: 10px 0px 0px 5px;
}
.float_left {
  float: left;
  margin-right: 1em;
}
.floatclear {
  clear: both;
}

.event_text01 {
  font-size: 14px;
  margin: 0px 15px 10px 15px;
}
.event_text02 {
  font-size: 14px;
  font-weight: bold;
  margin: 0px 15px 5px 10px;
}
.event_text03 {
  margin: 5px 10px 5px 10px;
  text-align: right;
}

.event_text04 {
  font-size: 14px;
  margin: 5px 10px 5px 15px;
}

/* greeting */
.greeting_box01 {
  width: 660px;
  padding: 5px;
}
.greeting_box02 {
  width: 650px;
  padding: 5px;
  font-size: 14px;
  margin-bottom: 15px;
  margin-left: 20px;
  margin-right: 10px;
  margin-top: 15px;
}
.greeting_box02 p {
  text-indent: 1rem;
}

.main_greeting01 {
  width: 400px;
  font-size: 16px;
  text-align: right;
  float: right;
}

.greeting_img01 {
  float: left;
  padding: 10px 10px 5px 25px;
}
.style_greeting01 {
  font-size: 22px;
  font-weight: bold;
}
/* newsletter */
.newsletter_box {
  width: 670px;
  margin: 10px 0 20px 0;
}
.newsletter01 {
  width: 320px;
  float: left;
}
.newsletter02 {
  width: 320px;
  float: right;
  margin-right: 20px;
}
.img_newsletter {
  margin: 10px 0px 0px 0px;

  padding: 5px;
}
.newsletter_text01 {
  font-size: 14px;
  font-weight: bold;
  margin: 0px 0px 0px 30px;
}
.newsletter_text02 {
  font-size: 14px;
  font-weight: bold;
  margin: 0px 0px 0px 30px;
}

.member_text01 {
  font-size: 14px;
  margin: 5px 10px 5px 15px;
  text-align: center;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*¥*/ /*/
  height: auto;
  overflow: hidden;
  /**/
}

/* form */
#formWrap {
  width: 650px;
  margin: 0 auto;
  color: #555;
  line-height: 120%;
  font-size: 90%;
}
table.formTable {
  width: 100%;
  margin: 0 auto;
  border-collapse: collapse;
}
table.formTable td,
table.formTable th {
  border: 1px solid #ccc;
  padding: 10px;
}
table.formTable th {
  width: 30%;
  font-weight: normal;
  background: #efefef;
  text-align: left;
}
/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width: 850px) {
  #formWrap {
    width: 95%;
    margin: 0 auto;
  }
  table.formTable th,
  table.formTable td {
    width: auto;
    display: block;
  }
  table.formTable th {
    margin-top: 5px;
    border-bottom: 0;
  }
  form input[type="text"],
  form textarea {
    width: 80%;
    padding: 5px;
    font-size: 110%;
    display: block;
  }
  form input[type="submit"],
  form input[type="reset"],
  form input[type="button"] {
    display: block;
    width: 100%;
    height: 40px;
  }
}

.container {
  display: flex;
  flex-wrap: wrap; /* flexアイテムを折り返す（複数行に配置する） */
}

.column {
  width: calc(50% - 20px); /* 列の幅を均等に分配し、マージンを考慮して計算 */
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box; /* ボックスモデルを維持するために必要なスタイル */
}