@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body, html {
  font-family: "Noto Sans Japanese", sans-serif;
  color: #4d4d4d
}

input {
  font-size: 16px
}

.scroll-fix {
  overflow-y: hidden
}

.button-gotop, .list-btn-red {
  z-index: 1001
}

#sec_contact {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: initial;
  display: flex;
  justify-content: center;
  padding: 0;
  background-color: rgba(0, 0, 0, .5);
  z-index: 1000
}

#sec_contact a:link {
  opacity: 1;
  display: flex;
}

#sec_contact a, #sec_contact>div {
  display: block;
  width: 50%;
  max-width: 300px;
  padding: 15px 0;
  background-color: #8f735d;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

#sec_contact a > div > p,
 #sec_contact > div > p{
padding-left: 10px;
}

#sec_contact a:nth-child(2), #sec_contact>div:nth-child(2) {
  background-color: #566375;
  cursor: pointer
}

#sec_contact a:nth-child(3), #sec_contact>div:nth-child(3) {
  background-color: #c7c45c;
  cursor: pointer
}

#sec_contact a img, #sec_contact>div img {
  height: 33px
}

#bottom-nav {
  background-color: rgba(255, 255, 255, .8);
  bottom: 0;
  display: flex;
  height: 48px;
  justify-content: space-around;
  left: 0;
  margin: 0;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: 1000
}

#bottom-nav>div {
  background-color: #fbd63c;
  text-align: center;
  height: 48px;
  width: 50%
}

#bottom-nav>div:hover {
  cursor: pointer
}

#bottom-nav .bottom-nav-tel img {
  margin-top: 5px;
  width: 60px
}

.bottom-nav-action-area, .bottom-order-action-area {
  height: calc(100vh - 126px);
  width: 100%;
  position: absolute;
  right: 0;
  bottom: 68px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottom-nav-action-on, .bottom-order-action-on {
  opacity: 1;
  transition: all .3s;
  pointer-events: initial;
  background-color: rgba(0, 0, 0, .5)
}

.bottom-nav-action-off, .bottom-order-action-off {
  opacity: 0;
  transition: all .5s;
  pointer-events: none
}

.bottom-nav-action-area iframe, .bottom-order-action-area iframe {
  border: solid 2px transparent;
  height: calc(100% - 10px);
  padding: 0;
  width: calc(100% - 10px);
  box-sizing: border-box;
  max-width: 520px
}

body, html {
  margin: 0
}

.hissu {
  color: #d00;
  font-size: .8em
}

#reservation-attend {
  background-color: #fff;
  margin: 0;
  padding: 10px;
  border-width: 1px 1px 0 1px
}

#reservation-attend .resv-title {
  background-color: #c7c45c;
  color: #fff;
  font-size: 18px;
  line-height: 40px;
  text-align: center
}

#reservation-attend.store .resv-title {
  background-color: #566375
}

#reservation-attend .resv-mesg {
  font-size: 14px;
  line-height: 20px;
  margin: 25px auto;
  width: 90%
}

.title-yellow {
  color: #c7c45c
}

.title-cobalt {
  color: #566375
}

#reservation-attend .doc {
  width: 90%;
  margin: 30px auto;
  font-size: .8em
}

#form-attend .text {
  font-size: .7em;
  width: 75%;
  margin-left: auto
}

#form-attend .agree, #form-attend .owner {
  margin: 5px 0;
  font-size: .8em
}

#form-attend .agree p {
  margin: 0
}

#form-attend .form-article {
  display: flex;
  margin-top: 15px
}
#form-attend .form-article .article-2c {
  display: flex;
  flex-direction: column;
}
#form-attend .form-article .article-2c.elements{
  padding-left: 10px;
}
#form-attend .amount {
  margin: 40px 0 30px
}

#form-attend .comment {
  margin: 40px 0 30px
}

#form-attend .form-specified .form-article {
  padding-left: 10px
}

#form-attend .form-article > .form-title {
  line-height: 1.5em;
  width: 25%;
  padding-left: 10px
}

#form-attend .form-article div>p {
  font-size: 12px
}

#form-attend .form-article > .elements {
  line-height: 1.5em;
  width: 75%
}

#form-attend .form-article .form-input {
  border-bottom: solid 1px #eeb22f
}

.store #form-attend .form-article .form-input {
  border-bottom: solid 1px #566375
}

#form-attend .form-specified {
  margin-top: 20px
}

#form-attend .form-specified .date-title {
  padding-left: 10px
}

#form-attend .form-specified .form-article > .form-title {
  line-height: 1.5em;
  width: calc(25% - 10px)
}

#form-attend .form-specified .form-article > .elements {
  line-height: 1.5em;
  width: 79%
}

#form-attend .form-specified .form-article .time {
  padding: 0 .5em 0 1em
}

#form-attend input[type=email], #form-attend input[type=tel], #form-attend input[type=text] {
  background-color: #fff;
  border: solid 1px #939393;
  padding: 5px 8px
}

#form-attend textarea {
  background-color: #fff;
  border: solid 1px #939393;
  line-height: 2em;
  padding: 5px 8px;
  width: 90%
}

#form-attend .form-submit {
  text-align: center
}

#form-attend input[type=button], #form-attend input[type=reset], #form-attend input[type=submit] {
  border: 1px solid #c7c45c;
  border-radius: 100px;
  color: #c7c45c;
  font-size: 1em;
  height: 2.5em;
  letter-spacing: .2em;
  line-height: 2.5em;
  margin-top: 15px;
  width: 30%;
  margin-left: 1vw
}

.store #form-attend input[type=button], .store #form-attend input[type=reset], .store #form-attend input[type=submit] {
  border: 1px solid #566375
}

#form-attend input[type=button], #form-attend input[type=reset] {
  color: #c7c45c;
  background-color: #fff
}

.store #form-attend input[type=button], .store #form-attend input[type=reset] {
  color: #566375;
  margin: 0 20px
}

#form-attend input[type=submit] {
  background-color: #c7c45c;
  color: #fff;
  margin: 0 10px
}

.store #form-attend input[type=submit] {
  background-color: #566375
}

#form-submit input[type=submit]:hover {
  background-color: #fff;
  color: #555;
  cursor: pointer
}

#form-attend select {
  background-color: #fff;
  background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), 100% 0;
  background-repeat: no-repeat;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  display: inline-block;
  line-height: 1.5em;
  margin: 0;
  margin-right: 2px;
  padding: .5em 1em .5em 1em
}

#form-attend select:not(#resv_buy_amount) {
  -webkit-appearance: none;
  -moz-appearance: none
}

#form-attend select:focus {
  background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5em 2.5em;
  background-repeat: no-repeat;
  border-color: #fbe7bc;
  outline: 0
}

#form-attend select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000
}

#form-attend .date {
  padding: 2em 20px 1em;
  font-size: 14px
}

#form-attend .date p {
  margin: 0
}

@media (max-width:767px) {
  .bottom-nav-action-area, .bottom-order-action-area {
    height: calc(100vh - 135px)
  }

  .button-gotop {
    width: 50px;
    height: 53px;
    bottom: 82px;
    right: 0
  }

}