body {
  font-family: "Noto Serif JP", serif;

}

body::before {
  content: "";
  width: 100%;
  height: 100vh;
  background: linear-gradient(to top, rgba(255, 255, 255, 255) 20%, rgba(0, 0, 0, 0) 100%), url(../img/main_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

main {
  background: none;
}

@media screen and (min-width: 769px) {

  .loading img {
    width: 40%;
    margin: auto;
  }

  header {
    width: 100%;
    position: fixed;
    top: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 5rem;
    background: #3498db;
  }

  .detail-tbl tr th,
  .detail-tbl tr td {
    border: 1px solid #333;
  }

  .logo-area a {
    width: 150px;
    height: 50px;
  }

  .mainvisual {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    height: 95%;
    width: 95%;
    background: none;
  }

  .under-main {
    background: none;
    margin-top: 80px;
    padding-top: 0;
  }

  .todays-wrap {
    background: none;
  }

  .reserve-bnr,
  .qa-bnr,
  .recruit-bnr {
    width: 30%;
  }

  .weekly-schedule {
    background: none;
  }

  .weekly-schedule ul {
    border-top: none;
    border-bottom: none;
  }

  .weekly-schedule ul:before {
    border-top: none;
  }

  .weekly-schedule ul:after {
    border-bottom: none;
  }

  .weekly-schedule li {
    background: none;
  }

  .col-left {
    width: 100%;
  }

  .col-right {
    width: 30%;
  }

  .detail-tbl {
    border: 1px solid #333;
  }


}

@media screen and (min-width: 769px) {
  .under-bg:before {
    background: none;
  }
}

@media screen and (max-width: 769px) {
  .mainvisual {
    padding: 0 10%;
  }
  .visual-logo {
    padding: 20% 0;
  }
  .loading img {
    width: 70%;
    margin: auto;
  }
  
}

.mainvisual {
  font-size: 1.2rem;
  text-shadow: 2px 2px 2px rgb(4, 50, 255);
}


.mainvisual-bg:before {
  content: "";
  display: block;
  background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), url(../img/mainvisual.jpg);
  background-size: cover;
  background-position: center 20%;
  /* background-position: bottom; */
  background-repeat: no-repeat;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.visual-logo {
  animation: none;
}

header {
  background: #ffffff;
}

.header-bg {
  background: #ffffff;
}

.system-wrap {
  background: none;
}

.under-wrap {
  background: none;
}

#nav-circle-bg {
  background: rgba(255, 255, 255, 0.9);
}

.close-btn {
  color: #3498db;
}

#nav a {
  color: #3498db;
  font-weight: bold;
}

#nav p {
  padding-top: 0.3rem;
  color: #3498db;
  font-size: 0.7rem;
}

#nav li {
  border-bottom: 1px solid #3498db;
}


#nav-toggle span {
  background: #3498db;

}

.main-contact {
  background: #3498db;
}

.contents-ttl {
  background: none;
  color: #3498db;
}

.contents-ttl p {
  font-size: 0.9rem;
  font-weight: bold;
  padding-top: 0.5rem;
}

.realtime-box ul {
  background: #ffffff;
  color: #3498db;
  border: 1px solid #3498db;
}

.news-text-wrap li span {
  background: #3498db;
  color: #fff;

}

.news-text-wrap li:first-child {
  font-size: 0.75rem;
  color: #3498db;
}

.todays-wrap {
  background: none;
  color: #3498db;
  font-weight: bold;
  padding-top: 0.5rem;
}

.todays-wrap p {
  font-size: 0.9rem;
}

.staff-box {
  color: #333;
}

.staff-box>ul li+li {
  border-top: 1px solid #3498db;
}

.staff-box ul li:nth-child(3) {
  background: #3498db;
  color: #ffffff;
  border: 1px solid #3498db;
}

.more-btn a {
  background: #fff;
  color: #3498db;
  border: 2px solid #3498db;

}

.clamp-text2 a {
  text-decoration: none;
}

.clamp-text3 {
  background: none;
}

.blog-box+.blog-box {
  border-top: 1px solid #3498db;
}

.reserve-bnr {
  background: #3498db;
}

.qa-bnr {
  background: #3498db;
}

.recruit-bnr {
  background: #3498db;
}

.reserve-bnr,
.qa-bnr,
.recruit-bnr {
  padding: 0;
  margin: 1rem 0;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background: #fff;
}

.reserve-bnr a,
.qa-bnr a,
.recruit-bnr a {
  background: none;
  color: #3498db;
  border: 2px solid #3498db;
}

.concept-bg {
  /* background-image: none; */
}

.concept-wrap h3 {
  font-size: 2rem;
  color: #3498db;
}

.concept-wrap h3+p {
  color: #3498db;
  font-weight: bold;
}

.sp-foot {
  background: #3498db;
}

.sp-foot li {
  border: 1px solid #3498db;
}

.sp-foot a {
  color: #fff;
}

.under-h {
  background: #ffffff;
}


.list-wrap h3 {
  border-top: none;
  border-bottom: none;
}

.list-wrap h3:before {
  border-top: none;

}

.list-wrap h3:after {
  border-bottom: 1px solid #3498db;
}

.list-wrap dt {
  background: #3498db;
  color: #fff;
}

.news-ico {
  padding: 0.1rem;
  background: #3498db;
  color: #fff;
}

.news-under-wrap {
  border-bottom: 1px solid #3498db;
}

.archive h3 {
  background: #3498db;
  color: #fff;
}

.archive li {
  border: 1px solid #3498db;
}

.archive li a {
  color: #3498db;
}

.weekly-schedule li a.current {
  background: #3498db;
  color: #fff;
}

.weekly-schedule li a {
  border: 1px solid #333;
}

.filter-wrap {
  padding: 1rem 1rem;
  justify-content: center;
}

.filter-wrap select {
  border: 1px solid #3498db;
  color: #333;
  background-image: url(../img/filter-arrow.svg), linear-gradient(to bottom, #3498db 0%, #3498db 100%);
  background-color: #fff;
}

.filter-wrap select:focus {
  border: 1px solid #3498db;
  color: #333;
  background-image: url(../img/filter-arrow.svg), linear-gradient(to bottom, #3498db 0%, #3498db 100%);
  background-color: #fff;
}

.filter-wrap .filter-reset a {
  color: #333;
}

.filter-inner {
  border: 1px solid #3498db;
  background: #fff;
}

.check-point:before {
  background: #fff;
  border: 1px solid #3498db;
}

.filter-inner input[type="submit"] {
  background: #3498db;
  color: #fff;
}

.blog-update {
  color: #333;
}

.blog-detail a {
  color: #fff;
  background: #3498db;
}

.reserve>div {
  background: none;
}

.reserve input[type="text"],
.reserve input[type="number"],
.reserve input[type="tel"],
.reserve input[type="email"],
.reserve input[type="date"],
.reserve select {
  border: 1px solid #3498db;
}

.reserve #schedule {
  border: 1px solid #3498db;
  background-image: url(../img/calendar.svg), linear-gradient(to bottom, #3498db 0%, #3498db 100%);
  background-color: #ffffff;
}

.reserve input[type="time"] {
  border: 1px solid #3498db;
  background-color: #fff;
}

.reserve select {
  background-image: url(../img/select-arrow.svg), linear-gradient(to bottom, #3498db 0%, #3498db 100%);
  background-color: #fff;
}

.reserve input[type="radio"]+label:before {
  border: 1px solid #3498db;

}

.reserve input[type="radio"]:checked+label:after {
  background: #3498db;

}

.reserve textarea {
  border: 1px solid #3498db;
}


.filter-inner input[type="checkbox"]:checked+.check-point:after,
.reserve input[type="checkbox"]:checked+.check-point:after {
  border-bottom: 3px solid #3498db;
  border-right: 3px solid #3498db;
}

.reserve input[type="submit"] {
  background: #3498db;
  color: #fff;
}

.job-box dl dt {
  background: #3498db;
  color: #fff;
}


.recruit-main {
  background: none;
}

.tab-label {
  color: #3498db;
  background: #ffffff;
}

.tab-switch:checked+.tab-label {
  background: #3498db;
  color: #fff
}

.detail-tbl thead {
  background: #3498db;
}

.shop-cmt+div.btn-review {
  background: #3498db;
  color: #fff;
}

.shop-cmt:after {
  border-bottom: none;
  border-top: none;
}

.shop-cmt {
  border-bottom: double #333;
}

.accordion > ul > li > div {
  color: #fff;
  background: #3498db;
  border: 1px solid #3498db;
}

.accordion li .accordion_icon span {
  background: #3498db;
}

@media screen and (max-width: 769px) {

  .detail-tbl tr th,
  .detail-tbl tr td {
    border: 0.8px solid #333;
  }

}

.ico01,
.ico04,
.ico07,
.ico010,
.ico013 {
  background: #3498db !important;
}

.ico02,
.ico05,
.ico08,
.ico011 {
  background: #3498db !important;
}

.ico03,
.ico06,
.ico09,
.ico012 {
  background: #3498db !important;
}

footer {
  background: none;
  color: #3498db;
}

footer a i {
  color: #3498db;
  font-size: 2rem;
}

.footer-logo {
  padding: 15% 0;
}