@charset "UTF-8";
/* リセット */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0;
  font-size: 100%;
  list-style: none;
}
img {
  vertical-align: bottom;
  max-width: 100%;
}
body {
  /*	font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif;*/
  font-family: 'Arial', YuGothic, 'Yu Gothic', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, 'ＭＳ ゴシック', sans-serif
}

/* ヘッダー設定 */
.contener_menu{
  width: 300px;
  position: fixed;
float: left;
}
@media (max-width: 900px){
  .contener_menu{
    display: none;
  }
}
.top_logo {
  width: 175px;
  margin-top: 1.4em;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 900px){
  .top_logo {
    width: 150px;
  }
}
.menu{
  margin-top: 2em;
  text-align: center;
}
.menu ul a{
  text-decoration: none;
  font-size: 15px;
  color: #000;
  line-height: 2.6em;
}
.menu ul a:hover{
  color: #7F789C;
  webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.adress_top{
  margin-top: 3em;
  font-size: 14px;
  color: #000;
  text-align: center;
  line-height: 1.8em;
}
.sns{
  margin-top: 1em;
width: 100%;
 text-align: center;
}

/* メニューのデザイン*/
.nav_content {
  width: 300px;
  height: 100%;
  position: fixed;
  top: 0%;
  right: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #FFF;
  transition: .5s;
  text-align: center;
  /* padding-top: 20px; */
}
@media (max-width: 900px){
  .nav_content {
    width: 270px;
  }
}
.nav_list{
  padding-top: 20px;
}
.nav_content li a{
  color: #000;
  text-decoration: none;
    font-size: 15px;
    color: #000;
    line-height: 2.6em;
}
@media (min-width: 900px){
  .nav_content {
    display: none;
  }
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  right: 0;
}

/* CSSコード */
.header {
  /* padding: 0 20px; */
  position: relative;
}

/* ここから下がハンバーガーメニューに関するCSS */

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  position: absolute;
  left: 14px;
  top: 27px;
  z-index: 100;
  cursor: pointer;
    font-weight: bold;
}
.box{
  position: absolute;
  position: fixed;
  left: 0px;
  top: 0px;
  padding: 1.5em 1.5em;
  border: solid 4px #FFFFFF;
  background: #FFFFFF;
  opacity: 0.5;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 30px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
  ;

}
.drawer_open{
  position: fixed;
}

@media (min-width: 900px){
  .drawer_open{
    display: none;
  }
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 10px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 10px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* FV設定 */
.contener_main{
  margin-left: 300px;
  background: #F1F1F1;
}
.contener_photo{
  position: relative;
  width: auto;
height: 70vh;
margin-bottom: 0;
background-image: url(../img/top-photo.png);
background-position: center center;
background-size: cover;
background-color: #464646;
}
.open{
  position: absolute;
    top: 20%;
    right: -8%;
    transform: translate(-50%, -50%);
}
@media (max-width: 580px){
  .open{
    width: 40%;
    padding-left: 1.5em;
    padding-right: 1.5em;
    text-align: center;
  }
  .open{
    position: absolute;
      top:17%;
      right: -26%;
      transform: translate(-50%, -50%);
  }
}
.contener_mma{
  margin-top: 4em;
  text-align: center;
}
.contener_mma h1{
  font-size: 26px;
  margin-bottom: 0.4em;
}
.contener_mma h1 br{
  display: none;
}
.contener_mma h3{
  margin-top: 1em;
  line-height: 1.8em;
  font-size: 15px;
  font-weight: normal;
}
@media (max-width: 580px){
  .contener_mma{
    width: auto;
    padding-left: 1.2em;
    padding-right: 1.2em;
    text-align: center;
  }
  .contener_mma h1 br{
    display: block;
  }
  .contener_mma h3 {
    text-align: justify;
  }
  .contener_mma h3 br{
    display: none;
  }
}
@media (max-width: 900px){
  .contener_main{
    margin-left: 0px;
  }
}


/* button設定 */
.button{
  background: #0D0049;/*背景色*/
  border: 1px #FFF solid;
  font-size: 18px;
  line-height: 1;/*行高は1に*/
  padding: 18px 10px;/*文字周りの余白*/
  border-radius: 10px;
  width: 200px;
  text-align: center;
  transition: .3s;
  font-weight: normal;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.2em;
}
a {
  color: #FFF;/*文字を白に*/
transition: .3s;
text-decoration: none;
}
.button:hover {
background: #0D4787;
}
/* kids写真設定 */
.kids{
  width: auto;
height: 28vh;
margin-bottom: 0;
background-image: url(../img/kids.png);
background-position: center center;
background-size: cover;
background-color: #464646;
margin-top: 5em;
}
/* class紹介設定 */
.contener_class{
  margin-top: 4em;
  margin-bottom: 5em;
}
.contener_class:after{
  content: "";
  display: block;
  clear: both;
}
.contener_class h1{
  font-size: 26px;
  width: 130px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.4em;
}
.contener_class img{
  margin: auto;
  display: block;
}
.class-box{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
}
@media (max-width: 580px){
  .class-box {
    width: 90%;
}
}
.contener_class h3{
  /* margin-top: 1em; */
  line-height: 1.8em;
  font-size: 18px;
  margin-bottom: .8em;
  text-align: center;
  background: #D3DCF0;
  padding: 6px 0 6px 0;
}
.contener_class h4{
  /* margin-top: 1em; */
  line-height: 1.8em;
  font-size: 18px;
  margin-bottom: .8em;
  text-align: center;
  background: #efd3e6;
  padding: 6px 0 6px 0;
}

.class_mma ul li {
    text-align: justify;
    padding-bottom: .6em;
}
.class_kids ul li {
    text-align: justify;
}
.contener_class p{
  font-size: 15px;
}
/* 料金設定 */
.contener_price{
  margin-top: 4em;
  text-align: center;
    padding-bottom: 1em;
}
.contener_price h1{
  font-size: 26px;
  margin-bottom: 0.4em;
}
.contener_price h3{
  margin-top: 1em;
  line-height: 1.8em;
  font-size: 15px;
  font-weight: normal;
}
@media (max-width: 580px){
  .contener_price{
    width: auto;
    padding-left: 1.2em;
    padding-right: 1.2em;
  }
  .contener_price h3 {
      text-align: justify;
  }
  .contener_price h3 br {
    display: none;
}
}

/* テーブルデザイン設定 */
.table_design {
 width: 75%;
 border-collapse: collapse;
 border-spacing: 0;
margin-left: auto;
margin-right: auto;
border-bottom: dashed 1px #778ca3;
}
.table_design tr {
 border-top: dashed 1px #778ca3;
 font-size: 16px;
}
.table_design th {
 padding: 0px 20px 0px 20px;
 height: 4.5em;
 background: #e9faf9;
}
.table_design td {
 padding-left: 3em;
 height: 4.5em;
 /* background: #FFF; */
}
h4 span{
    font-size: 15px;
    display: block;
    text-align: center;
    margin-bottom: 1.2em;
    color: red;
}
.yoyaku{
  width: 75%;
  margin-left: auto;
  margin-right: auto;
  text-align: right;
}

.yoyaku p{
  font-size: 15px;
  padding-top: .4em;
}
@media (max-width: 580px){
  .table_design {
   width: 90%;
  }
  .table_design td {
    padding-left: 1em;
}
.table_design th {
 height: 6em;
}
h4 span{
  width: auto;
  padding-left: 1.2em;
  padding-right: 1.2em;
}
.yoyaku{
  width: auto;
  padding-left: 1.2em;
  padding-right: 1.2em;
}
}

/* jujitsu写真設定 */
.jujitsu{
  width: auto;
height: 28vh;
margin-bottom: 0;
background-image: url(../img/jujitsu.png);
background-position: center center;
background-size: cover;
background-color: #464646;
margin-top: 5em;
}

/* map設定 */
.contener_map{
  margin-top: 4em;
  text-align: center;
    padding-bottom: 2em;
}
.contener_map h1{
  font-size: 26px;
  margin-bottom: 0.4em;
}
.contener_map h3{
  margin-top: 1em;
  line-height: 1.8em;
  font-size: 15px;
  font-weight: normal;
}
/* googlemap設定 */
.google-maps {
  position: relative;
  padding-bottom: 25%;
  height: 0;
  overflow: hidden;
  margin-left: 300px;
  /* height: 8em; */
}
.google-maps iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 900px) {
  .google-maps {
    width: auto;
    height: 12em;
        margin-left: -300px;
  }
}
  /* footer設定 */
  footer {
    background: #2E235E;
    margin-left: 300px;
  }
  @media (max-width: 900px) {
    footer {
      margin-left: 0px;
    }
}
  .footer_wrapper {
    width: 330px;
    margin-left: auto;
    margin-right: auto;
  	text-align: center;
  }
  .footer_wrapper img {
    margin-top: 1em;
  	margin-bottom: .5em;
  }
    @media (max-width: 900px) {
      .footer_wrapper {
        width: 100%;
      }
    }
  /* 問合せボタン */
  .contact_buttom {
    text-align: center;
    background: #FFF;
    color: #2E235E;
    padding: .4em .4em;
    font-size: 16px;
    border-radius: 6px;
    width: 160px;
    margin-top: .4em;
    margin-left: auto;
    margin-right: auto;
  }
  .contact_buttom a {
    text-decoration: none;
    color: #2E235E;
  }
  .contact_buttom:hover {
    opacity: 0.7;
    webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .footer_tel {
    text-align: center;
    margin-top: .4em;
  }
  .footer_tel p {
    font-size: 18px;
    font-weight: bold;
    color: #FFF;
  }
  .footer_tel span {
    font-size: 14px;
    font-weight: normal;
  }
  .footer_ad p {
    font-size: 14px;
    color: #FFF;
    text-align: center;
    margin-top: .2em;
  }

  /* コピーライト設定 */
  .copyright {
    background-color: #2E235E;
  }
  .copyright p {
    font-size: 15px;
    padding-top: 1.2em;
    padding-bottom: 1.8em;
    color: white;
    text-align: center;
  }