:root{
  --base-color: #ffffff;
  --onpoint-color:#fcfc13;
  --menu-color:#e8aec9;
  --theme-color:#c7e187;
  --dark-color: #6a3906;
}

main.main_container{
    width:100%;
    background-color: var(--base-color);
    margin-bottom:-40px;
}

header{
    display: block;
    margin: 0 auto;
    background-color: var(--base-color);
}

header img{
    max-width: 100%;
}

nav.meeting_menu ol{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

nav.meeting_menu {
  background-color:var(--menu-color);
}

nav.meeting_menu li{
  font-family: 'Jun 201', "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  transition: 0.4s ease;
  font-size:150%;
  padding:1em 0;
  width:25%;
  max-width:200px;
  text-align: center;
}

nav.meeting_menu li:hover{
  background-color:var(--theme-color);
  transition: 0.4s ease;
  cursor: pointer;
}

nav.meeting_menu li a{
  color:#fff;
}

nav.meeting_menu li:hover a {
  color:#543;
  transition: 0.4s ease;
}


/* 予約 */
.reserve_container {
  background-color: var(--dark-color);
  overflow: hidden;
}

.reserve_container img{
  float:left;
}

.reserve_container .sp img, .reserve_container .pc{
  width:75%;
}

.reserve_web{
  width:25%;
}

.event_p {
  margin-left: 1em;
  margin-bottom: 10vh;
  padding: 1em;
}



h1{
  text-align: center;
  background-color: var(--base-color);
}

h1 img.pc{
  margin: 0 auto;
  max-height: 30vh;
  max-width: 1080px;
}

.event_container{
    max-width: 1080px;
    display: block;
    margin:0 auto;
    background-color: #fff;
}

#consultant{
    background-color: #fff;
    margin-bottom:20vh;
}

#consultant .comment_container{
    padding:2em;
}

.comment_container img{
    display:block;
    float: left;
    margin-right:1em;
    max-width:40%;
}

.comment_comment {
    padding-right:1em;
    display: block;
    overflow: hidden;
}

.comment_container h2 {
    font-size: 20px;
    color: #55433b;
    font-weight: 700;
    padding: 0 0 5px;
    position: relative;
    line-height: 1.5;
  }

.comment_container h2:before {
  content: '';
  width: 100%;
  height: 3px;
  box-shadow: inset 180px 0 0 0 #55433b;
  background-color: #d6c7be;
  display: block;
  position: absolute;
  bottom: -5px;
  left: 0;
}

p a{
  color:#e95415;
}

p a:hover{
  color:var(--onpoint-color);
}

.ArticleList img:hover {
  opacity: 0.5;
}

  @media (min-width: 770px) {
    .comment_container h2{
      font-size: 24px;
    }
    .comment_container h2:before {
      box-shadow: inset 218px 0 0 0 #55433b;
      bottom: -5px;
    }

    .pc{
      display: inline!important;
    }
  }

#consultant .position{
    text-align: right;
    color:#877269;
    margin:0.25em 0 0.5em;
}

#consultant .comment_container p{
    margin-bottom:0.75em;
}

#access h2{
    margin-top:8em;
}

.common-table {
  table-layout: fixed;
  text-align: left;
  line-height: 1.8;
  width: auto;
  margin: 1em;
}
.common-table th {
  vertical-align: top;
  font-weight: 700;
  width: 35%;
  border-bottom: 1px solid #d6c7be;
  padding: 15px 10px 7px 0;
}
.common-table td {
  border-bottom: 1px solid #d6c7be;
  padding: 15px 10px 7px 0;
}
.common-table td a {
  color: #e95415;
  text-decoration: underline;
}
.common-table td a:hover {
  text-decoration: none;
}
.common-table td iframe {
  width: 100%;
  height: 250px;
}

.top_image_container{
  overflow: hidden;
  padding: 4em 0;
}

.top_image_container img{
  width:50%;
  float:right;
}

.meeting_date, .company-office {
  padding: 0 1em ;
}

.meeting_date table{
  position: relative;
}

tr.done{
  color: gainsboro;
  position: relative;
}

tr.done:after {
  content: "終了しました";
  color: red;
  position: absolute;
  top: 21px;
  left: 6em;
}

@media (max-width: 769px) {
  .sp{
    display: inline!important;
  }

  .Serif{
    width: 200%;
    margin-left: -50%;
    max-width: unset;
  }

  .top_image_container img{
    width:100%;
    float: unset;
    margin:0 0 2em 0;
  }

  .comment_container img{
    max-width: 100%;
    float: unset;
  }

  .meeting_date h2{
      padding-left:1em;
  }

  #access h2{
    margin-top:8em;
    padding-left:1em;
    }
    .company-office__directions, .company-desc, .company-office__text, .company-office__img {
      margin:1em!important;
    }

    nav.meeting_menu li{
      width:50%
    }

    .cls-1{
      fill:var(--theme-color);
    }


    .cls-3{
      width:100%;
    }

    svg{
      width: 100%;
      height: auto;
    }

    nav ol li img{
      height:auto;
      max-height: unset;
      width:100%;
    }
    .top_image_container{
      padding:1em 0;
    }

    .meeting_date .common-table{
      margin:0 auto;
    }
    .meeting_date, .company-office {
      padding: 0;
    }
}

  @media (min-width: 770px) {
    .common-table th {
      width: 205px;
      padding: 21px 0 11px 0;
    }
    .common-table td {
      padding: 21px 0 11px 0;
    }
    .common-table td iframe {
      width: 100%;
      height: 380px;
      margin: 10px 0 20px;
    }
}