@charset "UTF-8";
body {
  margin: 0;
  font-size: 14px;
  color: #444;
  background-color: #FEFEFE;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-seri;
}

#wrapper {
  margin: 2em auto 0;
  width: 960px;
}
#wrapper header {
  margin-bottom: 0.6em;
}
#wrapper main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#wrapper main ul.menu {
  width: 250px;
}
#wrapper main ul.menu li {
  list-style-type: none;
  margin: 2.2em 0;
}
#wrapper main ul.menu li.copy {
  font-size: 0.9em;
}
#wrapper main ul.menu li.sns ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#wrapper main ul.menu li.sns ul li {
  margin: 0.25em;
}
#wrapper main .contents {
  width: 730px;
  margin-top: 1.5em;
}
#wrapper main .contents#index .top_image {
  color: #888;
  background-image: url("../img/top-label-news.png");
  width: 710px;
  height: 450px;
}
#wrapper main .contents#index .top_image a {
  display: block;
  width: 710px;
  height: 450px;
}
#wrapper main .contents#index .top_image a img {
  display: block;
  width: 710px;
  height: 450px;
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_image a img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_image p {
  display: inline-block;
  margin: 0.75em 0;
  border-bottom: 1px dotted transparent;
}
#wrapper main .contents#index .top_image p:hover {
  color: #444;
  border-bottom: 1px dotted #444;
}
#wrapper main .contents#index * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#wrapper main .contents#index .top_menu {
  margin-top: 4em;
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: 480px;
}
#wrapper main .contents#index .top_menu .concept {
  background: url("../img/top-concept-0.jpg");
  width: 226px;
  height: 474px;
}
#wrapper main .contents#index .top_menu .concept img {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .concept img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .main {
  display: grid;
  grid-template-rows: 210px auto 1fr;
  min-width: 0;
}
#wrapper main .contents#index .top_menu .main .lesson {
  background: url("../img/top-lesson-0.jpg");
  background-size: cover;
  width: 468px;
  height: 212px;
}
#wrapper main .contents#index .top_menu .main .lesson img {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .main .lesson img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .main .lesson-info {
  padding: 0.74em 0;
}
#wrapper main .contents#index .top_menu .main .bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 16px;
}
#wrapper main .contents#index .top_menu .main .order {
  background: url("../img/top-order-0.jpg");
  width: 226px;
  height: 212px;
}
#wrapper main .contents#index .top_menu .main .order img {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .main .order img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .main .contact {
  background: url("../img/top-access-0.jpg");
  width: 226px;
  height: 212px;
}
#wrapper main .contents#index .top_menu .main .contact img {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu .main .contact img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 50px;
}
#wrapper main .contents#index .top_menu2 .gallery {
  background: url("../img/top-gallery-0.jpg");
  background-size: cover;
  width: 347px;
  height: 212px;
}
#wrapper main .contents#index .top_menu2 .gallery img {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu2 .gallery img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu2 .blog {
  background: url("../img/top-blog-0.jpg");
  background-size: cover;
  width: 347px;
  height: 212px;
}
#wrapper main .contents#index .top_menu2 .blog img {
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#index .top_menu2 .blog img:hover {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
#wrapper main .contents#news h2 {
  position: relative;
  border-bottom: 2px solid #222;
  font-size: 1.4em;
  font-weight: bold;
  padding: 0.5em 0.25em;
  margin-bottom: 1em;
}
#wrapper main .contents#news h2 span {
  position: absolute;
  font-size: 0.6em;
  right: 0.5em;
  bottom: 0.5em;
  font-weight: normal;
}
#wrapper main .contents#news p {
  line-height: 1.8em;
}
#wrapper main .contents#news ul.image li img {
  width: 300px;
  margin: 1em 0;
  border: 1px #888 solid;
}
#wrapper main .contents#news .return {
  border-bottom: #444 solid 2px;
  text-align: right;
  padding: 1em 0;
}
#wrapper main .contents#news .return a {
  font-size: 0.8em;
  color: #888;
}
#wrapper main .contents#concept {
  margin-left: 5.5em;
}
#wrapper main .contents#concept p {
  color: #222;
  line-height: 2.6em;
}
#wrapper main .contents#concept img {
  margin: 2em 0;
}
#wrapper main .contents#gallery ul li {
  margin: 1em 0;
}
#wrapper main .contents#gallery ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 708px;
  height: 136px;
  border: 1px solid #333;
}
#wrapper main .contents#gallery ul li a img {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
#wrapper main .contents#gift ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin: 2em 0;
}
#wrapper main .contents#gift ul li {
  margin-right: 0.6em;
  margin-bottom: 0.6em;
}
#wrapper main .contents#gift ul li a {
  display: block;
  border: transparent 1px solid;
}
#wrapper main .contents#gift ul li a:hover {
  border: #aaa 1px solid;
}
#wrapper main .contents#gift ul li a img {
  width: 108px;
  height: 108px;
  -o-object-fit: cover;
     object-fit: cover;
}
#wrapper main .contents#lesson {
  margin-left: 5.5em;
}
#wrapper main .contents#lesson p {
  color: #222;
  line-height: 2.6em;
}
#wrapper main .contents#lesson img {
  width: 100%;
  margin: 2em 0;
}
#wrapper main .contents#order {
  margin-left: 5.5em;
}
#wrapper main .contents#order p.reserve {
  display: inline-block;
  font-size: 1.15em;
  line-height: normal;
  border-bottom: 2px #222 solid;
  margin-bottom: 4em;
}
#wrapper main .contents#order h2 {
  font-size: 1.1em;
  font-weight: bold;
  margin: 3em 0 1em;
}
#wrapper main .contents#order p {
  position: relative;
  color: #222;
  line-height: 2.6em;
}
#wrapper main .contents#order p a.googlemap {
  position: absolute;
  right: 2em;
  top: 0;
  font-size: 0.9em;
  border: 1px solid black;
  border-radius: 2em;
  padding: 0 2em;
}
#wrapper main .contents#order p.green {
  color: #839c93;
}
#wrapper main .contents#order img {
  margin: 2em 0;
}
#wrapper main .contents#contact p {
  position: relative;
  color: #222;
  line-height: 2.6em;
}
#wrapper main .contents#contact p a.googlemap {
  position: absolute;
  right: 2em;
  top: 0;
  font-size: 0.9em;
  border: 1px solid black;
  border-radius: 2em;
  padding: 0 2em;
}
#wrapper main .contents#contact p.green {
  color: #839c93;
}
#wrapper main .contents#contact img {
  margin: 2em 0;
}
#wrapper footer {
  margin: 3em 0 2em;
  width: 100%;
  text-align: right;
}

.mb3 {
  margin-bottom: 3em;
}

.goverlay {
  background: rgba(255, 255, 255, 0.9) !important;
}