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

html {-webkit-text-size-adjust: 100%;
      font-size: 62.5%;
     }

a { display: block; 
    text-decoration: none;
  }

img { max-width:100%;
      height: auto;
    }

body { margin: 0;
       text-align:center;
       -webkit-text-size-adjust: 100%;
       font-size: 1rem;
       line-height:160%;
     }

div { display: block;
    }

.title { color:#ff99cc;
         font-size:x-large;
         margin: auto;
       }
       
#bg_header {width: 100%;
            margin-left: auto;
            margin-right: auto;
            }
#header { background-color: #ff99cc;
          color:#ff99cc;
          margin-left: auto;
          margin-right: auto;
          }

h1        {
  width: 146px;
  margin-left: 30px;
  padding: 10px 0 5px;
         }
h1 img{
  width: 100%;
  margin: 0 auto;
}
.top_image{
  width: 100%;
  position: relative;
  z-index: 0;
}
.top_image img{
  width: 100%;
}
.belief{
  position: absolute;
  top: 162px;
  z-index: 0;
}
.belief ul{
  display: flex;
  justify-content:space-around;
  list-style: none;
}
.belief li{
  width: 30%;
}

.fadeInUp{
  opacity: 0;
    transform: translateY(20px);
}
.first{
  transition: 0.5s;
}
.second{
  transition: 1s;
}
.third{
  transition: 1.5s;
}
.bnr{
  width: 100%;
  margin-top: 70px;
}
.bnr img{
  width: 100%;
}
.botton-nav { padding:10px 0;
              font-size: 116%;
            }

#nav1 { margin: 0 auto;
        width: 276px;
      }

         

#nav1 ul li {  float: left; 
               text-align: center;
               width: 72px;
               margin: 10px 10px ; 
               list-style:none; 
               } 

#nav2  { width: 280px;
         margin: auto;
        } 


#nav2 ul li { float: left; 
              text-align: center;
              width: 115px;
              margin: 10px 10px; 
              list-style:none; 
            }

            



h2 { clear: both;
     background:#ffff99;
     font-size: 5px;
     padding:15px 0 15px 0;
     margin: 5px 0 15px 0;
     height: 199px;
     }

.osirase{ padding: 10px 0;
	  clear: both;
     	  background:#ffccff;
        }

#information { background-image: url("img/sp/new.gif");
               background-repeat: no-repeat;
               width: 280px;
               margin: auto; 
               height:193px;    
              }
             
#new-text {padding: 70px 1px 4px 20px;
           width: 240px;
           font-size:15px;
           text-align:left; 
          }

table, td, th{border: solid 1px #525252;
              margin-top: 30px;
              margin-bottom:10px;
              padding: 2px;
              font-size: 105%;
             }

#table {width:280px;
        line-height:130%;
        margin-right:auto;
        margin-left:auto;
        font-weight: bold; 
        background:#fcdef9;
        }

#samedi{color:#000099} 

#kome{font-size:small;
      margin:5px auto;
      margin-bottom: 30px;
             }

#tel {padding-top: 1em ;
      padding-right: auto;
      padding-bottom: 2em;
      padding-left: auto;
     }

.botton_tel {text-align: center;
             font-size: 120%;
             margin: auto;
             width: 240px;
             color: #252225;
             font-weight: bold;
             border-radius: 12px;
             padding: 0.3em 2em;
           background: #fcecfc; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #fcecfc 0%, #fba6e1 15%, #fd89d7 35%, #fd89d7 56%, #ff7cd8 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fcecfc), color-stop(15%,#fba6e1), color-stop(35%,#fd89d7), color-stop(56%,#fd89d7), color-stop(100%,#ff7cd8)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(45deg,  #fcecfc 0%,#fba6e1 15%,#fd89d7 35%,#fd89d7 56%,#ff7cd8 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(45deg,  #fcecfc 0%,#fba6e1 15%,#fd89d7 35%,#fd89d7 56%,#ff7cd8 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(45deg,  #fcecfc 0%,#fba6e1 15%,#fd89d7 35%,#fd89d7 56%,#ff7cd8 100%); /* IE10+ */
	background: linear-gradient(45deg,  #fcecfc 0%,#fba6e1 15%,#fd89d7 35%,#fd89d7 56%,#ff7cd8 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcecfc', endColorstr='#ff7cd8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

            }

#botton_group { text-align: center;
                font-size: 120%;
                margin: auto;
                padding: auto;
                width: 320px;
                color: #494148;
              }

.bottom_nav{
  width: 98%;
  margin:  0 auto;
}
.bottom_nav div{
  margin: 2px 0;
}

#page-top {
                position: fixed;
                right: 0;
                bottom: -17px;
                z-index: 9;
            }
.reserve.fixed {
              opacity: 1;
              pointer-events: auto;
              list-style: none;
          }
.reserve {
            left: 0;
            bottom: 0;
            height: 51px;
            opacity: 1;
            width: calc(100% - 64px);
            position: fixed;
            background: #ec78ab;
        }
.reserve a {
          width: 90%;
          max-width: 220px;
          margin: auto;
          height: 100%;
          font-size: 100%;
          display: inline-block;
          display: block;
          overflow: hidden;
          color: transparent;
          text-decoration: none;
          text-indent: 110%;
          white-space: nowrap;
          font-size: 0;
          background: #ec78ab url(../img/sp/reserve_sp.png) no-repeat center center;
          background-size: contain;
      }          

footer{
        font-size: 0.8em;
        margin: 1.2em auto auto auto;
        text-align:center;
        padding: 15px 0 5px 0;
        margin-bottom: 39px;
        color: #f1697b;
      }


#last{ font-size: 0.4em;
       text-align: right;
       
     }



/*----------------------- staff -----------------------*/

#staff-top{ margin-left: auto;
            margin-right: auto;
          }

#top-navi ul{ display: block;
              font-weight :bold;
              margin-left: auto;
              margin-right: auto;
          }

#top-navi ul li {  border: 1px solid #ccc;
                   text-align: center;
                   margin-left: auto;
                   margin-right: auto;
                   min-height: 30px;
                   padding:auto;
                   width: 32.999%;
                   float: left; 
                   background: -webkit-gradient(linear, left top, left bottom, color-stop(0.77, #7dff7d), color-stop(0.50, #3ad33d), color-stop(0.50, #3ad33d), color-stop(0.02, #bcffbe));
                   background: -webkit-linear-gradient(top, #bcffbe 2%, #3ad33d 50%, #3ad33d 50%, #7dff7d 77%);
                   background: -moz-linear-gradient(top, #bcffbe 2%, #3ad33d 50%, #3ad33d 50%, #7dff7d 77%);
                   background: -o-linear-gradient(top, #bcffbe 2%, #3ad33d 50%, #3ad33d 50%, #7dff7d 77%);
                   background: -ms-linear-gradient(top, #bcffbe 2%, #3ad33d 50%, #3ad33d 50%, #7dff7d 77%);
                   background: linear-gradient(to bottom, #bcffbe 2%, #3ad33d 50%, #3ad33d 50%, #7dff7d 77%);
                }





header{
  height: 56px;
  background-color: #fff;
  filter: drop-shadow(1px 1px 1px rgba(211,211,211,0.6));
  position: relative;
  z-index: 8;

}
}



/* Nav
-----------------------------------------*/

@media screen and (max-width: 860px) {
  .Nav {
  position: relative;
  }
}
.Nav .navbtn {
  display: none;
}
@media screen and (max-width: 860px) {
  .Nav .navbtn {
    display: block;
    position: absolute;
    top: -45px;
    right: 10px;
  }
}
@media screen and (max-width: 860px) {
  .Nav .navbtn a,
  .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
  }
  .Nav .navbtn a::before,
  .Nav .navbtn a.close::before {
    position: absolute;
    top:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
   transition: .2s;
	 background: #fff;
  }
  .Nav .navbtn a.open::before {
    top:19px;
    transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  }
  .Nav .navbtn a::after,
  .Nav .navbtn a.close::after {
    position: absolute;
    bottom:10px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
    transition: .2s;
		background: #fff;
  }
  .Nav .navbtn a.open::after {
    bottom:18px;
    transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  }
}
@media screen and (max-width: 860px) {
  .Nav .navbtn a.open {
  }
}

@media screen and (max-width: 860px) {
  .Nav .navbtn a span {
    display: block;
    overflow: hidden;
    width: 1px;
    height: 1px;
  }
  .Nav .navbtn a span::after,
  .Nav .navbtn a.close span::after {
    position: absolute;
    top:18px;
    left:10px;
    content:"";
    width: 20px;
    height: 3px;
		background: #fff;
  }
  .Nav .navbtn a.open span::after {
    display: none;
  }
}
.Nav ul.close {
  display: none;
  border-top: solid 1px #F5F4F0;
}
.Nav > ul {
  margin: 0 auto;
  max-width: 984px;
	position: absolute;
	top: 0;
	right: 3%;
}
@media screen and (max-width: 860px) {
  .Nav > ul {
    display: none;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    z-index: 9999;
	padding: 0;
  padding-top: 10px;
	background: #fff;
  }
}
.Nav > ul > li {
  position: relative;
  font-size: 15px;
  display: inline-block;
}
@media screen and (max-width: 860px) {
  .Nav > ul > li {
    display: block;
    text-align: center;
    border-bottom: 1px solid #D2D2D2;
    width: 78%;
    margin: 0px auto;
  }
}
.Nav > ul > li a {
  display: block;
  position: relative;
  text-decoration: none;
  padding: 4px 15px;
  font-size: 15px;
  color: #fff;
  z-index: 2;
	font-weight: bold;
}

@media screen and (max-width: 860px) {
.Nav > ul > li.parent.open > a::before {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
}
@media screen and (max-width: 860px) {
  .Nav > ul > li.parent.open {
    border-bottom: none;
  }
}
  .Nav > ul > li.parent.open > a{
    color: #FFF;
  }
  .Nav > ul > li.parent.open > a::after {
  background: #333;
  -webkit-transform: scale(1);
  transform: scale(1);
}
@media screen and (max-width: 860px) {
  .Nav > ul > li.parent.open > a {
    color: #FFF;
  }
	.Nav > ul > li a{
		color: #000;
		font-weight: bold;
	}
}

.parent::before {
  content: "";
    display: inline-block;
    position: relative;
    left: -117px;
    top: 22px;
    width: 14px;
    height: 14px;
    background: url(../img/sp/icon.png) no-repeat;
    background-size: contain;
    vertical-align: middle;
 }
.open{
  height: 100vh;
  font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  letter-spacing: 0.1em;
}



/* .Nav > ul > li a:hover {
    text-decoration: underline;
} */
.Nav > ul > li a::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.Nav > ul > li a,
.Nav > ul > li a::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}
.Nav > ul > li a::after {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: scale(.5);
  transform: scale(.5);
}
.Nav > ul > li a:hover::after {
  -webkit-transform: scale(1);
  transform: scale(1);
}


header ul li {
    display: inline-table;
    position: relative;
}
header ul li a {
  display: table;
  padding: 0 16px;
  vertical-align: middle;
  text-align: center;
  color: #00913a;
  font-size: 16px;
  font-weight: 300;
  line-height: 22px;
	color: #fff;
	text-decoration: none;
}

header ul li a::before{
    position: absolute;
	left: 0;
	right:0;
	bottom: -5px;
	width:100%;
	height:1px;
	margin:auto;
	background-color: #fff;
	-webkit-transition-duration: 0.15s;
	transition-duration: 0.15s;
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	transform: scaleX(0);
	content: "";
	z-index: 9999;
	opacity: 0.5;
}
header ul li a:hover::before{
	transform: scaleX(1);
}





/* SPのトグル */

@media screen and (max-width: 860px){
.Nav .navbtn a, .Nav .navbtn a.close {
    display: block;
    position: relative;
    width: 40px;
    height: 40px;
    background-color: #ec78ab;
		color: #ec78ab;
		z-index: 999;
}
}
@media screen and (max-width: 860px){
.Nav .navbtn a::before, .Nav .navbtn a.close::before {
    position: absolute;
    top: 10px;
    left: 10px;
    content: "";
    width: 20px;
    height: 3px;
    background-color: #FFF !important;
    transition: .2s;
}
.Nav .navbtn a span::after, .Nav .navbtn a.close span::after {
    position: absolute;
    top: 18px;
    left: 10px;
    content: "";
    width: 20px;
    height: 3px;
    background-color: #FFF;
}
.Nav .navbtn a::after, .Nav .navbtn a.close::after{
	position: absolute;
bottom: 10px;
left: 10px;
content: "";
width: 20px;
height: 3px;
background-color: #FFF;
transition: .2s;
}
}

@media screen and (max-width: 786px){
.Nav > ul{
        top:-3px;
        padding-top: 28px;
    }
}