@charset "UTF-8";


/*----------------------------------------top----------------------------------------*/
#top {
  padding: 0;
}

#top img {
  width: 100%;
}

/*----------------------------------------scenery----------------------------------------*/
#scenery {}

#scenery h2 {
  max-width: 500px;
  margin: 0 auto 1em;
}

#scenery h2 img {
  width: 100%;
}

#scenery .sub {
  color: #fff;
  font-weight: bold;
}

#scenery .list {
  margin: 4em auto -4%;
}

#scenery .list .content {
  position: relative;
  width: 48%;
  padding: 2%;
  margin: 0 0 4%;
  background: #fff;
  border-radius: 1em;
}

#scenery .list .content:before,
#scenery .list .content:after {
  display: none;
}

#scenery .list .content:before {
  content: "詳細";
  right: 2.4em;
}

#scenery .list .content:after {
  content: ">";
  right: 1.5em;
}

#scenery .list .content .img {
  width: 20%;
}

#scenery .list .content .img img {}

#scenery .list .content .text {
  width: 60%;
  padding: 0 0 0 5%;
}

#scenery .list .content .text img {}

#scenery .list .content .open {
  width: 100%;
  padding: 1em 0 0;
  margin: 1em auto 0;
  border-top: 1px solid #A2DBF5;
}

#scenery .list .content .open .flex {}

#scenery .list .content .open .t {
  width: 70%;
}

#scenery .list .content .open .width {
  width: 100%;
}

#scenery .list .content .open h4 {
  text-align: center;
  font-size: 1em;
  color: #fff;
  background: #549BD5;
  padding: 0.3em 0;
  margin: 1em auto 0.2em;
  border-radius: 1em;
}

#scenery .list .content .open h4:first-child {
  margin: 0 auto 0.2em;
}

#scenery .list .content .open .i {
  width: 30%;
}

#scenery .list .content .open .chef {
  width: 100%;
  margin: 1em auto 0;
}

@media screen and (max-width: 768px) {
  #scenery .list .content {
    width: 100%;
    padding: 5%;
  }

  #scenery .list .content:before,
  #scenery .list .content:after {
    display: block;
    position: absolute;
    top: 15vw;
    font-size: 0.875em;
  }

  #scenery .list .content .open {
    display: none;
  }
}

/*----------------------------------------support----------------------------------------*/
#support {
  background: #fff;
}

#support h2 {
  text-align: center;
  margin: 0 auto 0.5em;
}

#support p {
  text-align: center;
}

#support ul {
  list-style: none;
  margin: 4em auto 0;
}

#support ul li {}

#support ul li:hover {
  transform: translate(-4px, -4px);
  box-shadow: 4px 4px #333333;
}

#support ul li img {
  width: 100%;
}

#support ul.list2 {}

#support ul.list2 li {
  width: 48%;
  margin: 0 0 4%;
}

#support ul.list3 {}

#support ul.list3 li {
  width: 30%;
  margin: 0 0 6%;
}

/* #support ul.list_text {
  max-width: 540px;
} */

@media screen and (max-width: 768px) {
  #support ul.list2 li {
    width: 100%;
    margin: 0 0 4em;
  }

  #support ul.list3 {
    width: 75%;
    margin: 0em auto 0;
  }

  #support ul.list3 li {
    width: 100%;
    margin: 0;
  }

  #support ul.list_text {
    width: 75%;
    margin: 0em auto 0;
  }
}

/*----------------------------------------form----------------------------------------*/
#form {
  color: #fff;
  background: #43acea;
}

#form h2 {
  max-width: 500px;
  margin: 0 auto 1em;
}

#form .date {}

#form .truck {
  max-width: 500px;
  margin: 2em auto;
}

#form .truck img {}

#form .border {
  border-radius: 2em;
  overflow: hidden;
  margin: 2em auto;
}

#form .info {
  color: #000;
  background: #fff;
}

#form .info .back {
  background: #A2DBF5;
}

#form .info .title {
  width: fit-content;
  font-weight: 600;
  padding: 1em 10%;
  margin: 0 auto;
}

#form .info p {
  padding: 1em 2em;
}

#form .download {
  margin: 4em auto;
  text-align: center;
}

#form .download h3 {
  margin: 0 auto 1em;
}

#form .download a {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

#form .download a img {}

#form .application {
  margin: 4em auto 0;
}

#form .application h3 {
  font-weight: 600;
  color: #fff200;
  margin: 0 auto 1em;
  text-align: center;
}

#form .application form {
  text-align: center;
}

#form .application form input {
  display: block;
  color: #fff;
  margin: 0 auto;
  box-shadow: inherit;
  background: inherit;
  border: inherit;
  font-size: inherit;
  padding: inherit;
}

#form .application form button {
  display: block;
  width: 100%;
  max-width: 300px;
  padding: 0;
  border: 0px;
  background: none;
  text-shadow: none;
  margin: 2em auto 0;
}

#form .application table#mfp_confirm_table tr th,
#form .application table#mfp_confirm_table tr td {
  color: #333;
  border-top: solid 1px #333;
}

#form .bbs {
  margin: 4em auto;
  text-align: center;
}

#form .bbs h3 {
  margin: 0 auto 1em;
}

#form .bbs a {
  display: inline-block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}

/*----------------------------------------schedule----------------------------------------*/
#schedule {
  background: #FFE8E8;
}

#schedule h2 {
  max-width: 300px;
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  margin: 0 auto 2em;
}

#schedule h2 img {
  width: 100%;
}

#schedule .event {
  margin: 4em auto 0;
}

#schedule .event:last-child {
  margin: 0 auto;
}

#schedule .event img {
  width: 100%;
}

#schedule .event h3 {
  color: #fff;
  background: #ED80A9;
  padding: 0.2em 0;
  margin: 0 auto 1em;
  text-align: center;
  border-radius: 1em;
}


/*----------------------------------------access----------------------------------------*/
#access {
  background: #D3EEFF;
}

#access h2 {
  width: 300px;
  font-size: 2.4rem;
  font-family: "a-otf-ud-shin-maru-go-pr6n", sans-serif;
  padding: 0.5em 2em;
  margin: 0 auto 2em;
  color: #fff;
  background: #0081CC;
  text-align: center;
  border-radius: 2em;
}

#access p {}

#access .btn {
  text-align: center;
  margin: 2em auto;
}

#access .btn a {
  display: inline-block;
  color: #fff;
  background: #0081CC;
  font-weight: 600;
  padding: 1em;
}

#access .detail {
  font-size: 0.875em;
}

/*----------------------------------------bbs----------------------------------------*/
#bbs {
  background: #43ACE9;
}

#bbs .title {}

#bbs .title img {
  margin: 0 auto 2em;
  text-align: center;
}

#bbs .list {}

#bbs .list ul {
  list-style: none;
  --gap: 2em;
  gap: var(--gap);
}

#bbs .list ul li {
  width: calc(100% / 3 - var(--gap));
}

#bbs .list ul li img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

@media screen and (max-width: 768px) {
  #bbs .list ul {
    --gap: 2em;
  }

  #bbs .list ul li {
    width: calc(100% / 2 - var(--gap) / 2);
  }
}