@charset "UTF-8";
/*ハンバーガーボタンーーーーーーーーーーーーー*/
/*ヘッダー*/
.header{
	font-family: 'Zen Kaku Gothic New';
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 80px;
	z-index: 1100;
}
.header_inner {
  position: relative;
  padding: 15px;
	max-width: 1000px;
}
.logo{

}
.title{
  font-size: 2rem;
  font-weight: 600;
}

.main{  
  margin-top: 60px;
}


@media only screen and (max-width: 540px) {
  .nav {
    position: fixed;
    right: -320px; /* 右から出てくる */
    top: 0;
    width: 300px; /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: #fff;
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 8px;
    width: 40px; /* クリックしやすい幅 */
    height: 40px; /* クリックしやすい高さ */
    cursor: pointer;
    z-index: 300;
  }
  .nav_list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .nav_item {
    text-align: center;
    padding: 0 14px;
  }
  .nav_item a {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
    text-decoration: none;
    color: #333;
  }
  .nav_item a:hover {
    background-color: #eee;
  }
  .hamburger_border {
    position: absolute;
    left: 11px;
    width: 18px;
    height: 2px;
    background-color: #333;
    transition: all .6s;
  }
  .hamburger_border_top {
    top: 14px;
  }
  .hamburger_border_center {
    top: 20px;
  }
  .hamburger_border_bottom {
    top: 26px;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }

  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 20px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 20px;
  }
}/* sp */


/*ハンバーガーボタンここまでーーーーーーーーーーーーー*/



.mini-title {
	border-bottom: #FEE200 solid 2px;
	margin: 0 auto 30px;
	width: 300px;
	text-align: center;
	
}

.news {
	background-color: #555555;
	padding: 50px 30px;
}

.news ul{
	list-style: none;
	max-width: 600px;
	margin: 0 auto;
}

.news ul li{
	margin-bottom: 20px;
}
.news ul li:last-child{
	margin-bottom: 0;
}



.circle {
	background-color: #DDDDDD;
	width: 125px;
	height: 125px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.circle-come span{
	display: block;
	white-space: nowrap;
	text-align: center;
}

.flex-center {
	display: flex;
	justify-content: space-around;
	align-items: center;
	margin: 30px 0
}

.flex-center p{
	font-size: 2em;
}

.top-come ol{
	margin: 0 auto;
}

.top-come ol li{
	margin: 35px 25px 30px;
}



.top-come {
	padding: 30px;
}


.mini-title0 {
	
}

.c-white {
	color: white;
}

.link-btn {
	background-color: #FEE200;
	border-radius: 50px;
	width: 70%;
	padding: 20px;
	text-align: center;
	margin: 0 auto;
	max-width: 400px;
}

body {
	color: #707070;
}

.program {
	padding: 30px 10px 50px;
}
.program p{
	margin-top: 30px;
	line-height: 20px;
	text-align: center;
}
.program img{
	max-width: 100%;
	display: block;
	margin: 0 auto;
}

.map {
	padding: 50px 30px;
}

.link-box {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.link-box a{
	display: inline-block;
	margin: 20px;
	color: #707070;
}

.sns-box {
	display: flex;
	justify-content: center;
}
.sns-box a{
	margin: 20px;
}

.footer {
	background-color: #FEE200;
	padding: 40px 20px;
}

.fot-logo {
	width: 67px;
	height: 45px;
	background: url("../images/logo.svg");
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	margin: 20px auto;
}

.header {
	background-color: #FEE200;
	display: flex;
	align-items: center;
	padding: 10px;
}

.yoyaku-btn {
	background-color: #06C755;
	border-radius: 12px;
	width: 100px;
	color: white;
	padding: 10px;
	text-align: center;
	margin: 0 20px;
}
.yoyaku-btn p{
	font-size: 0.6em;
	margin-top: 5px;
}

.logo {
		width: 67px;
	height: 45px;
	background: url("../images/logo.svg");
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

.topimg {
	max-width: 1000px;
	margin: 0 auto;
}
.topimg img{
	width: 100%;
	padding-top: 100px;
}

.header-left {
	display: flex;
}
.header_inner .header-left a {
}

.page-top {
	margin-top: 100px;
	height: 80px;
	padding: 20px;
	text-align: center;
	background-color: black;
	font-size: 1.7em;
	color: white;
	
}
.mini-come{
	font-size: 0.7em;
	margin: 20px;
}

.about-img {
	height: 300px;
	background-color: gray;
}

.about-com {
	width: 80%;
	margin: 50px auto 10px;;
	line-height: 2;
}

.time-list {
	font-size: 1em;
	margin: 10px;
}

.time-flex {
	display: flex;
	border-bottom: solid 1px #707070;
	justify-content: space-around;
	width: 80%;
	margin: 0 auto 20px;
}

.setubi-come {
	width: 60%;
	margin: 0 auto;
	line-height: 2;
}
.setubi-come span{
	display: inline-block;
}

.tomas {
	display: flex;
	margin: 50px 20px
}

.foto-tomas {
	width: 50%;
}
.foto-tomas img{
	max-width: 100%;
}

.tomas-box {
	width: 50%;
	padding: 0 20px
}

.katagaki {
	line-height: 1.5;
}

.tomas-come {
	line-height: 1.5;
}

.neme {
	margin-bottom: 30px;
	font-size: 1.2em;
}

.ad-title {
	text-align: center;
	font-weight: 500;
	font-size: 1.4rem;
		margin: 30px;
}

.flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.ad-text {
	font-size: 1.5rem;
	font-weight: 400;
	margin-bottom: 15px;
}

.ad-item {
	flex-basis: 40%;
	margin-bottom: 50px;
}
.ad-item p{
	font-size: 0.7rem;
}

.other {
	font-size: 1.3rem;
	margin-bottom: 15px;
	font-weight: 0;
	color: #313131;
}

.wrapper {
	
}

.adtop {
	margin: 20px 30px;
	color: black;
}
.adtop ul li{
position:relative;/*疑似要素にabsoluteを使用する場合必要*/
padding-left:15px; /*画像を表示させるスペースを確保*/
	margin-left: 20px;
}
.adtop ul li:before {
content:""; 
width:20px; 
height:20px; 
background:#FEE200;
border-radius:10px;
position:absolute;/*絶対配置にする*/
left:-12px;/*横の表示位置指定*/
top:2px;/*縦の表示位置指定*/
}

.adtop .other:before{
	top:0px;
}

.bank {
	color: #313131;
	line-height: 30px;
}

.adin {
	background-color: #FEE200;
	width: 250px;
	font-size: 1.5rem;
	margin: 50px auto;
	display: block;
	text-align: center;
	padding: 25px;
	border-radius: 50px;
	cursor:pointer;
}


.gry {
	background-color: #555555;
	color: white;
	padding: 30px;
}


.gry ul li{
position:relative;/*疑似要素にabsoluteを使用する場合必要*/
padding-left:15px; /*画像を表示させるスペースを確保*/
	margin-left: 20px;
	margin-bottom: 20px;
}
.gry ul li:before {
content:""; 
width:10px; 
height:10px; 
background:#FEE200;
border-radius:5px;
position:absolute;/*絶対配置にする*/
left:-12px;/*横の表示位置指定*/
top:3px;/*縦の表示位置指定*/
}

.refusal {
	padding: 30px;
}

.refusal ul li{
position:relative;/*疑似要素にabsoluteを使用する場合必要*/
padding-left:15px; /*画像を表示させるスペースを確保*/
	margin-left: 20px;
	margin-bottom: 20px;
}
.refusal ul li:before {
content:""; 
width:10px; 
height:10px; 
background:#FEE200;
border-radius:5px;
position:absolute;/*絶対配置にする*/
left:-12px;/*横の表示位置指定*/
top:3px;/*縦の表示位置指定*/
}

.sakuragi-img {
	background-image:url("../images/sakuragi05.jpg");
}
.trainer{
	flex-basis: 50%;
	background-repeat:  no-repeat;
	background-position: center top;
	background-size: cover;
	height: 325px;
}

.tra-text {
	border-top: solid 5px #FEE200;
	flex-basis: 50%;
	background-color: #DDDDDD;
	font-size: 0.7rem;
	padding: 10px;
	line-height: 15px;
}

.tra-wrapper {
	margin: 30px
}

.tra-flex {
	display: flex;
	margin: 40px auto;
}

.tra-neme {
	font-size: 1rem;
	margin-bottom: 8px;
}

.position {
	margin-bottom: 4px;
}

.kutita-img {
	background-image: url("../images/kuchidatop01.jpg");
}

.gii-img {
	background-image: url("../images/gii.png");
}

.noda-img {
	background-image: url("../images/nodatop02.jpg");
}





.class-area {
	max-width: 1000px;
	margin: 0 auto;
}
.class-area h2{
	border-bottom: solid 1px #FEE200;
	margin: 50px 0 10px;
	font-weight: 100;
	font-size: 2rem;
	padding-bottom: 10px;
}

.kick img{
	width: 100%;
}

.kick-come {
	padding: 20px 0;
	line-height: 20px;
}
.kick-come h3{
	margin: 20px 0 5px;
}

.classbox {
	display: flex;
	margin-bottom: 30px;
}

.class-img {
	flex-basis: 50%;
}
.class-img img{
	width: 100%;
	height: 100%;
}

.class-come {
	flex-basis: 50%;
	padding: 10px;
}

.classname {
	border-bottom: solid 1px #FEE200;
	margin-bottom: 5px;
	font-size: 1.2rem;
}

.class-text {
	line-height: 20px;
}

.price {

	max-width: 800px;
	margin: 20px auto;
	padding: 20px;
}

.price-title {
	text-align: center;
	font-size: 1.2rem;
	margin: 40px 0 60px;
}

.headline {
	background-color: #ADADAD;
	padding: 10px;
	display: block;
	max-width:  800px;
	color: white;
	text-align: center;
	margin: 10px 0;
}

.left {
	background-color: #DDDDDD;
	flex-basis: 40%;
	padding: 20px 0;
	align-self: stretch;
	text-align: center;
	margin-right: 5px;
}

.right {
	background-color: #F5F4DC;
	flex-basis: 60%;
	text-align: center;
	padding: 20px 0;
		align-self: stretch;

}

.pr-flex {
	display: flex;
	align-items: center;
	margin: 5px 0;
}

.class-wrapper {
	background-color: #555555;
	padding: 10px;
	color: white;
}

.hoken {
	text-align: center;
	margin: 15px;
}

.free {
	text-align: center;
	margin: 20px 0 50px;
}

.ticket {
	margin: 10px 0 50px;
}




.left-img img{
	width: 100%;
}

.mashin-come span{
	display: inline-block;
}

.parsnal-text {
	line-height: 25px;
	padding: 20px 0 50px;
}

.last {
	text-align: center;
	margin: 20px 0 30px;
}

.map-img {
	margin-bottom: 30px;
}
.map-img p{
	text-align: center;
	margin: 10px 0;
}

.top-text {
	max-width: 350px;
	margin: 0 auto;
}

.time {
	color: white;
}

.setubi-area {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto;
	justify-content: space-between;
}

.img4 {
	flex-basis: 48%;
	margin-bottom: 10px;
}
.img4 img, .img3 img, .img1 img, .img2 img{
	width: 100%;
}

.setubi-flex {
	display: flex;
	justify-content: space-between;
}

.img2 {
	flex-basis:66%;
}

.img1 {
	margin-bottom: 10px;
}

.img-box {
	flex-basis: 32%;
}

.img3 {
	margin-bottom: 10px;
}

.setubi-wrrper {
	max-width: 800px;
	margin: 0 auto;
}

.ad-wrapper li{
	list-style: none;
}

.tel a{
	display: block;
	text-align: center;
}


.about-com {
	background-color: #555555;
	color: white;
}

.gry-rap {
		background-color: #555555;
	color: white;
}

.setubi {
	padding: 50px 30px;
}
.moraisu-img {
	background-image: url("../images/moraisu.jpg")
}

.banner-img img {
	width: 100%;
}

.onogi-img {
	background-image: url("../images/onogi.jpg");
}

.jujutsubaner img{
	display: block;
	margin: 0 auto;
	width: 100%;
}

.jujutsubaner {
	margin: 0 auto 50px;
	width: 100%;
}



span {
	display: inline-block;
}