@charset "utf-8";
/* CSS Document */
@import url("layout_sp.css");
@media screen and (max-width: 959px) {
  /* ************************************************************ main　*/
  #mainvisual {
    overflow: hidden;
  }
  #mainvisual .slider_wrap {
    top: 74px;
  }
  #mainvisual .slider_wrap .bx-wrapper {
    margin: 0 auto; /*画像を真ん中に*/
  }
  #mainvisual .slider_wrap .bx-wrapper .bx-viewport {
    height: 420px !important;
  }
  @media screen and (max-width:640px) {
    #mainvisual .slider_wrap .bx-wrapper .bx-viewport {
      height: 320px !important;
    }
  }
	@media screen and (max-width:414px) {
    #mainvisual .slider_wrap .bx-wrapper .bx-viewport {
      height: 270px !important;
    }
  }
  /* ------------------------------ information*/
  #information {}
  #information .inner::after {
    top: 50%;
    right: -80px
  }
  @media screen and (max-width: 959px) {
    #information h2, #information h2 span {
      font-size: 2.2rem;
    }
    #information h2 span {
      font-size: 3.4rem;
    }
    #information dl {
      display: block;
    }
    #information dl dt {
      -webkit-justify-content: flex-start;
      justify-content: flex-start;
    }
    #information dl dt span {
      font-size: 1.2rem;
      width: 70px;
      padding: 6px 0;
    }
    #information dl dd {
      font-size: 1.8rem;
      margin: 0 0 10px 0;
      width: 100%
    }
    #information dl dd span {
      font-size: 1.2rem;
    }
    #information .period .day {
      font-size: 2.2rem;
    }
    #information .period .day span {
      font-size: 5.2rem;
      margin: 0 6px;
    }
    #information .period .day .week {
      font-size: 1.4rem;
    }
    #information .period .open {
      font-size: 3.0rem;
    }
    #information .period .open span {
      font-size: 1.6rem;
    }
  }
  @media screen and (max-width: 768px) {
    #information .inner::after {
      background-size: 400px;
      top: 10%;
      width: 400px;
      height: 256px;
    }
  }
  @media screen and (max-width: 560px) {
    #information .inner {
      width: calc(100% - 40px);
      padding: 40px 0 20px 0;
    }
    #information dl dt span {
      font-size: 1.2rem;
      width: 70px;
      padding: 6px 0;
    }
    #information dl dd {
      font-size: 1.7rem;
    }
    #information dl dd span {
      font-size: 1.2rem;
    }
    #information .period {
      display: block;
    }
    #information .period .day {
      font-size: 2.2rem;
    }
    #information .period .day span {
      font-size: 4.8rem;
      margin: 0 6px;
    }
    #information .period .day .week {
      font-size: 1.4rem;
    }
    #information .period .open {
      font-size: 2.8rem;
    }
    #information .period .open span {
      font-size: 1.6rem;
    }
  }
  /* ------------------------------ more*/
  #more {}
  #more .inner {
    padding: 20px 0;
  }
  #more ul li .btn {
    padding-right: 80px;
  }
  /* ------------------------------ news*/
  #news {}
  #news .inner {
    width: calc(100% - 80px);
    padding: 20px 0 0 0;
  }
  #news h2 {
    font-size: 2.6rem;
  }
  #news h2::after {
    font-size: 1.5rem;
  }
  /**/
  #news .newslist {
    margin: 60px auto;
  }
  #news .newslist a {
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 15px;
  }
  #news .newslist a h3 {
    margin: 0;
  }
  /**/
  #news .newslist .day {
    width: 100%;
    text-align: left;
    margin: 0 0 10px 0;
  }
  /* ------------------------------ Speech*/
  #speech {}
  #speech .inner {
    width: calc(100% - 80px);
    padding: 40px 0 10px;
  }
  /**/
  #speech h2 {
    font-size: 2.6rem;
  }
  #speech h2::after {
    font-size: 1.5rem;
  }
  /**/
  #speech .personal {
    margin: 60px auto;
  }
  @media screen and (max-width: 560px) {
    #speech .personal .pict {
      float: none;
      margin: 0 0 40px 0;
      text-align: center;
    }
  }
  #speech .personal h3 {
    display: block;
    font-size: 1.8rem;
  }
  @media screen and (max-width: 560px) {
    #speech .personal h3 {
      width: 100%;
    }
  }
  @media screen and (max-width: 560px) {
    #speech .personal .history h4 {
      margin: 30px 0 10px 0;
    }
  }
  #speech .personal .history p {
    font-size: 1.3rem;
  }
  /* ------------------------------ banner*/
  #banner {}
  #banner .inner {
    /*width: calc(100% - 240px);
    margin: 0 auto;
    padding: 0;*/
    width: calc(100% - 80px);
  }
  #banner ul {
    /*margin: 80px auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;*/
    margin: 60px auto;
  }
  #banner li {
    /*list-style: none;
    margin: 10px;
    border: solid 1px #e1e1e1;*/
  }
  #banner li a {}
  #banner li a img {
    /*max-width: 230px;
    width: 100%;
    height: auto;*/
  }
}