html{
  overflow-x: visible!important;
}
.site-body{
  margin-top: 0!important;
}


/* フォント */
body{
  font-family:  "Noto Sans JP" ,serif!important;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "BNCE" 0,
    "INFM" 0,
    "SPAC" 0;
  width: 100%;
  color: black!important;
}

.gotham-font{
font-family: gotham-condensed, sans-serif;
font-weight: 600;
letter-spacing: 0;
}

.gotham-font-italic{
font-family: gotham-condensed, sans-serif;
font-weight: 600;
font-style: italic;
letter-spacing: 0;
}

/* 表示サイズ設定 */
section {
  padding: 0 20px;
  margin: 0 auto;
}

@media screen and (max-width:768px) {
  section{
    padding: 0 20px;
  }
}

/* 各コンテナの左右スペース設定 */
.site-body-container{
  margin: 0 auto!important;
  padding: 0!important
}
@media screen and (max-width:768px) {
  .site-body-container{
    padding: 0 20px!important;
  }
}

/* フォント設定 */
p{
  line-height: 2!important;
  letter-spacing: 0.2rem;
  margin-bottom: 0!important;
  
}


.page_top_btn{
  color: transparent!important;
}

h1{
  font-size: 4rem!important;
  letter-spacing: 0.2rem;
  font-family: "Noto Sans JP", sans-serif;

}

 h2, h3, h4, h5{
  margin-bottom: 0!important;
  letter-spacing: 0.2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;

}
.lavender{
  color: #d81ff7;
}

.index-container{
  position: relative;
  width: fit-content;
}

.index-eng{
  font-size: 3.75rem;
  color: #808080!important;
  margin-bottom: -2rem!important;
  z-index: 10;
}

.index-title{
  font-size: 2.5rem!important;
  border-top: #ffde59 15px solid!important;
  border-bottom: #ffde59 15px solid!important;
  /* width: 50%; */
  padding: 0.6rem 0!important;
  white-space: nowrap;
}


@media screen and (max-width:768px) {
  .index-title{
    font-size: 1.3rem!important;
  }
  .index-eng{
    font-size: 2rem!important;
    margin-bottom: -1.3rem!important;
  }
}


.is-layout-flex{
  align-items: center!important;
}
/* モバイルのメニューボタンカスタマイズ */
.vk-mobile-nav-menu-btn{
  background-image: url('../img/kkrn_icon_menu_11_2.svg')!important;
  background-size: 100%!important;
}

.vk-mobile-nav-menu-btn.menu-open {
    border-color: #333;
    background-image: var(--vk-mobile-nav-menu-btn-close-bg-src)!important;
}

/* ヘッダー部分装飾 */
.site-header{
  background-color: black!important;
  color: white!important;
}
.site-header-container{
  max-width: 100%!important;
  align-items: center;
  justify-content: space-between;
}
.nav li a, nav li a{
  color: white!important;
}

/* ロゴとインスタのロゴを横並び */
.logo-container{
  display: flex;
}

/* タブレット以下でロゴセンター */
@media screen and (max-width:991.98px) {
  .logo-container{
    justify-content: center;
  }
}

/* ロゴサイズ調整 */
.site-header-logo{
  margin-right: 1rem!important;
  width: fit-content!important;
  min-width: 80px;
}
/* インスタサイズ調整 */
.sns-container{ 
  /* width: 100%; */
  display: flex;
  align-items: center;
}

/* スクロールしてもヘッダー全部表示 */
.header_scrolled .header-top,
.header_scrolled .site-header-logo,
.header_scrolled .site-header-sub,
.header_scrolled .vk-campaign-text{
  display:flex!important;
}

.sns-container img{
  min-width: 25px;
  margin-right: 2px;
}

.sns-container a:hover{
  transform: translateY(3px);
  transition: ease-in-out 0.5s;
}
@media screen and (max-width:768px) {
  .sns-container{
    text-align: center;
    justify-content: center;
  }
}
/* ナビゲーション */
/* ナビゲーションフォントサイズ */
.global-nav-list>li .global-nav-name{
  font-size: 0.625rem!important;

}
.global-nav-list a{
  padding: 6px 10px!important;
}
.my-header-top-message{
  font-size: 0.8rem;
  padding-left: 6px;
  margin-bottom: 5px;
}
@media screen and (max-width:1200px) {
   .global-nav-list>li{
    padding: 0!important;
   }
  .global-nav-list>li .global-nav-name{
    font-size: 10px!important;
  }
}
/* mobileナビ　背景色 */
.vk-mobile-nav{
  background-color: black!important;
}

/* ヘッダー右側装飾 */
.site-header-sub{
  padding-left: 0px!important;
}
.right-block,.right-block div{
  gap: 5px!important;
}
.right-block-child{
  width: 100%;
}

.header-tel, .header-access{
  width: 100%;
}

.header-tel a:hover{
  border-bottom: #ff8b09 solid 1px;
  transition: ease-in-out 0.2s;
}

.header-tel i,.header-tel p{
 color: white!important;
}

.header-tel p{
  font-size: 1.25rem;
}
@media screen and (max-width:1200px) {
  .header-tel p{
    font-size: 0.8rem;
  }
}

.header-access td{
  color: white!important;
  letter-spacing: 0;
  padding: 2px!important;
}

/* ヘッダーボタン装飾 */

.border-container{
  padding:2px;
  background: linear-gradient(to right,  white, #8c52ff);
  border-radius: 17px;
  position: relative;
  transition: all 1s ease-out;
  width: 100%;
}

.border-container::before{
  background: linear-gradient(to right,#ffd499, #ff8b09);
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: all 1s ease-out;
  width: 100%;
  border-radius: 17px;
}

 .border-container:hover::before{
  /* background: linear-gradient(to right, purple, #ff8b09); */
  opacity: 0;
/* opacity: 0.5; */
 }

.button-header{
  border-radius: 15px;
  padding:2px;
  border: white 1px solid;
  position: relative;
}

 .button-header p{
  font-size: 0.56rem;
  color: black;
  letter-spacing: 0;
 }

 .button-text-big{
  font-size: 0.8rem!important;
 }


/* 体験ボタンカスタム */
.taiken_background{
  position: relative;
}

.taiken-container{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.taiken-container-mobile{
  width: fit-content;
}

.taiken-text-1{
  gap: 0!important;
  
}

.taiken-text-1 p{
  white-space: nowrap;
  text-align: center;
}

.demo-text{
  font-size: 1.13rem;
}

.rotation-1{
  display: block;
  transform: rotate(13.6deg);
  width: fit-content;
  height: 100%;
}

.taiken-container img{
  width: 65%!important;
}

.taiken-button:hover{
  transform: translateY(10px);
  transition: ease-in-out 0.5s;
  box-shadow: none!important;
}

@media screen and (max-width:768px) {
  .taiken-text-1 >p  {
    font-size: 0.8rem!important;
  }
  .demo-text{
    font-size: 0.5rem!important;
  }
  .button-text-1{
    font-size: 2rem!important;
  }
  .button-text-2{
    font-size: 0.8rem!important;
  }

}

/* テキストに影入れる */
.yellow{
  text-shadow: 0 0 0.05rem  #FBF900;

}

/* boxに影 */
.pink-box-shadow{
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #FE347E, 0 0 0px #FE347E, 0 0 10px #FE347E,0 0 10px #FE347E, inset 0 0 10px #FE347E;
  /* color: white; */
  
}
.green-box-shadow{
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #7EFE34, 0 0 0px #7EFE34, 0 0 10px #7EFE34,0 0 10px #7EFE34, inset 0 0 10px #7EFE34;
  /* color: white; */
}
.blue-box-shadow{
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #347EFE, 0 0 0px #347EFE, 0 0 10px #347EFE,0 0 10px #347EFE, inset 0 0 10px #347EFE;
  /* color: white; */
}
.yellow-box-shadow{
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #FBF900, 0 0 0px #FBF900, 0 0 10px #FBF900,0 0 10px #FBF900, inset 0 0 10px #FBF900;
  /* color: white; */
}
.pink-box-shadow:hover {
  box-shadow: 0 0 15px #fff, inset 0 0 15px #fff, 0 0 0px #fff, 0 0 0px #FE347E, 0 0 0px #FE347E, 0 0 15px #FE347E,0 0 15px #FE347E, inset 0 0 15px #FE347E;
  transform: scale(1.05);
  transition: 1s;
}

.green-box-shadow:hover {
  box-shadow: 0 0 15px #fff, inset 0 0 15px #fff, 0 0 0px #fff, 0 0 0px #7EFE34, 0 0 0px #7EFE34, 0 0 15px #7EFE34,0 0 15px #7EFE34, inset 0 0 15px #7EFE34;
  transform: scale(1.05);
  transition: 1s;
}

.blue-box-shadow:hover {
  box-shadow: 0 0 15px #fff, inset 0 0 15px #fff, 0 0 0px #fff, 0 0 0px #347EFE, 0 0 0px #347EFE, 0 0 15px #347EFE,0 0 15px #347EFE, inset 0 0 15px #347EFE;
  transform: scale(1.05);
  transition: 1s;
}
.yellow-box-shadow:hover {
  box-shadow: 0 0 15px #fff, inset 0 0 15px #fff, 0 0 0px #fff, 0 0 0px #FBF900, 0 0 0px #FBF900, 0 0 15px #FBF900,0 0 15px #FBF900, inset 0 0 15px #FBF900;
  transform: scale(1.05);
  transition: 1s;
}
/* 表の表示設定 */
li, td{
  color: var(--vk-color-text-body);
  /* font-size: var(--vk-size-text-sm) !important; */
  /* list-style-type: none; */
  line-height: 2;
  letter-spacing: 0.2rem;
}
td{
  border: none!important;
}


/* 矢印 */
.arrow-pointer {
  display:inline-block;
  width: 180px;
  text-align:center;
  margin:5px;
  cursor:pointer;
  position: relative;
  text-decoration: none;
}
.arrow-pointer a{
  text-decoration: none;
  color: black;
}

.arrow-pointer::before {
  content: "";
  display: block;
  position: absolute;
  top: calc(50% - 5px);
  right: 15px;
  width: 20px;
  height: 5px;
  border: none;
  border-right: 2px solid black;
  border-bottom: 1px solid black;
  transform: skew(45deg);
  transition: .3s;
}
.arrow-pointer:hover::before{
 right: 10px;
 width: 30px;
}


/* 共通 */
.padding-adjust{
    padding: 0 15px!important;
  }
/* レシポンブ対応で順番を入れ替える  */
@media screen and (max-width: 767px) {
  .container-1{
    order: 1;
  }

  .container-2{
    order: 2;
  }
  .container-3{
    order: 3;
  }

  /* ぱっでぃんぐで幅調整 */
  .padding-adjust{
    padding: 0 15px!important;
  }
  /* マージンで幅調整 */
  .margin-adjust{
    margin: 0 20px!important;
  }
}

/* pc,mobileでの画像表示切替 */
.mobile-img{
  display: none!important;
}

@media screen and (max-width: 767px) {
  .pc-img{
    display: none!important;
  }

  .mobile-img{
    display: block!important;
  }
}

/* フッター装飾 */
/* フッター黒 */
.site-footer{
  background-color: black;
  color: white;
}
.site-footer li a{
  color: white!important;
}

/* footerコピーライト削除 */
.site-footer-copyright p:nth-child(2) {
	display: none;
}

/* footerろご */
.sns-logo{
  width: 3rem;
}

.sns-logo a:hover{
  transform: translateY(3px);
  transition: ease-in-out 0.5s;
}


.section-container div{
  max-width: none!important;
}

.grecaptcha-badge {
  bottom: 85px !important;
}


/* フッター */
.footer-menu div{
  text-align: center;
}

.site-footer img{
  width: 200px;
}

/* フッターの下線削除 */
.site-footer ul li a{
  border: none!important;
}

.site-footer-content{
  max-width: none!important;
}

@media screen and (max-width:992px) {
  /* menuセンター寄せ */
  .site-footer-content .row {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
.site-footer {
  border: white!important;
}

/* 今すぐ体験ボタン装飾 */
/* sns.php */
.taiken{
  background-color: #FE347E;
  /* box-shadow: 0 2px 4px #7EFE34; */
  color: white;
}
.kengaku{
  background-color: #FBF900;
  box-shadow: 0 2px 4px #7EFE34;
  color: black;
}

.plan{
  background-color: black;
  box-shadow: 0 2px 4px #7EFE34;
  color: white;
}

.sns_container {
  display: flex;
  text-align: center;
  align-items: center;
  position: fixed;
  bottom: 2%;
  left: 5%;
  z-index: 800;
}

.sns_container button{
  font-size: 1.25rem;
  font-family:"Oswald", "Noto Sans JP", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", メイリオ, Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif!important;
  border-style: none;
  font-weight: bold;
  padding: 8px 20px;
  border-radius: 5px;
  margin-right: 10px;
}

.sns_container button:hover {
  opacity: .8;
  transform: translateY(5px);
  transition: all 0.5s;
}
@media screen and (max-width:768px) {
  .sns_container{
    left: 50%;
    transform: translateX(-50%);

  }
  .sns_container button{
    font-size: 0.9rem;
    white-space: nowrap;
  }
}


/* 各種ボタン */
.btn_box_blue, .btn_box_pink, .btn_box_green
, .btn_box_yellow {
  margin: 0 auto;
  width: 300px;
  /* padding: 0.8rem 0; */

}

.btn-pink{
  color: #333;
  line-height: 56px;
  font-weight: bold!important;
  text-align: center;
  border: 3px solid #333;  
  text-decoration: none;
  letter-spacing: 0.3rem;
  display: block;
  border-radius: 5px;
  padding: 0.8rem 0;
  box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #FE347E, 0 0 0px #FE347E, 0 0 5px #FE347E,0 0 5px #FE347E, inset 0 0 5px #FE347E;
  /* text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #FE347E, 0 0 0px #FE347E, 0 0 5px #FE347E,0 0 5px #FE347E, 0 0 5px #FE347E; */
}

.btn_box_pink:hover {
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #FE347E, 0 0 0px #FE347E, 0 0 10px #FE347E,0 0 10px #FE347E, inset 0 0 10px #FE347E;
  transition: 1s;
}


.btn-green{
  color: #333;
  line-height: 56px;
  font-weight: bold!important;
  text-align: center;
  border: 3px solid #333;  
  text-decoration: none;
  letter-spacing: 0.3rem;
  display: block;
  border-radius: 5px;
  padding: 0.8rem 0;
  box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #7EFE34, 0 0 0px #7EFE34, 0 0 5px #7EFE34,0 0 5px #7EFE34, inset 0 0 5px #7EFE34;
  /* text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #7EFE34, 0 0 0px #7EFE34, 0 0 5px #7EFE34,0 0 5px #7EFE34, 0 0 5px #7EFE34; */
}

.btn_box_green:hover {
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #7EFE34, 0 0 0px #7EFE34, 0 0 10px #7EFE34,0 0 10px #7EFE34, inset 0 0 10px #7EFE34;
  transition: 1s;
}

.btn-blue{
  color: #333;
  line-height: 56px;
  font-weight: bold!important;
  text-align: center;
  border: 3px solid #333;  
  text-decoration: none;
  letter-spacing: 0.3rem;
  display: block;
  border-radius: 5px;
  padding: 0.8rem 0;
  box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #347EFE, 0 0 0px #347EFE, 0 0 5px #347EFE,0 0 5px #347EFE, inset 0 0 5px #347EFE;
  /* text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #347EFE, 0 0 0px #347EFE, 0 0 5px #347EFE,0 0 5px #347EFE, 0 0 5px #347EFE; */
}

.btn_box_blue:hover {
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #347EFE, 0 0 0px #347EFE, 0 0 10px #347EFE,0 0 10px #347EFE, inset 0 0 10px #347EFE;
  transition: 1s;
}

.btn-yellow{
  color: #333;
  line-height: 56px;
  font-weight: bold!important;
  text-align: center;
  border: 3px solid #333;  
  text-decoration: none;
  letter-spacing: 0.3rem;
  display: block;
  border-radius: 5px;
  padding: 0.8rem 0;
  box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #FBF900, 0 0 0px #FBF900, 0 0 5px #FBF900,0 0 5px #FBF900, inset 0 0 5px #FBF900;
  /* text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 0px #fff, 0 0 0px #FBF900, 0 0 0px #FBF900, 0 0 5px #FBF900,0 0 5px #FBF900, 0 0 5px #FBF900; */
}

.btn_box_yellow:hover {
  box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 0px #fff, 0 0 0px #FBF900, 0 0 0px #FBF900, 0 0 10px #FBF900,0 0 10px #FBF900, inset 0 0 10px #FBF900;
  transition: 1s;
}

/* price button */
.price-button {
  box-shadow:0 2px 4px black;
  border-radius: 5px;
}
.price-button a:hover{
  transition: 0.5s!important;
  background-color: blueviolet!important;
  color: white!important;
}


/* boxsize調整 */
.box-width {
  width: fit-content;
  margin: 0 auto;
  padding: 2rem!important;
}
@media screen and (max-width:768px) {
  .box-width {
  width: 100%;
  padding: 12px!important;
  }
}

/* 動きのアニメーションcss */

/* 全体共通の設定 */
.blink2{
  opacity: 0;
  animation: blink2-animation 0.4s calc(var(--index) * 0.1s) both  ;
}
@keyframes blink2-animation {

  50%{
    opacity: 1;
    /* color: black; */
  }
  100%{
  opacity: 1;
  }
}

.blink{
  animation: blink-animation 2.4s calc(var(--index) * 0.1s) both infinite ;
}

@keyframes blink-animation {

  50% {
    color: black;
  }
}

.blink-white{
  animation: blink-animation2 2.4s calc(var(--index) * 0.1s) both infinite ;
}

@keyframes blink-animation2 {

  50% {
    color: #fafafa;
  }
}

.blink-continue{
  animation: blink-continue-anime 2s both infinite ;
}

@keyframes blink-continue-anime{
  0%,100%{
    opacity: 1;
  }
  50%{
    opacity: 0;
  }
}

/* フェードイン */
.fadeIn{
  opacity: 0;
}
.fadeIn.is-show {
/* opacity: 0; */
-webkit-animation: fade-in-bck 2.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
animation: fade-in-bck 2.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bck {
  0% {
    -webkit-transform: translateZ(80px);
            transform: translateZ(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}
@keyframes fade-in-bck {
  0% {
    -webkit-transform: translateZ(80px);
            transform: translateZ(80px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0);
            transform: translateZ(0);
    opacity: 1;
  }
}

/* 下からフェードイン */
.fadeIn_up {
  opacity: 0;
  
}
.fadeIn_up.is-show {
  -webkit-animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	        animation: slide-in-bottom 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@-webkit-keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(30%);
            transform: translateY(30%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}