/*! HTML5 Boilerplate v8.0.0 | MIT License | https://html5boilerplate.com/ */
/* main.css 2.1.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */
html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  background-color: #fff; }

/*
   * Remove text-shadow in selection highlight:
   * https://twitter.com/miketaylr/status/12228805301
   *
   * Vendor-prefixed and regular ::selection selectors cannot be combined:
   * https://stackoverflow.com/a/16982510/7133471
   *
   * Customize the background color to match your design.
   */
::-moz-selection {
  background: #b3d4fc;
  text-shadow: none; }

::selection {
  background: #b3d4fc;
  text-shadow: none; }

/*
   * A better looking default horizontal rule
   */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0; }

/*
   * Remove the gap between audio, canvas, iframes,
   * images, videos and the bottom of their containers:
   * https://github.com/h5bp/html5-boilerplate/issues/440
   */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle; }

/*
   * Remove default fieldset styles.
   */
fieldset {
  border: 0;
  margin: 0;
  padding: 0; }

/*
   * Allow only vertical resizing of textareas.
   */
textarea {
  resize: vertical; }

/* ==========================================================================
    Author's custom styles
     ========================================================================== */
html {
  height: 100%;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 62.5%;
  background-image: url(../img/common/bg.png);
  background-size: 100%;
  background-repeat: repeat-y;
  overflow-x: hidden; }
  @media screen and (min-width: 750px) {
    html {
      font-size: 100%; } }

.bg2 {
  width: 100%;
  margin: 0 auto;
  max-width: 1049px;
  background-image: url(../img/common/bg_footer.png), url(../img/common/bg2.png);
  background-position: bottom center, top center;
  background-repeat: no-repeat, repeat-y; }
  @media screen and (max-width: 749px) {
    .bg2 {
      background-size: 139.8666666666667%; } }

.wrapper {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  background-size: 100%;
  background-repeat: repeat-y; }
  .wrapper .logo {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 4% 0 0%; }
    .wrapper .logo img {
      width: 100%; }
  .wrapper .description {
    width: 79.29577464788732%;
    margin: 0 auto 10%; }
    .wrapper .description .head {
      margin: 0 0 1rem;
      white-space: nowrap;
      color: #008e99;
      text-align: center;
      border-bottom: solid 0.2rem #008e99; }
    .wrapper .description .text {
      margin: 1rem 0 0;
      text-align: center;
      font-size: 1.3rem; }
  .wrapper .store {
    margin: -7.6% 0 0 0;
    z-index: 1;
    position: relative; }
    .wrapper .store .title {
      margin: 0 auto;
      width: 48.26666666666667%; }
      .wrapper .store .title img {
        width: 100%; }
    .wrapper .store .outer {
      width: 100vw;
      margin: 0 calc(50% - 50vw);
      background-image: url(../img/common/green_bg.png);
      background-size: 100%;
      background-repeat: repeat-y;
      margin-top: -8%; }
      .wrapper .store .outer .inner {
        width: 100%;
        max-width: 900px;
        margin: 0px auto; }
        .wrapper .store .outer .inner .slick_store {
          list-style: none;
          padding: 10% 0 3% 0;
          margin: 0 auto;
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: flex-start;
          flex-wrap: wrap; }
          @media screen and (max-width: 749px) {
            .wrapper .store .outer .inner .slick_store {
              justify-content: center; } }
          .wrapper .store .outer .inner .slick_store li {
            width: 48%;
            margin: 0 0 3%; }
            @media screen and (max-width: 749px) {
              .wrapper .store .outer .inner .slick_store li {
                width: 90%;
                margin: 0 0 5% !important; } }
          .wrapper .store .outer .inner .slick_store .slick-arrow:before {
            content: "" !important;
            width: 100% !important;
            height: 100% !important;
            position: absolute;
            top: 0;
            left: 0; }
          .wrapper .store .outer .inner .slick_store .slick-next {
            right: -13% !important; }
            .wrapper .store .outer .inner .slick_store .slick-next:before {
              background: url(../img/common/slick_r.png) !important;
              background-size: 100% !important; }
          .wrapper .store .outer .inner .slick_store .slick-prev {
            left: -13% !important; }
            .wrapper .store .outer .inner .slick_store .slick-prev:before {
              background: url(../img/common/slick_l.png) !important;
              background-size: 100% !important; }
          .wrapper .store .outer .inner .slick_store .slick-arrow {
            width: 8vw !important;
            height: 8vw !important;
            max-width: 50px;
            max-height: 50px; }
            @media screen and (min-width: 750px) {
              .wrapper .store .outer .inner .slick_store .slick-arrow {
                width: 4.933333333333333vw !important;
                height: 4.933333333333333vw !important; } }
          .wrapper .store .outer .inner .slick_store li .store_name {
            padding: 1%;
            text-align: center;
            color: #4ebeb8;
            background-color: #fff;
            font-size: 1.2rem;
            font-weight: bold; }
            @media screen and (max-width: 749px) {
              .wrapper .store .outer .inner .slick_store li .store_name {
                font-size: 4vw !important;
                margin-bottom: 3%; } }
          .wrapper .store .outer .inner .slick_store li .store_flex {
            margin: 2% 0 2%;
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            align-items: flex-start; }
            .wrapper .store .outer .inner .slick_store li .store_flex .store_img {
              width: 49%; }
              .wrapper .store .outer .inner .slick_store li .store_flex .store_img img {
                width: 100%; }
            .wrapper .store .outer .inner .slick_store li .store_flex .store_info {
              width: 50%;
              text-align: center; }
              .wrapper .store .outer .inner .slick_store li .store_flex .store_info th {
                padding: 1%;
                font-weight: normal;
                color: #4ebeb8;
                background-color: #fff;
                font-size: 1.2rem;
                font-weight: bold; }
                @media screen and (max-width: 749px) {
                  .wrapper .store .outer .inner .slick_store li .store_flex .store_info th {
                    font-size: 3.5vw !important; } }
              .wrapper .store .outer .inner .slick_store li .store_flex .store_info td {
                padding: 1%;
                color: #fff;
                font-size: 1.1rem; }
                @media screen and (max-width: 749px) {
                  .wrapper .store .outer .inner .slick_store li .store_flex .store_info td {
                    font-size: 3.5vw !important;
                    padding-bottom: 3%; } }
                .wrapper .store .outer .inner .slick_store li .store_flex .store_info td a[href^="tel:"] {
                  color: inherit;
                  text-decoration: underline; }
      .wrapper .store .outer .store_not_found {
        color: #fff;
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem; }
  .wrapper .schedule {
    margin-top: 14%; }
    .wrapper .schedule .title {
      margin: 0 auto;
      width: 54.13333333333333%; }
      .wrapper .schedule .title img {
        width: 100%; }
    .wrapper .schedule .slick_schedule {
      width: 100vw;
      margin: 2% calc(50% - 50vw);
      padding: 0;
      list-style: none; }
      @media screen and (min-width: 750px) {
        .wrapper .schedule .slick_schedule {
          margin: 1rem calc(50% - 50vw); } }
      .wrapper .schedule .slick_schedule .slick-arrow:before {
        content: "" !important;
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0; }
      .wrapper .schedule .slick_schedule .slick-next {
        right: 3% !important;
        top: 2.9rem;
        z-index: 10 !important; }
        @media screen and (min-width: 750px) {
          .wrapper .schedule .slick_schedule .slick-next {
            right: calc((100vw - 710px) / 2) !important; } }
        .wrapper .schedule .slick_schedule .slick-next:before {
          background: url(../img/common/slick_r.png) !important;
          background-size: 100% !important; }
      .wrapper .schedule .slick_schedule .slick-prev {
        left: 3% !important;
        top: 2.9rem;
        z-index: 10 !important; }
        @media screen and (min-width: 750px) {
          .wrapper .schedule .slick_schedule .slick-prev {
            left: calc((100vw - 710px) / 2) !important; } }
        .wrapper .schedule .slick_schedule .slick-prev:before {
          background: url(../img/common/slick_l.png) !important;
          background-size: 100% !important; }
      .wrapper .schedule .slick_schedule .slick-arrow {
        width: 8vw !important;
        height: 8vw !important;
        max-width: 50px;
        max-height: 50px; }
        @media screen and (min-width: 750px) {
          .wrapper .schedule .slick_schedule .slick-arrow {
            width: 4.933333333333333vw !important;
            height: 4.933333333333333vw !important; } }
      .wrapper .schedule .slick_schedule .outer {
        background-image: url(../img/common/green_bg.png);
        background-size: 100%;
        background-repeat: repeat-y; }
        .wrapper .schedule .slick_schedule .outer .select_date {
          width: 94.7%;
          max-width: 710px;
          margin: 0 auto; }
          .wrapper .schedule .slick_schedule .outer .select_date .text {
            width: 79.15492957746478%;
            margin: 0 auto;
            text-align: center;
            color: #fff;
            font-size: 2rem;
            font-weight: 700;
            padding-top: 1.5rem;
            padding-bottom: 1.5rem; }
      .wrapper .schedule .slick_schedule .timetable {
        width: 75.6%;
        max-width: 567px;
        margin: 5% auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        row-gap: 1.8rem; }
        .wrapper .schedule .slick_schedule .timetable .bento_info {
          width: 46.73721340388007%; }
          .wrapper .schedule .slick_schedule .timetable .bento_info .start_time {
            font-size: 1.2rem;
            font-weight: 700;
            margin: 1% 0 1%; }
          .wrapper .schedule .slick_schedule .timetable .bento_info .icon {
            width: 100%; }
            .wrapper .schedule .slick_schedule .timetable .bento_info .icon img {
              width: 100%; }
          .wrapper .schedule .slick_schedule .timetable .bento_info .store_name,
          .wrapper .schedule .slick_schedule .timetable .bento_info .quantity {
            font-size: 1.1rem;
            margin: 1% 0 1%; }
    .wrapper .schedule .skd_not_found {
      margin: 5% auto 5%; }
      .wrapper .schedule .skd_not_found .text {
        color: #000;
        text-align: center;
        font-weight: bold;
        font-size: 1.5rem;
        margin: 0 auto 0; }
  .wrapper .reception_end {
    text-align: center;
    font-size: 1.5rem;
    margin: 0 0 5%; }
  .wrapper .btn_to_form {
    display: block;
    width: 50%;
    margin: 0 auto 5%;
    cursor: pointer;
    cursor: hand; }
    .wrapper .btn_to_form img {
      width: 100%; }
  .wrapper .footer {
    width: 100%;
    padding: 7% 0 7%; }
    .wrapper .footer p {
      text-align: center;
      font-size: 1.2rem; }

/* ==========================================================================
    Helper classes
     ========================================================================== */
/*
   * Hide visually and from screen readers
   */
.hidden,
[hidden] {
  display: none !important; }

/*
   * Hide only visually, but have it available for screen readers:
   * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
   *
   * 1. For long content, line feeds are not interpreted as spaces and small width
   *    causes content to wrap 1 word per line:
   *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
   */
.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */ }

/*
   * Extends the .sr-only class to allow the element
   * to be focusable when navigated to via the keyboard:
   * https://www.drupal.org/node/897638
   */
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto; }

/*
   * Hide visually and from screen readers, but maintain layout
   */
.invisible {
  visibility: hidden; }

/*
   * Clearfix: contain floats
   *
   * For modern browsers
   * 1. The space content is one way to avoid an Opera bug when the
   *    `contenteditable` attribute is included anywhere else in the document.
   *    Otherwise it causes space to appear at the top and bottom of elements
   *    that receive the `clearfix` class.
   * 2. The use of `table` rather than `block` is only necessary if using
   *    `:before` to contain the top-margins of child elements.
   */
.clearfix::before,
.clearfix::after {
  content: " ";
  display: table; }

.clearfix::after {
  clear: both; }

/* ==========================================================================
     EXAMPLE Media Queries for Responsive Design.
     These examples override the primary ('mobile first') styles.
     Modify as content requires.
     ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */ }
@media print, (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx), (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */ }
/* ==========================================================================
     Print styles.
     Inlined to avoid the additional HTTP request:
     https://www.phpied.com/delay-loading-your-print-css/
     ========================================================================== */
@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important; }

  a,
  a:visited {
    text-decoration: underline; }

  a[href]::after {
    content: " (" attr(href) ")"; }

  abbr[title]::after {
    content: " (" attr(title) ")"; }

  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: ""; }

  pre {
    white-space: pre-wrap !important; }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group; }

  tr,
  img {
    page-break-inside: avoid; }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; } }

/*# sourceMappingURL=top.css.map */