@charset "utf-8";
/*---------------------------------
リセットｃｓｓ
---------------------------------*/
*{
  padding: 0;
  margin: 0;
  }
.js-fadeinup-trigger,
.js-fadein-trigger {
  opacity: 0;
}   

html{
 font-size: 100%;
   overflow-x : hidden;
  -webkit-overflow-scrolling: touch;

}

body{
 color: #24292e;
 font-family: "YakuHanJP",Meiryo,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ ゴシック","Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
 line-height: 2;

}
/* 横揺れ防止 */
html, body {
  overflow-x: hidden;
  width: 100%;
}


a{
 text-decoration: none;
  word-break: break-all;

}

img{
 max-width: 100%;
  height: auto;

}

li{
 list-style: none;
 font-size: 1.2rem;
}
p {
  font-size: 1.2rem;
  text-align: justify;

}
.wrapper{
max-width: 1000px;
margin: 0 auto 130px auto;
font-size: 0.9rem;
padding: 0 4%;
}

.button {
  position: relative;
  display: inline-block;
  padding: 0.8em 2em;
  text-decoration: none;
  color: black;
  background: pink;/*色*/
  border: solid 1px pink;/*線色*/
  border-radius: 25px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 1px 0 rgba(0,0,0,0.2);
  font-size: 16px;
}

.button:active {
  /*押したとき*/
  border: solid 1px #03A9F4;
  box-shadow: none;
  text-shadow: none;
  
}
.button:hover{
  opacity: 0.8;
}



/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
 
  
#hero p{
  text-align: center;
  font-size: 40px;
  padding-top: 100px;
}
  
#hero h3 {
  text-align: center;
}
.top_img {
  margin-top: 50px;
}
.k_photo {
  border-radius: 25px;
  margin-top: 10px;
}

.k_photos {
  margin-top: 20px;
  width: 400px;
  height: auto;

}
.k-p {
  margin-top: 25px;
}
#reservation{
max-width: 1000px;
margin: 0 auto 130px auto;
font-size: 0.9rem;
padding: 0 4%;
padding-top: 30px;
}
#reservation .title_3 {
  margin-top: 30px;
  font-size: 1.8em;
}
#reservation .flex {
  display: flex;
  justify-content: space-between;
}
#reservation h2 {
  color: #d13244;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

#reservation h3 {
  font-size: 1.2rem;
  padding-top: 20px;
}
#reservation .box {
  padding: 10px;
  width: 50%;
  margin-bottom: 50px;
}
 
#reservation .flex_photo{
  display: flex;
  justify-content: space-around;
  margin: 80px 0;
}  

#reservation .flex_photo .box {
  width: 30%;
}  
.reserve_photo {
  width: 400px;
  height: auto;
}
.reserve_p {
  font-size: 1rem;
}

.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

.btn-wrap-pc-sp {
  max-width: 435px;
  margin: 0 auto 20px;
}

a.btn-pc-sp {
  line-height: 1.4;

  width: 49.5%;
  padding: 1.25rem 0;

  color: #ffff;
}

a.btn--contact {
  display: block;

  padding: 1.5rem 0;

  color: #fff;
  background: #d20010;
  -webkit-box-shadow: 0 5px 0 #b9000e;
  box-shadow: 0 5px 0 #b9000e;
}

a.btn--contact i {
  font-size: 2rem;
}

a.btn--contact i.fa-position-left {
  font-size: 3rem;

  left: 2rem;
}

a.btn--contact :hover {
  color: #fff;
}

a.btn--tel {
  width: 420px;
  height: 100px;
  display: block;
  padding: 1rem 0;
  color: #fff;
  background: #094;
  -webkit-box-shadow: 0 5px 0 #008039;
  box-shadow: 0 5px 0 #008039;
}

a.btn--tel2 {
  width: 400px;
  height: 100px;
  display: block;
  padding: 1rem 0;
  color: #fff;
  background: rgb(214, 20, 153);
  -webkit-box-shadow: 0 5px 0 rgb(214, 20, 153);
  box-shadow: 0 5px 0 rgb(214, 20, 153);
  margin-left: 20px;
}
a.btn--tel i {
  font-size: 2rem;
}

a.btn--tel i.fa-position-left {
  font-size: 2rem;
  left: 0.5rem;
}

a.btn--tel .number {
  line-height: 1;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 2rem;
  letter-spacing: 0;
  color: #094;
  border-radius: 0.5rem;
  background: #fff;
}

a.btn--tel2 .number {
  line-height: 1;
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.25rem 2rem;
  letter-spacing: 0;
  color:rgb(214, 20, 153);
  border-radius: 0.5rem;
  background: #fff;
}
a.btn--tel:hover {
  color: #fff;
}

.fa-position-left {
  position: absolute;
  top: calc(50% - 0.5em);
  left: 1rem;
}

.fa-position-right {
  position: absolute;
  top: calc(50% - 0.5em);
  right: 1rem;
}




@media screen and (max-width:600px) {
  
.wrapper{
max-width: 100%;
}
#hero p{
  text-align: center;
  font-size: 30px;
  padding-top: 60px;
}
.k_photo {
  padding: 30px;

}
#reservation .flex {
  flex-direction: column;
}

#reservation .box {
  padding: 10px;
  width: 100%;
  margin-bottom: 50px;
}
#reservation .flex_photo{
  flex-direction: column;
}  
#reservation .flex_photo .box{
  width: 100%;
}  

#reservation .title_3 {
  text-align: center;
  margin-top: 50px;
}
#reservation .title_3 span{
  display: inline-block;
}

#reservation .box .reserve_p {
  font-size: 0.9rem;
}
.pc { display: none !important; }
.sp { display: block !important; }

#hero img{
   margin-top: 58px;

 }


 .btn,
 a.btn,
 button.btn {
   font-size: 1rem;

 }

#reservation .flex {
  flex-direction: column;
}

#reservation h2 {
  font-size: 1.5rem;
}

#reservation h3 {
  padding: 20px 0;
}
a.btn--tel {
  width: 100%;
}

a.btn--tel2 {
  width: 100%;
  margin-left: 0;
}

}


#ki h2 {
  margin-top: 80px;
}
#ki .flex {
    display: flex;
}
#ki .box {
  margin: 10px;
}
#ki h3 {
    padding: 10px 0;
}

#ki strong {
  background: linear-gradient(transparent 50%, #fffea8 50%);
}
@media screen and (max-width:600px) {
#ki .flex {
        flex-direction: column;
    }
#ki.box:nth-child(1){
        order: 2;
    }
#ki.box:nth-child(2){
        order: 1;
    }
#ki h2 {
        text-align: center;
        margin-top: 100px;
        font-size: 25px;
    }
}
/*---------------------------------
アクセス
---------------------------------*/

aside h2 {
    text-align: center;
    padding: 30px;
    font-size: 25px;
    margin-top: 80px;
    color: #333;
  }
  
aside h3 span {
    display: inline-block;
  }
aside address {
  font-style: normal;
  }
#access .flex {
    margin-top: 20px;
    text-align: center;
  
  }
#map .flex {
    display: flex;
    justify-content: center;
  }
  
#map ul {
    padding: 10px;
  }
  
#map .one {
    font-size: 15px;
    text-align: right;
  }
.photo .box img {
    padding: 10px;
}
@media screen and (max-width:600px) {
  aside h2 {
    font-size: 23px;
  }
  aside p {
    margin: 0 15px;
  }

}
/*---------------------------------
体験
---------------------------------*/

#contents{
    max-width: 960px;
    margin: 0 auto 130px auto;
    font-size: 0.9rem;
    padding: 0 4%;
    }
#contents h2 {
    text-align: center;
    padding: 20px;
    margin-top: 50px;
    font-size: 25px;
    margin-bottom: 50px;

}
#contents .flex {
    display: flex;
}
#contents .box {
  margin: 10px;
}
#contents h3 {
  text-align: center;
  font-size: 20px;

}
#contents .title3 {
    padding-top: 20px;
    margin-top: 40px;
  }

h4{
  padding: 10px;
  font-size: 17px;
}
#contents strong {
  background: linear-gradient(transparent 50%, #fffea8 50%);
}
#contents .title-h3 {
  padding: 1px;
  margin-top: 1px;

}
#contents h5 {
    text-align: right;
    margin-top: 30px;
}

@media screen and (max-width:600px) {
#hero img {
  margin-top: 66px;
}


#map .flex {
  flex-direction: column;
  
}
#map iframe {
  width: 100%;
  height: auto;
} 
#map .box p {
text-align: left;
}
#map ul li span {
display: inline-block;
}
aside {
  text-align: center;
}

#contents{
      padding: 0;
      }
#contents .flex {
        flex-direction: column;
    }
#contents h2 {
      padding: 0;
      margin-top: 80px;
      margin-bottom: 30px;
      font-size: 25px;
}
#contents h2 span {
  display: inline-block;
}
#contents h3 span {
  display: inline-block;
}
#contents h4 {
  margin: 10px;
}
 
#contents .flex .box .photo_t {
  text-align: center;
}

#contents .box_g {
  padding: 0 10px;
}        
aside h2 span {
    display: inline-block;
  }
aside address ul li {
    text-align: left;
  }
.photo .box img {
    width: 100%;
    height: auto;
}
h4 {
  padding: 0;
}
  }
/*---------------------------------
気のトレーニングとは
---------------------------------*/
#main-contents .flex {
  display: flex;
}
#main-contents h3 .flex_a {
  display: flex;
  align-items: center;
}

#main-contents .flex img {
  width: 450px;
}
#main-contents h2 {
  font-size: 25px;
  margin: 80px 0;
  text-align: center;
}
#main-contents h2 strong {
  font-size: 35px;
}

#main-contents h3 strong {
  font-size: 35px;
  margin-right: 10px;
}
#main-contents h3 {
  margin: 20px 0;
  padding-left: 10px;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  background: #fde6e6;

}
#main-contents p strong {
  background: linear-gradient(transparent 50%, #fffea8 50%);
  font-weight: bold;
  font-size: 18px;
}
#main-contents .box .illust {
  width: 200px;
}
.title_k {
  padding: 1rem 2rem;
  border: 6px double #faabab;
  background-color: #f8ddde;
}
.title_k p {
  font-size: 17px;
}
.title_k p strong{
  font-size: 22px;

}
.photo_h {
  padding-right: 10px;
}
.photo_k {
  padding-left: 15px;
}
.photo_t {
  padding-left: 35px;
}
.box_u {
  width: 700px;
}
#sub-content h2 {
  font-size: 25px;
  margin-top: 80px;
  text-align: center;
}
#sub-content .flex {
  display: flex;
}
#sub-content .box {
  width: 50%;
}
#sub-content .photo_z {
  width: 400px;
}
#sub-content .title_i {
  margin: 20px 0;
  padding-left: 10px;
  font-size: 1.2rem;
  color: rgb(42, 42, 248);
}
#sub-content .title_j{
  margin: 20px 0;
  padding-left: 10px;
  font-size: 1.2rem;
  color: rgb(42, 42, 248);
}
#sub-content ul li{
  margin: 7px 0;
  text-decoration: underline;
  font-size: 18px;
}
#sub-content .box .maru_a {
  height:30px;
  width:60px;
  border-radius:50%;
  line-height:30px;
  text-align:center;
  background:pink;
  font-size:20px;
  margin-left:20px;
  display: inline-block;
}

#sub-content .box .maru {
  height:30px;
  width:30px;
  border-radius:50%;
  line-height:30px;
  text-align:center;
  background:pink;
  font-size:20px;
  margin-left:20px;
  display: inline-block;
}
#sub-content ul li strong {
  background: linear-gradient(transparent 50%, #fffea8 50%);
  font-weight: bold;
  font-size: 18px;
}

.character_a {
  margin-left: 40px;
  font-size: 14px;
}
 
.character_b {
  margin-left: 50px;
}

@media screen and (max-width:600px) {
  
#main-contents .flex p {
  width: 100%;
  margin: 0;
}
#main-contents h3 {
  padding: 20px 8px;
  font-size: 18px;

}
#main-contents .flex {
  flex-direction: column;
}
#main-contents h2 span {
  display: inline-block;
}
#main-contents h3 .box_a {
  width: 35px;
}

#main-contents h4 {
  text-align: left;

}
#main-contents .illust_c {
  display: none;

}
#main-contents .box:nth-child(1) {
  order: 2;
}
#main-contents .box:nth-child(2) {
  order: 1;
}


#main-contents .flex .photo_z {
  max-width: 100%;
}
.box_u {
  width: 100%;
}
.photo_h {
  margin-bottom: 10px;
  padding: 0;
}
.photo_k {
  margin-bottom: 10px;
  padding: 0;
}

.photo_t {
  padding-left: 0px;
  padding: 10px;
}
#main-contents .box_u:nth-child(1) {
  order: 2;
}
#main-contents .box_u:nth-child(2) {
  order: 1;
}
#sub-content .flex {
  flex-direction: column;
}

#sub-content .box {
  width: 100%;
}
#sub-content .photo_z {
  margin-top: 20px;
}
#sub-content .title_j{
  margin: 0;
  padding-top: 50px;
}
#sub-content h2 {
  font-size: 23px;
  text-align: center;
}
#sub-content h2 span{
  display: inline-block;
}
#sub-content .box .maru_a {
  margin-left:0px;
}

#sub-content .box .maru {
  margin-left:0px;
}
#sub-content ul li{
  font-size: 16px;
}

.character_a {
  margin-left: 20px;
  font-size: 14px;
}
 
.character_b {
  margin-left: 30px;
}

.title_k {
  padding: 15px 12px;
}
.title_k p span {
  display: inline-block;

}
}

@media screen and (max-width:320px) { 
  
.photo_t {
  padding-left: 0;
  padding: 10px;
}
}


/*---------------------------------
3つの気のトレーニング横並び
---------------------------------*/

#menu2{
  background-color: #C2CA2E;
  padding: 30pX;
  margin-top: 50px;
}
#menu2 h2{
  font-size: 1.5rem;
  text-align: center;
  margin-bottom: 20px;
}
#menu2 .flex{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
#menu2 .box{
  width: 350px;
  margin-bottom: 20px;
}
#menu2 .box img{
  width: 100%;
  height: auto;
}
#menu2 .box p{
  text-align: justify;
  margin-bottom: 20px;
}
#menu2 .box a{
  display: inline-block;
  padding: 10px 50px;
  background: #73A82D;
  color: white;
  text-decoration: none;
  border-radius: 30px;
}
#menu2 .box a:hover{
  opacity: 0.8;
}
#menu2 p{
  font-size: 13px;
}
#menu2 h3 {
  font-size: 20px;
  padding: 5px;
  text-align: center;
  margin-top: 0;
}


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

#menu2{
      padding-left: 2px;
      padding-right: 2px;
      
    }
   
#menu2 h2{
      font-size: 1.3rem;

   }
#menu2 h3{
    font-size: 1.4rem;
    margin-top: 10px;
   }
#menu2 .box p{
    font-size: 0.9rem;
  }

  }

#event {
  
  margin-bottom: 50px;
  margin-top: 80px;
  max-width: 1000px;
  margin: 0 auto;
}
#event .flex {
  display: flex;
  
}
#event .box {
  padding-top: 30px;
}
#event h2 {
  margin-top: 80px;
  border-bottom:solid black 1px;
  display:inline-block;
}
#event .title-t {
  margin-bottom: 10px;
}
#event img {
  padding: 10px;
}

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

#event .flex {
  flex-direction: column;  
}
#event h2 span {
  display: inline-block;
}
#event h2 {
  text-align: center;
}
#event img {
  width: 100%;
  height: auto;
  padding: 5px;
}
#event p {
  padding-left: 10px;
  padding-right: 10px;
}
}


#instagram {
  
  margin-bottom: 50px;
  margin-top: 80px;
  max-width: 1000px;
  margin: 0 auto;
}

#instagram .flex{
  display: flex;
  justify-content: space-between;
  

}

#instagram h2 {
  margin-top: 80px;
  border-bottom:solid black 1px;
  display:inline-block;
}




/*---------------------------------
本
---------------------------------*/
#book {
  background-color: #F7EDD0;
  padding-top: 80px;
  padding-bottom: 100px;

}
#book .flex{
  display: flex;
  justify-content: center;
  align-items:flex-start;
  background-color: #F7EDD0;

}
#book .box{
  margin: 10px;
}
#book .box img{
  width: 200px;
  height: auto;
}
#book a{
  text-align: left;
}

#book h3 {
  font-size: 25px;
  padding: 0;
  text-align: left;
}  
 
#book h3 strong{
  background: linear-gradient(transparent 50%, #fffea8 50%);
} 
#book h4 {
  padding: 10px 10px 10px 0;
}
#book .button{
  display: inline-block;
  padding: 10px 50px;
  background: blue;
  color: white;
  text-decoration: none;
  border-radius: 30px;
}
#book .box a:hover{
  opacity: 0.8;
}
#book h2 {
  font-size: 1.6rem;
  text-align: center;
  font-weight: bold;
  

}
#book .box .one {
  margin: 10px;
}
#book h4 span {
  display: inline-block;
}

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

#book .flex{
    margin: 5px;
    flex-direction: column;
  }
#book {
    margin-top: 0;
  }  
  
#book .box img{
  width: 100%;
  height: auto;
  margin: 0 15px;
}
#book h3 {
  text-align: center;
  font-size: 30px;
  margin-bottom: 20px;
}  

#book h3 span{
  display: inline-block;
}  
#book h4 {
  margin-bottom: 20px;
  text-align: center;

}
#book p {
  margin-left: 10px;
  
}
}
  



#business-trip {
  margin-top: 100px; 
  
}
#business-trip h2{
  padding: 20px;
}
#business-trip .box{
padding: 15px;
margin-left: 120px;
}
#business-trip p{
  padding-top: 20px;
}


#business-trip ul li{
  text-align: left;
}
#business-trip .flex{
  display: flex;
  
}
@media screen and (max-width:600px) {
#business-trip .flex{
flex-direction: column;
text-align: center;
  }
#business-trip .box{
    padding: 10px;
    margin-left: 0;
    }
#business-trip ul li{
      margin-left: 10px;
    }
#business-trip h2{
      padding: 20px 0px;
    }
    
}


  
/*---------------------------------
  トップへもどるボタン
  ---------------------------------*/
  
.go-top{
    position: fixed;
    bottom: 100px;
    left: 30px;
    z-index: 9999;
    
  }
.go-top a{
    
    width: 50px;
    height: 50px;
    display: inline-block;
    background: #E94E66;
    border-radius: 50px;
    text-align: center;
    line-height: 50px;
    color: black;
    text-decoration: none;
  
    
  
    
  }
  
.go-top a:hover{
      opacity: 0.8;
    }
@media screen and (max-width:600px) {
      
.go-top{
    position: fixed;
    bottom: 100px;
    left: 0px;
    z-index: 9999;
    
  }
    }


/*---------------------------------
フッター
---------------------------------*/

footer {
  background-color: #F09199;
  padding-top: 50px;
  margin-top: 100px;
}
footer p {
  text-align: center;
}
footer .footer-top  {
  text-align: center;
  height: 200px;
  
}
footer .footer-top .box {
  margin-top: 30px;
}
.tel {

padding: 0.8em 2em 1.5em 2em;
text-decoration: none;
color: black;
background: white;/*色*/
border: solid 1px white;/*線色*/
border-radius: 25px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
font-size: 23px;

}

.footer-top .flex {
  display: flex;
  justify-content: center;
  margin: 30px 0 80px;
}
.footer-top a:hover {
  opacity: 0.5;

}

.footer-two {
  background-color: #333;
}
.footer-two p {
  color: white;
  font-size: 10px;
}
footer .footer-one {
  background-color: #333;
}
footer .footer-one ul li {
  font-size: 13px;

}
footer .footer-one ul li a {
  color: white;
}



/* ナビ */
.footer-one{

  padding-bottom: 0px;
  background-color: pink;
  
 
 }
.footer-one ul {
           display: flex;
           margin: 0 auto;
           padding: 0 3%;
           width: 94%;
           max-width: 1200px;
           list-style-type: none;
      }
.footer-one ul li {
                position: relative;
                width: 20%;
                font-size: 1rem;
                font-weight: bold;
           }
.footer-one ul li:first-child::before {
                position: absolute;
                display: block;
                content: "";
                top: 25%;
                left: 0px;
                width: 1px;
                height: 50%;
                background-color: #976d52;
           }
.footer-one ul li::after {
                position: absolute;
                display: block;
                content: "";
                top: 25%;
                right: 0px;
                width: 1px;
                height: 40%;
                background-color: #976d52;
           }
.footer-one ul li a {
                     display: block;
                     padding: 17px 10px;
                     color: black;
                     text-align: center;
                     
                }
.footer-one ul li a:hover {
                     opacity: 0.5;
                }

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

  footer {
    padding-top: 20px;
  }

.footer-top a img {
  max-width: 100%;
  height: auto;
}
.footer-top {
  margin-bottom: 50px;

}
.footer-top img {
  margin-top: 4px;
  margin-bottom: 10px;
}
.footer-top p {
  padding: 2px;
}
.footer-top p span{
  display: inline-block;
}

.footer-top .flex {
  flex-direction: column;
  padding-bottom: 50px;
  margin: 0;
}
 
.tel {
  
padding: 10px 10px 40px 10px;
font-size: 23px;


}
.footer-one ul {
  flex-direction: column;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin: 0;
}
.footer-one ul li:first-child::before {
  display: none;
}
.footer-one ul li::after {
  display: none;
}
.footer-one ul li {
  font-size: 16px;
  padding:5px;
  width: 100%;
}
.footer-one ul li a {
  display:inline;
  
  
}

}