@charset "UTF-8";
@import url(sanitize.css);

/* 共通部分(本より)----------*/
html {
  font-size: 100%; }

body {
  font-family: "Yu Gothic Medium", "???S?V?b?N Medium", "YuGothic", "???S?V?b?N??", "?q???M?m?p?S Pro W3", sans-serif;
  line-height: 1.7;
  color: #432;
}

a {
  text-decoration: none; }

img {
  max-width: 100%; }

/* HOME----------------------*/

#home {
	background-image: url(img/home.jpg);
	width: 100%;
	height: 450px;
	min-height: 100vh;
}
#home .page-title {
  text-transform: none; }
.home-content {
	text-align: center; /* 中身を中央寄せ */
	/*margin-top:10%*/
	height: 100%;
	position: relative;
}
/* 背景画像 */
.big-bg {
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
		background-blend-mode: hard-light;
}
/*----------------header--サイトからのコピペ--*/

.header {
  display: flex;
  justify-content: space-between;
  background: white;
	/*background: rgba(255,255,255,0.8);	背景のみ透過*/
	position: fixed;
    width: 70%;
    top: 0;
	margin: 0 auto;
	z-index: 2;
	padding-left: 7%;
	padding-right: 0%;
	padding: 20px;
}
ul.nav {
    margin: 0;
}
.nav-button {
  display: none; }

.nav li {
  display: inline-block;
  margin: 0 5px; }

.nav-wrap.open {
  display: block; }

.nav-wrap.close {
  display: none; }


@media screen and (min-width: 1001px) {
  .nav-wrap {
    display: block !important; } }
.content {
  padding: 20px; }

@media screen and (max-width: 1000px) {
	.header {
	width: 100%;
	padding-right: 7%;
	padding: 20px;
	}
	h3{
	font-size: 1.8rem;
	}
	.area_1 {
    display: inline-block;
    padding: 0.5em 1em;
    font-weight: bold;
    margin: 0;
    width: 100%;
	}

  .nav-button {
    display: block;
    cursor: pointer; }

  .nav-wrap {
    position: fixed;
    left: 0;
    top: 0;
    display: none;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%; }
    .nav-wrap .nav {
      height: 100%;
      position: relative;
      overflow-x: hidden;
      overflow-y: auto; }
    .nav-wrap li {
      display: block;
      margin: 2em; }
     .nav-wrap li a {
       color: #fff;
       font-size: 18px;
		border: none;
		width: fit-content; }

  /*メニューボタン*/
  .nav-button,
  .nav-button span {
    display: inline-block;
    transition: all 0.4s;
    box-sizing: border-box; }

  .nav-button {
    z-index: 20;
    position: relative;
    width: 40px;
    height: 36px; }

  .nav-button span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #67c5ff;	/*三本線の色*/
    border-radius: 4px; }

  .nav-button span:nth-of-type(1) {
    top: 0; }

  .nav-button span:nth-of-type(2) {
    top: 16px; }

  .nav-button span:nth-of-type(3) {
    bottom: 0; }

  .nav-button.active span:nth-of-type(1) {
    -webkit-transform: translateY(16px) rotate(-45deg);
    transform: translateY(16px) rotate(-45deg); }

  .nav-button.active span:nth-of-type(2) {
    opacity: 0; }

  .nav-button.active span:nth-of-type(3) {
    -webkit-transform: translateY(-16px) rotate(45deg);
    transform: translateY(-16px) rotate(45deg); }
}

/*# sourceMappingURL=style.css.map */
/* --/header----------------------*/

.container{
	width: 100%;
	background-color: #dff2f7;
	padding-bottom: 13%;
}
.inner{
	width: 70%;
	margin: 0 auto;
	background-color: white;
}
.sideline {
 	width: 90%;
    margin: 0 auto;
}

.button {
  text-align: center;
	display: inline-block;
	padding: 0.5em 1em;
  text-decoration: none;
  color: #67c5ff;
  border-radius: 3px;
  transition: .4s;
}
.button:hover {
  background: #67c5ff;
  color: white;
}
/*ボタンをクリックするとactiveクラスが付与される*/
.active{
    /* Y方向に要素を移動させる */
    transform: translateY(0%);
    transition: .5s;
}

h2 {
	color: #432;
	font-weight: normal;
    font-size: 4rem;
    margin: 2%;
	font-family: 'Philosopher', serif;
}
h3 {
	background: linear-gradient(transparent 60%, #ffff66 60%);
	font-size: 3rem;
	font-family: 'Philosopher', serif;
	margin: 0;
}
.marker {
	background-color: white;
	bottom: 0;
	margin-bottom: 0%;
	position: absolute;
	font-weight: normal;
	padding: 0 1rem;
}
.logo {
	/*font-family: "Yu Gothic Medium","???S?V?b?N Medium","YuGothic","???S?V?b?N??","?q???M?m?p?S Pro W3",sans-serif;*/
	font-family: 'Philosopher', serif;
	/*position: relative;*/
  	display: inline-block;
  	font-weight: bold;
 	 text-decoration: none;
  	color: #432;
	font-size: 30px;
}
.logo::before {
	content: '武道空手';
	font-size: 20px;
	left: -13px;
    position: relative;
}
.unit {
	padding-left: 41%;
    padding-top: 18%;
    font-weight: bold;
    font-size: 2rem;
    color: #432;
	color: #000;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
.point {
	text-align: left;
}
.circle1{
  display: inline-block;

  height: 80px;
  border-radius: 50%;
  background: #92cd97;
  text-align:center;
  line-height: 80px;
}
.circle2{
  display: inline-block;

  height: 80px;
  border-radius: 50%;
  background: #f5a500;
  text-align:center;
  line-height: 80px;
}
.circle3{
  display: inline-block;

  height: 80px;
  border-radius: 50%;
  background: #f67690;;
  text-align:center;
  line-height: 80px;
}
.cir {
	display: flex;
	font-family: 'Philosopher', serif;
}

/*-- block_1 ------------------------------*/

.block_1 {
    margin: 0 auto;
}
.area_1 {
	display: inline-block;
    padding: 0.5em 1em;
    font-weight: bold;
    margin: 0;
	width: 100%;
}
.kangei {
	font-size: 22px;
    font-family: 'Philosopher', serif;
	margin-top: 22px;
    margin-left: 5px;
	font-weight: bold;
	width: 100%;
}
.a_block {
	display: flex;
	width: 100%;
	margin: 0 auto;
}
.b_block {
	/*display: flex;*/
	margin-top: 5%;
	/*background: rgba(245,245,255,0.5);*/
}
.area_2 {
	margin-left: 2rem;
}
.block2 {
	margin: 0 auto;
	margin-top: 4rem;
}
.b1_space2 {
	width: 100%;
  margin-bottom: 3%;
}

.a_font {
	color: white;
    font-size: 30px;
	width: 170px;
}
.b_flex {
    display: flex;
}

.arrow2{
    position: relative;
    display: inline-block;
    padding: 0 0 0 33px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
}
.arrow2::before,
.arrow2::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.fontbig {
	font-size: 22px;
}

.keiko2 {
  font-weight: bold;
  font-size: 22px;
  margin-left: 2rem;
}

.keikon {
	font-weight: bold;
}
.area_2 ul li {
  list-style-type: none;
}

/*--guide-----------------------------*/
.guide {
    font-size: 22px;
}
.box30 {
    margin-top: 1.9rem;
    background: #f1f1f1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	display: flex;
}
.box30 .box-title {
    font-size: 1.2em;
    background: #5fc2f5;
    padding: 4px;
    text-align: center;
    color: #FFF;
    letter-spacing: 0.05em;
	width: 15%;
}
.box30 p {
    /*padding: 15px 20px;*/
    margin: 0;
}
.mini {
    font-size: 1.15rem;
}
.box-text {
    padding: 1.2rem;
}
/*--block3-------*/
.block3 {
	justify-content: space-between;
	margin-top: 1.5rem;
}
.barea {
	width: 50%;
    margin: 2% auto;
}
.bb {
	padding: 2%;
	text-align: center;
}

/* googleMap 参考書*/
#location {}
#location .wrapper {
	display: flex;
	justify-content: space-between;
    	margin: 0 auto;
}
.location-info {
	width: 50%;
    	margin: 0 auto;
}
.location-info p {
	padding: 12px 10px;
}
.location-map {
	/*	 position: relative;*/
  display: inline-block;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: white;
	width: 100%;
}

.tel {
	display: inline-block;
  padding: 7px 15px;
  border-radius: 25px;
  text-decoration: none;
  color: #FFF;
  background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
  transition: .4s;
	text-align: center;
	font-size: 24px;
}
.numb {
	color: #ffc06e;
	font-size: 40px;
}
.numb::before {
    content: 'TEL:';
    font-size: 1rem;
    left: -13px;
    position: relative;
	color: black;
}

/* iframe */
iframe {
	width: 100%
}

/*-- facebook ---------------------------------*/

.facebook_logo{
  width: 17%;
  margin-top: 15px;
  margin-bottom: 5px;
}

.sns_co {
	font-size: 41px;
	text-align: center;
}
.sns-box {
    font-weight: bold;
    margin: 0 auto;
}
#sns {
	background-color: white;
	/*width: 70%;*/
  margin: 2% auto;
}
#sns .sub-title {
	margin-bottom: 30px;
}
.sns_inner {
	max-width: 100%;
  margin: 0 auto;
  height: auto;
  width: 340px;
}

.sns_wrapper {
	justify-content: space-between;
	background: #87cefa;
  margin: 0 auto;
	padding-bottom: 2rem;
	width: 75%;
}

/*-- YouTube ---------------------------------*/

.Youtube_logo{
  width: 50%;
  height: 50%;
  margin-top: 15px;
  margin-bottom: 12px;
}

.YouTube_box {
  font-weight: bold;
  margin: 0 auto;
}

.YouTube_box2 {
  font-weight: bold;
  margin-top: 1.5em;
}

.YouTube_inner {
  max-width: 100%;
  margin: 0 auto;
  height: auto;
  width: 340px;
}

.YouTube_wrapper {
	justify-content: space-between;
	background: #ff6347;
  margin: 0 auto;
	padding-bottom: 2rem;
	width: 75%;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

/*-- Instagram ---------------------------------*/

.sns_co_2 {
	font-size: 41px;
	text-align: center;
}

.Instagram_logo{
  width: 17%;
  margin-top: 15px;
  margin-bottom: 5px;
}

.Instagram_box {
  font-weight: bold;
  margin: 0 auto;
}

.Instagram_box2 {
  font-weight: bold;
  margin-top: 1.5em;
}

.Instagram_inner {
  max-width: 100%;
  margin: 0 auto;
  height: auto;
  width: 340px;
}

.Instagram_wrapper {
	justify-content: space-between;
	background: #CF2E92;
  margin: 0 auto;
  margin-top: 1rem;
	padding-bottom: 1.6rem;
	width: 75%;
}

/* おまけ.png部分 */

.balloon {
    width: 22%;
    margin: 0 auto;
}
.balloon1 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
  border-radius: 15px;
}
.balloon1:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -45px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}
.balloon1 p {
  margin: 0;
  padding: 0;
}
.iimg {
    width: 33%;
    margin: 0 auto;
}
/*--index2-----------------------*/

.shoukai {
    padding: 7.1rem 4rem 4.5rem;
}
.sihann_inner {
    margin-left: 0%;
}
.shoukai_inner {
    background: rgba(245,245,255,0.5);
	padding-bottom: 2rem;
}
.shoukai_wrap {
    padding: 1.2rem;
}
.nin2 {
    font-size: 0.8rem;
}
.sho_co {
	font-family: 'Philosopher', serif;
	font-weight: bold;
    font-size: 2rem;
}
.sho_block {
    margin-top: 2.5rem;
}
.sho_comment {
    width: 70%;
    margin: 0 auto;
}
.sho_balloon {
  position: relative;
  display: inline-block;
  margin: 2.5em 0;
  padding: 15px 25px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #ffffff;
  border-radius: 15px;
}
.sho_balloon:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -45px;
  border: 15px solid transparent;
  border-top: 15px solid #ffffff;
}
.sho_balloon p {
  margin: 0;
  padding: 0;
}
.sho_img {
		width: 15rem;
		border-left: solid 20px #ffc06e;
}
.reki_1 {
    margin: 0rem 0.4rem 0;
}
.intro_space {
    height: 0rem;
}
th {
    vertical-align: baseline;
    width: 4rem;
}

@media (max-width: 769px) {
	.page-title {
		font-size: 2.4rem;
	}
	h1 {
		font-size: 1.7rem;
	}
	h3{
		font-size: 1.6rem;
	}
	.inner{
		width: 100%;
	}
	.cover.js-cover.active {
   	 	width: 100%;
		padding: 5.8rem 1.5rem 0;
	}
	.block_1{
		width: 100%
	}
	.barea {
		width: 100%;
	}
	#sns {
		width: 100%;
	}
	.flex_box {
	padding: 0%;
	}

	/* HEADER */
	.main-nav {
		font-size: 1rem;
	}
	.main-nav li {}
	/* HOME */
	.home-content {}

	/*.location-info,
	.location-map,
	.sns-box {
		width: 100%;
	}*/
	.sns-box {
		width: fit-content
		margin-bottom: 30px;
	}
	.first {
		flex-direction: column;
	}
	.a_block {
		flex-direction: column;
	}
	.b_block {
		/*flex-direction: column;*/
	}
	.box30 .box-title {
    	width: 12%;
		font-size: 1em;
	}
	.b_flex {
    	flex-direction: column;
	}
	.shoukai {
   	 	margin-top: 6.4rem;
    	padding: 1rem 1.6rem 0;
	}
	.unit {
	padding-left: 35%;
    padding-top: 25%;
	}

	.a_font {
    font-size: 20px;
	}
	.logo {
	font-size: 25px;
	padding: 0%;
	}
	.logo::before {
	font-size: 17px;
	}
	.guide {
    font-size: none;
	}
	.intro_space {
    height: 5rem;
	}
	.b1_space2 {
    /*width: 60%;*/
	}
	.sns_wrapper {
    width: 100%;
	}
  .YouTube_wrapper {
    width: 100%;
	}
  .Instagram_wrapper {
    width: 100%;
	}
	.box30 {
    font-size: 1rem;
	}
	.mini {
    font-size: 0.9rem;
	}
	.fontbig {
	font-size: 1rem;
	}
	.tel {
		font-size: 17px;
	}
	.numb {
	font-size: 27px;
	}
	.sns_co {
	font-size: 22px;
	}
  .sns_co_2 {
    font-size: 22px;
    }
  .sho_comment {
    width: 100%;
    margin: 0 auto;
  }
  .keiko2 {
    font-size: 16px;
  }
  
}

/* footer-----*/
footer {
	background: #432;
	text-align: center;
	padding: 26px 0
}
footer p {
	color: #fff;
	font-size: 0.875rem;
}