/*
Theme Name: Lightning Child kuni
Theme URL:
Template: lightning
Description:
Author:kuni KUNI WEB Production
License: GNU General Public License v2 or later
License URI: https://kuni-web.com/
Tags:business
Version: 0.6.0
*/


/* ===== Original　Class and Style
 ===== */


/* ===== Font , text ===== */

/* Noto+Sans+JP:wght@100;200;300　Shippori+Mincho:wght@800 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300&family=Shippori+Mincho:wght@800&display=swap');

/*===== normal font weight change to thin ===== */
p {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight:300;
}

/* ===== title font weight change to bold and change fontfamily ===== */
.add-font-800 {
  font-family: 'Shippori Mincho', serif;
  font-weight:800;
}

/* ===== text-shadow ===== */
/* red */
.add-text-shadow-r{
/*   text-shadow: 3px 3px #99002c73; */
}
/* blue */
.add-text-shadow-b{
/*   text-shadow: 3px 3px #00427687; */
}

/* ===== title large  Responsive ===== */
.ttl-l h2 span{
/*   font-size: min(max(2.6rem, calc(2.6rem + ((1vw - 0.48rem) * 1.9444))), 4rem); */
}

.ttl-l h3 span{
/*   font-size: min(max(2.6rem, calc(2.6rem + ((1vw - 0.48rem) * 1.9444))), 4rem); */
}

/*==== btn decoration ===== */

/* ===== btn shadow ===== */
.btn{
/*   box-shadow: 1px 1px 5px 0px rgba(103, 0, 44, 0.4); */
}

/* ====box-shadow ===== */

.add-box-shadow-s {
/*   -webkit-box-shadow: 0px 0px 15px rgb(0 0 0 / 20%); */
/*   box-shadow: 0px 0px 15px rgb(0 0 0 / 20%); */
}
.add-box-shadow {
/*   -webkit-box-shadow: 9px 12px 29px -10px rgb(0 0 0); */
/*   box-shadow: 9px 12px 29px -10px rgb(0 0 0); */
}


/* add original border-radius class  */
.add-border-radius-s {
/*   border-radius:5px; */
}
.add-border-radius-m {
/*   border-radius: 15px; */
}
.add-border {
/*  border: 1px solid #00427638; */
}
/* add original padding class  */
.add-padding-s {
/*   padding:1%; */
}
.add-padding-m {
/*   padding:3%; */
}
.add-padding-l {
/*   padding:5%; */
}

/* ======change header-style ===== */
.site-header {
background-color: #F5F5F5;
/* 	display: none; */
}
.header_scrolled .site-header {
	display: none;
}
.global-nav-list>li:last-child {
background: #FFA726;
}
/* nav.vk-mobile-nav-menu-outer {
    display: flex;
    justify-content: center;
    align-items: center;
} */
div#vk-mobile-nav {
    display: flex;
    justify-content: center;
    align-items: center;
	flex-direction: column;
}
@media (min-width: 992px) {

body.device-pc .vk-mobile-nav-menu-btn,
body.device-pc .vk-mobile-nav {
    display: block;
}

.vk-mobile-nav-menu-btn {
    top: 50px;
}

.vk-mobile-nav-menu-btn.position-right {
    right: 50px;
}

.admin-bar .vk-mobile-nav-menu-btn {
    top: calc(32px + 50px);
}

.vk-mobile-nav-menu-btn {
    width: 60px;
    height: 60px;
}

}
/* Contact */

.grecaptcha-badge { 
	visibility: hidden; 
}

/* ========END contact ===== */


/* =====floating btn ===== */
  .floating-btn {
    width: 4em;
    position: fixed;
    right: .5%;
    bottom: 10%;
    z-index: 999;
    transition: opacity .3s;
  }
  @media (max-width: 544px) {
    .floating-btn {
      width: 3em;
      bottom: 12%;
    }
  }
  .floating-btn:hover {
    transform: translateY(-5px);
  }

  /*  chatwork-btn */
  .floating-btn-chatwork {
    width: 4em;
    position: fixed;
    right: .5%;
    bottom: 22%;
    z-index: 999;
    transition: opacity .3s;
  }

  @media (max-width: 544px) {
    .floating-btn-chatwork {
      width: 3em;
      right: 2%;
    }
  }
  .floating-btn-chatwork:hover {
    transform: translateY(-5px);
  }
/* =====END floating btn ===== */

/* if you want to add scrollreveal animation,jusut add class "scrollreveal-~~~"
footer php of child theme has CDN
js-file is js/scroll-reveal.js*/

 
 /* ===== END Original　Class and Style
 ===== */
 
 #backgroundVideo {
    position: fixed;
    right: 0;
    bottom: 0;
    top: 0;
    left: 0;
    min-width: 100%; 
    min-height: 100%;
	z-index: 0;
}

/* コンテンツが動画の上に表示されるようにする */
.content {
    position: relative;
    z-index: 1;
/* 	background: #F5F5F5; */
	min-width: 100%; 
    min-height: 100%;
    /* 必要に応じてスタイリングを追加 */
}


.site-footer {
    background: #F5F5F5;
}






/* ---------- */
/* モーダル用 */
/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 1000; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
/*    z-index: 1; */
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 100%;
/*   max-width: 500px; */
  padding: 2%;
  background-color: #fff;
}

.closeModal {
  position: absolute;
/*   top: 0.5rem; */
/*   right: 1rem; */
  cursor: pointer;
  top: 7%;
    right: 7%;
    transform: translate(-50%,-50%);
	    font-size: 2rem;
}


/* 以下ボタンスタイル */
button {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #282828;
  border-radius: 2px;
  cursor: pointer;
}

#openModal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
}


 @media (min-width: 992px) {
 .header_scrolled .site-header {
 z-index: 100;
 }
 }
 
 
  @media (max-width: 781px) {
  .sp-m-h {
    display: flex;
  	overflow-y: scroll;
    max-height: 80vh;
	}
  }
