@media (min-width: 768px) {
.fv{
  height: 100vh;
}
}

@media (max-width: 767px) {

/*~~~~~~~~~
sp-common
~~~~~~~~~~~*/
.sp-mb30{
  display: block;
  margin-bottom: 30px;
}

.sp-mt30{
  display: block;
  margin-top: 30px;
}

.about-wrapper,
.intro-wapper,
.menu-wrapper,
.line-wrapper{
  display: block;
  padding-left: 4%;
  padding-right: 4%;
}

.about-wrapper h2, .about-wrapper p,
.intro-image, .intro-text,
.academy-slider .swiper-flex .text, .academy-slider .swiper-flex .image,
.menu-wrapper .image, .menu-wrapper .text{
  width: 100%;
}

.sp-br{
  display: block;
}

.pcview {
  display: none;
}
.spview {
  display: inherit;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
sp-menu
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

h1{
  margin-left: 8%;
  height: 100px;
}

header {
  height: 80px;
}

h1 img {
  width: 70px;
}

.hamburger span{
  background-color: #fff;
  left: 8px;
}

.hamburger.active span:nth-child(3) {
  top: 19px;
}

.hamburger.active span:nth-child(1) {
  top: 19px;
  left: 8px;
}

header nav {
  margin-top: 0;
  padding-top: 25vh;
}

nav.globalMenuSp ul{
  display: block;
  height: 100vh;
}

nav.globalMenuSp ul li{
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}

header nav ul li a img {
    width: auto;
    height: auto;
    margin: 0 auto;
}

nav.globalMenuSp.active{
  visibility: visible;
}

nav.globalMenuSp.active ul li a {
  visibility: visible;
}

nav.globalMenuSp ul li a {
  padding: 0;
}

nav.globalMenuSp ul .nav-btn a {
  width: 180px;
  height: 50px;
  background-color: #F15A24;
  border-radius: 15px;
  font-size: 20px;
  padding: 9px;
}
/*~~~~~~~~~
sp-fv
~~~~~~~~~~~*/
.fv-wrapper{
  right: 0;
}

.fv-wrapper h2 {
  font-size: 20px;
}

.fv-image {
  width: 90.8vw;
}

.fv-wrapper-txt{
  margin-top: 0;
  font-size: 20px;
}
/*~~~~~~~~~
sp-about
~~~~~~~~~~~*/
.about{
  padding-bottom: 150px;
}
.about-wrapper p{
  font-size: 15px;
}
.about-wrapper p{
  margin-top: 45px;
}
.about-right{
  width: 100%;
}

/*~~~~~~~~~
sp-intro
~~~~~~~~~~~*/
.intro-text{
  padding-left: 0;
  margin-left: 0;
}
.intro-text p{
  margin-top: 30px;
}
.intro-wapper {
    padding-bottom: 50px;
    margin-bottom: 50px;
}

/*~~~~~~~~~{
sp-academy
~~~~~~~~~~~*/
.academy{
  padding-top: 50px;
}
.swiper-flex{
  display: block;
}
.academy-slider h3 {
    height: 30px;
}
.academy-slider .text{
  margin-bottom: 30px;
}
.academy-slider .image figure{
  height: 300px;
}
.swiper-button-prev:after{
  margin-left: 0;
}
.swiper-button-next:after{
  margin-right: 0;
}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
}


.school {
  padding-top: 100px;
}

.school-menu ul{
flex-wrap: wrap;
padding-left: 8%;
padding-right: 8%;
padding-top: 80px;
}
.school-menu h3,
.menu-wrapper h3 {
  height: 28px;
  text-align: center;
  font-size: 32px;
  padding: 2 0;
}
.school-menu ul li a{
  width: 100%;
  height: 150px;
}
.school-menu ul li a img {
  width: auto;
  height: 80px;
}
.school-menu ul li{
  width: 50%;
  padding: 7px;
}


.menu {
  padding-top: 120px;
}
.menu-wrapper:nth-child(2n-1) .text{
  padding-right: 0;
}
.menu-wrapper:nth-child(2n) .text{
  padding-left: 0;
}
.menu-wrapper{
  padding-bottom: 80px;
}
.menu-wrapper .image figure{
  height: 350px;
}
.menu-wrapper .text h4{
  margin-bottom: 25px;
}
.menu-wrapper .image{
  margin-top: 45px;
}
.menu-wrapper .text p {
    margin-bottom: 40px;
}

.coach{
  padding-top: 80px;
  padding-bottom: 100px;
}
.coach-slide {
  width: calc((100vw/1) + 30px);
  margin: 80px 20px 0;
}
.swiper-button-prev:after{
  background-image: inherit;
  width: 30px;
  height: 30px;
  font-family: "Font Awesome 5 Free";
  content: '\f104';
  font-weight: 900;
  color: #fff;
}
.swiper-button-next:after{
  background-image: inherit;
  width: 30px;
  height: 30px;
  font-family: "Font Awesome 5 Free";
  content: '\f105';
  font-weight: 900;
  color: #fff;
}

.faqs {
    padding-bottom: 100px;
}

.faq-wrapper{
  padding: 0 8%;
  margin: 80px auto 0;
}
.line-wrapper{
  text-align: center;
}
.line-wrapper .txt h4{
  font-size: 22px;
}

.line-wrapper p{
  font-size: 14px;
  margin-top: 15px;
  opacity: 0.7;
}

.line-wrapper .image{
  width: 100%;
  margin-top: 30px;
}

.line-wrapper .txt{
  width: 100%;
}
.cv-btn {
  max-width: 90%;
  margin: 0 auto 20px;
}
.cv-btn p{
  margin-top: 0;
  font-size: 1rem;
  opacity: 1;
}
.cv-btn p.btn-title {
  font-size: 1.5rem;
}
@media (max-width: 375px) {
  .cv-btn p {
    font-size: 0.875rem;
  }
  .cv-btn p.btn-title {
    font-size: 1.125rem;
  }
}

.plan {
  padding-top: 80px;
  padding-bottom: 150px;
}

.plan-wrapper {
  padding-bottom: 0;
}

.plan-table{
	width: 100%;
	padding: 0 8%;
	display: block;
}

.plan-table-wrap {
	width: 100%;
}

.plan-table-wrap.standard-wrap{
	margin-bottom: 30px;
}


.plan-table table th{

}

.plan-table table td{

}

footer{
  padding: 45px 8%;
}

footer ul{
  margin-bottom: 60px;
}

footer .logo {
  width: 100px;
}

.contact,.contact span,.contact .img,
footer ul.flex{
  display: block;
}

footer ul li{
  margin: 15px 0;
}

.contact{
  height: auto;
  width: 100%;
}

footer p{
  font-size: 12px;
  opacity: .7;
}

.contact-wrap{
  padding-top: 85px;
}
.contact-page .fv{
  height: 350px;
}
.contact-wrapper{
  width: 90%;
}
.privacy h2{
  font-size: 28px;
}
.trade-section table{
  padding: 8px;
}
.ttl.trade-ttl{
  width: 100%;
  padding:0 15px;
}
.privacy .ttl{
  width: 85%;
  padding-right: 15px;
}
.content-wrap h3{
  font-size: 20px;
}
.content-wrap p,
.content-wrap li,
.content-wrap td,
.content-wrap th{
  font-size: 14px;
}
.modal-inner {
  width: 90%;
  height: auto;
  background-color: #fff;
  padding: 15px;
}
}