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

/*-----------
 sp utility
-------------*/
.gloval-nav{
  display: none;
}

.pc{
  display: none;
}

.sp{
  display: block;
}

.flex{
  display: block;
}

.sp-flex{
  display: flex;
}

.left5{
  margin-right: 5vw;
  }

.top80{
  padding-top: 10vw;
}

.bottom10{
  padding-bottom: 4vw;
}

.bottom80{
  padding-bottom: 10vw;
}

.bottom100{
  padding-bottom: 12vw;
}

.main-width{
  /* width: 100%; */
  padding-left: 18.5%;
}

.wrapper{
  width: 81.5%;
  padding: 10vw 7.5vw;
}

.text{
  font-size: 3.5vw;
  line-height: 5.5vw;
  letter-spacing: 0.12rem;
}

.title{
  font-size: 7vw;
  position: absolute;
  top: 65vw;
}

.title > h2{
  padding-bottom: 2.5vw;
}

.lead{
  font-size: 2.3vw;
  line-height: 4.5vw;
}

.line{
  width: 81.5%;
  margin: 0 auto;
  padding-left: 7.5vw;
  padding-right: 7.5vw;
  position: relative;
  z-index: 100;
}

.responsive-image{
  width: 100%;
  height: auto;
}

.ss{
  margin-bottom: 3vw;
}

.inline-block{
  display: inline-block;
}

/*--------------
  sp LOADING
---------------- */
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000e3d;
  z-index: 250;
}

#loader {
  display: none;
  position: fixed;
  top: 45vh;
  left: 50vw;
  width: 20vw;
  height: 20vw;
  margin-top: -10vw;
  margin-left: -10vw;
  text-align: center;
  color: #cececd;
  z-index: 300;
}

  /*---------------
  sp navigation
-----------------*/
.nav-line{
  width: 18.5vw;
  height: 1500px;
  background-color:rgba(0,14,59,0.8);
  position: fixed;
  z-index: 150;
}

.slide{
  position: relative;
}

/* btn humberger */
.btn-trigger{
	-webkit-appearance:none;
	appearance:none;
	position: fixed;
	top: 5vw;
  left: 5vw;
	z-index: 200;/*順序は1番手前に配置*/
	width: 8vw;
	height: 5vw;
	border: none;
  background: none;
}

.btn-trigger span{
	position: absolute;/*btn-triggerに対しての子要素*/
	display: block;/*spanはインライン要素で幅や高さの指定ができないので、ブロック要素に変更する*/
	width: 7vw;/*display:blockでボックス要素にしたから指定できる*/
	height: 0.2vh;
	background-color: #cacacd;
	transition: all 0.5s;/*class="active"を設定した時に、全ての素材を0.5秒で変形させる*/
	z-index: 150;
}

.btn-trigger span:nth-of-type(1){
	top: 0;/*btn-triggerに対して上から0px*/
}

.btn-trigger span:nth-of-type(2){
	top: 2.5vw;/*btn-triggerに対して上から10px*/
}

.btn-trigger span:nth-of-type(3){
	bottom: 0;/*btn-triggerに対して下から0px*/
}

.btn-trigger.active{
	position: fixed;
  top: 7vw;
  left: 4vw;
	z-index: 300;

}

.btn-trigger.active span:first-of-type{/*btn-triggerをactive状態にした時のCSS指定*/
	transform: rotate(45deg);/*45度回転させる*/
}

.btn-trigger.active span:nth-of-type(2){/*btn-triggerをactive状態にした時のCSS指定*/
	opacity: 0;/*そこに存在していけど、非表示にする*/
}

.btn-trigger.active span:last-of-type{/*btn-triggerをactive状態にした時のCSS指定*/
	transform: rotate(-45deg);/*-45度回転させる*/
  position: absolute;
  top: -0.1vw;
  left: -0.3vw;
}


/*----------------
  sp hero-image
------------------*/
/* .hero-image{
  width: 100%;
  height: 100%;
  background-image: url(../image/sp/sp_home/sp_hero_image1.png);
  background-position:center center;
  background-size:cover;
  position: relative;
  z-index: 50;
} */

.hero-image img{
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 50;
}

.main-title{
  position: absolute;
  top: 23vh;
  left: 23vw;
  z-index: 150;
}

.logo-navy{
  position: relative;
  display: block;
  text-align: center;
  width: 11vw;
  padding-bottom: 5vw;
  margin: 0 auto;
}

.subtitle{
  color: #eaeaef;
  max-width: 650px;
  font-size: 3.5vw;
  padding-bottom: 8vw;
  letter-spacing: 0.2vw;
}

.main-title-lead{
  color: #eaeaef;
  max-width: 650px;
  font-size: 3vw;
  line-height: 4.2vw;
}

/*-----------
  FOOTER
------------*/
.copy{
  padding-top: 10vw;
  padding-bottom: 1vw;
  background-color: #cacacd;
  position: relative;
  z-index: 100;
}

.footer-nav-copyicon{
  width: 1.5vw;
}

/*-----------------------
  sp groval navigation
------------------------*/
.header-nav {
  position: fixed;
  z-index: 200;
  top: 0;
  left: 0;
  background: #fff;
  color: #000;
  text-align: center;
  transform: translateX(-100%);/* navが枠の外に待機してる状態になる */
  transition: all 0.6s;/* btnを押したときにallがアニメーションする時間 */
  width: 100%;
}

.header-nav.active {
  transform: translateX(0%);/* navが-100%の場所からx軸０の場所までスライドする設定にする */
}

.sp_navigation_container{
  display: grid;
  grid-template-columns: 33.3vw 33.3vw 33.3vw;
  grid-template-rows: 20vh 20vh 20vh 20vh 20vh;
  position: fixed;
  top: 0;
	left: 0;
	z-index: 200;
  width: 100vw;
	height: auto;
  min-height: 100vh;
  background-color: #fff;
}

.sp_navigation_container p{
  font-size: 6.5vw;
  text-transform: uppercase;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
}

.sp_navigation_container a{
  display: table-cell;
  vertical-align: middle;
}

.sp_nav_contact{
  background: url(../image/nav_footer/sp_nav_contact.png);
  grid-row: 1 / 2;
  grid-column: 1 / 3;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_home {
  background: url(../image/nav_footer/sp_nav_home.png);
  grid-row: 1 / 2;
  grid-column: 3 / 4;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_trainer{
  background: url(../image/nav_footer/sp_nav_trainer.png);
  grid-row: 2 / 4;
  grid-column: 1 / 2;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_result{
  background: url(../image/nav_footer/sp_nav_results.png);
  grid-row: 2 / 3;
  grid-column: 2 / 4;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_horses{
  background: url(../image/nav_footer/sp_nav_horses2.png);
  grid-row: 3 / 4;
  grid-column: 2/ 3;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_staff{
  background: url(../image/nav_footer/sp_nav_staff.png);
  grid-row: 3 / 5;
  grid-column: 3 / 4;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_forowners{
  background: url(../image/nav_footer/sp_nav_forowners.png);
  grid-row: 4 / 5;
  grid-column: 1/ 3;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_gallery{
  background: url(../image/nav_footer/sp_nav_gallery2.png);
  grid-row: 5 / 6;
  grid-column: 1/ 2;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.sp_nav_facebook{
  background: url(../image/nav_footer/sp_nav_facebook.png);
  grid-row: 5 / 6;
  grid-column: 2/ 4;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


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

.home-background::before{
  content: "";
  background: url(../image/sp/sp_home/sp_home_background.png);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section-title{
  font-size: 7vw;
  letter-spacing: 0.3rem;
  padding-bottom: 10vw;
}

.section-title:before{
  content: "";
  display: inline-block;
  width: 9vw;
  height: 2.5vh;
  background: url(../image/sp/sp_home/sp_title_left.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.section-title:after{
  content: "";
  display: inline-block;
  width: 9vw;
  height: 2.5vh;
  background: url(../image/sp/sp_home/sp_title_right.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.home-image1{
  padding-bottom: 10vw;
}

.stable-text,.feeding-text{
  padding-left: 0;
  padding-bottom: 10vw;
}

.stable .sp-flex img{
  width: 45%;
  height: 27vw;
}

.training .responsive-image{
  padding-bottom: 10vw;
}

.training-text{
  padding-right: 0;
}

.feeding .sp-flex img{
  width: 45%;
  height: 27vw;
}

/*---------------
   sp TRAINER
----------------*/
.trainer-main-image{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 50;
}

/* .trainer-main-image{
  width: 100%;
  height: 100%;
  background-image: url(../image/pc/trainer/trainer_mainimage.png);
  background-position:center center;
  background-size:cover;
  position: relative;
  z-index: 50;
} */

.trainer-background::before{
  content: "";
  background: url(../image/sp/sp_trainer/sp_trainer_background.png);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.profile-image{
  padding-right: 0;
  padding-bottom: 10vw;
}

.profile-title{
  font-size: 4.5vw;
  margin-bottom: 10vw;
  text-align: center;
}

.trainer{
  font-size: 4.5vw;
  letter-spacing: 1.5vw;
  text-align: center;
  margin-bottom: 10vw
}

.table-list{
  font-size: 2.5vw;
  line-height: 4.3vw;
  letter-spacing: 0.15vw;
}

.trainer-image1,.trainer-image2{
  margin-bottom: 4vw;
}

/*-------------
sp STAFF
--------------*/
.staff-main-image{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 50;
}

.staff-background::before{
  content: "";
  background: url(../image/sp/sp_staff/sp_staff_background.png);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.staff .title,.lead{
  text-shadow: 2px 2px 5px #707480;
}

.staff-image{
  width: 42vw;
}

.staff-image img{
  width: 45%;
}

.staff-text{
  margin-left: -16vw;
  width: 40vw;
  height: 29.5vw;
  display:table;
}

.staff-comment{
  font-size: 3vw;
  line-height: 5vw;
  letter-spacing: 0.12vw;
  display: table-cell;
  vertical-align: middle;
  }

.staff-comment-en{
  font-size: 4vw;
  line-height: 5vw;
}

.staff-name{
  font-size: 5vw;
  margin-left: -16vw;
  margin-bottom: 2.5vw;
}

.staff-name:last-of-type{
  margin-bottom: 3vw;
}

.staff-horse{
  font-size: 1.8vw;
  margin-left: -16vw;
  margin-bottom: 1vw;
  letter-spacing: -0.1vw;
  line-height: 2.6vw;
}

.staff-birthday{
  font-size: 1.8vw;
  margin-left: -16vw;
  margin-bottom: 1vw;
  letter-spacing: 0.06vw;
  line-height: 2.6vw;
}

.staff-birthplace{
  font-size: 1.8vw;
  margin-left: -16vw;
  margin-bottom: 0;
  line-height: 2.6vw;
}

.staff-birthplace span{
  letter-spacing: 0.25vw;
}


/*-------------
sp CONTACT
---------------*/
.contact-main-image{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 50;
}

.contact-background::before{
  content: "";
  background: url(../image/sp/sp_contact/sp_contact_background.png);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.contact-yy{
  font-size: 4vw;
  padding-bottom: 4vw;
}

.address{
  font-size: 2.5vw;
  line-height: 4.5vw;
}

.maps-outer{
  padding-left: 10vw;
  padding-right: 10vw;
}

.maps{
  width: 100%;
  height: auto;
  margin-left: 0;
  margin-right: 0;
}

.maps iframe{
  width: 100%;
}

/*-------------
sp FOROWNERS
--------------*/
.forowners-main-image{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 50;
}

.forowners-background::before{
  content: "";
  background: url(../image/sp/sp_forowners/sp_forowners_background.png);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.forowners-background .bottom80{
  padding-bottom: 15vw;
}

.text-left{
  text-align: left;
}

.forowners-image1,.forowners-image2,.forowners-image3{
  margin-right: 0;
  margin-bottom: 7vw;
}

/*-------------
  sp GALLERY
--------------*/
.gallery-main-image{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 50;
}

.gallery-background::before{
  content: "";
  background: url(../image/sp/sp_gallery/sp_gallery_background.png);
  background-size: cover;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gallery-image1{
  margin-right: 0;
}

.gallery-image2{
  padding-bottom: 0;
}

.gallery-background img{
  margin-bottom: 7.5vw;
}

.bottom20{
  padding-bottom: 0;
}





}