/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/


/*PCでもモバイルハンバーガーメニュー表示*/
@media (min-width: 992px) {
body.device-pc .vk-mobile-nav-menu-btn,
body.device-pc .vk-mobile-nav {
  display: block;
	}
}


/*左上サイトロゴサイズ 位置調整*/
.site-header-logo img {width: 220px;margin-top:30px !important;margin-left: 50px !important;}


/*全幅指定
#site-header {
	width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: var(--vk-width-full);
    }
*/


/*左上サイトロゴヘッダーコンテナー　左40px余白*/
.site-header-container {
	margin: 0px  !important;
	padding: 0px !important;
}


/*モバイルハンバーガーメニュー位置*/
#vk-mobile-nav-menu-btn {
	margin-top: 40px !important;
	margin-right: 40px !important;
}



@media screen and (max-width: 959px) {
  #vk-mobile-nav-menu-btn {
	margin-top: 30px !important;
	margin-right: 20px !important;
}

}






/*
.vk-mobile-nav {
    background-color: rgba(255, 255, 255, 0.5);
    border-bottom: 1px solid #e5e5e5
}
.vk-mobile-nav-menu-btn {
	border: none;
    background: var(--vk-mobile-nav-menu-btn-bg-src) center 50% no-repeat rgba(255,255,255,.8)
}
*/

/*モバイルハンバーガーメニュー出現スピード　左から右へ*/
.vk-mobile-nav.vk-mobile-nav-right-in {
    transition: all .7s ease-out;
    left: 100%
}





/*ページヘッダータイトル*/
.page-header-title {
	font-weight: 700 !important;
	letter-spacing: 0.2em;
}







/*続きを見るボタン*/

/*
	高度な設定　追加 CSS クラス に追加する
vkp_button-through-arrow vk_block-margin-lg--margin-top vk_button_link is-style-outline

*/

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline {
 position: relative;
 z-index: 0; 
 border-radius: 0;
 padding: 12px 35px;
 letter-spacing: 0.1em;
 width: 240px;
}
   
.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline::before {
 content: '';
 display: block;
 position: absolute;
 top: 0;
 left: 0;
 width: 0;
 height: 100%;
 background-color: currentColor;
 z-index: -1;
 transition: .3s;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover::before {
 width: 100%;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline .vk_button_link_caption::before {
 content: '';
 position: absolute;
 display: block;
 width: 80px;
 height: 1px;
 bottom: 50%;
 right: -45px;
 border-bottom: solid 1px currentColor;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline .vk_button_link_caption:after {
 content: '';
 position: absolute;
 display: block;
 width: 14px;
 height: 2px;
 background: currentColor;
 bottom: calc(50% + 5px);
 right: -45px;
 transform: rotate(45deg);
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover {
 opacity: unset;
 box-shadow: unset;
 background-color:  transparent !important;
 border: solid 1px;
}

/*続きを見るボタン　ここまで*/

#vk-mobile-nav {background-color: rgba(0, 0, 0, 0.8)}
#navigation {color: #fff;}
.vk-mobile-nav nav ul li a {color: #fff;}
.vk-mobile-nav-menu-outer {text-align: center;}










/*フォーム関連*/



.form_text {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	background-image: none;
	border: 1px solid rgba(0, 0, 0, 0.16) !important;
	border-radius: 8px !important;
	color: inherit;
	font-family: inherit;
	font-size: 1.2em !important;
	padding: 0.4em 0.8em !important;
	width: auto !important;
	display: inline-block;
	
}


.form_text:focus {
	border: 1px solid rgba(0, 0, 0, 0.32);
	box-shadow: none;
	outline: none;
}




.form_textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	background-image: none;
	border: 1px solid rgba(0, 0, 0, 0.16);
	border-radius: 8px;
	color: inherit;
	font-family: inherit;
	font-size: 1em;
	height: 100px;
	padding: 0.4em 0.8em;
}

.form_textarea:focus {
	border: 1px solid rgba(0, 0, 0, 0.32);
	box-shadow: none;
	outline: none;
}



.form_btn_div {
display: flex;
justify-content: center;
}

.form_btn {
  min-width: 100px;
  font-family: inherit;
  appearance: none;
  border: 0;
  border-radius: 5px;
  background: #4d4d4d;
  color: #fff;
  padding: 14px 40px;
  margin: 10px;
  font-size: 1rem;
  cursor: pointer;
  display:inline-block;
}

.form_btn:hover {
  background: #8a8a8a;
}

.form_btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px #cbd6ee;
}



/*.required::after {
content: "必 須";
color: #fff;
background: #929292;
font-size: 0.6em;
font-weight: normal;
padding: 0.2em 0.5em;

margin-left:1em;
}*/





table.form_table {
	margin-bottom: 50px;
  border-collapse: collapse;
  width: 100% !important;
}

.form_table th,
.form_table td{
	text-align: left;
  padding: 10px 20px;
  border: solid 1px #ccc;
  box-sizing:border-box;
  vertical-align: top;
}
.form_table th {
	font-weight: normal;
  width:30%;
}

.required {font-size: 12px;font-weight: normal;}

@media screen and (max-width: 959px) {
  .form_table {
    width: 95%;
  }
  table.form_table th,
  table.form_table td {
    display: block;
    width: 95%;
    border-bottom:none !important;
  }
  table.form_table tr:last-child {
	width: 95% !important;
    border-bottom: solid 1px #ccc !important;
  }
  
  input[type="text"], textarea {
    width: 95%;
	}
}




/* reCAPTCHA v3　表示位置 */
.grecaptcha-badge{
    margin-bottom: 100px;
}




/*--------FORM----------*/

table.memapplitable {border-collapse: collapse;}


.memapplitable {
	margin-bottom: 50px;
}

.memapplitable th { background-color: #eeeeee;
}

.memapplitable td,
.memapplitable th {border-color: #d7d7d7;
	padding: 0.5em;
}
@media only screen and (max-width:991px){
	.memapplitable {
		margin-bottom: 50px;
	}
	.memapplitable th,
	.memapplitable td{
		padding: 10px 5px;
		display: block;width: 100%;
		text-align: left;
	}
	.memapplitable th {font-weight: bold;}
}

.form-control {display: inline;width: auto;}





/* ローディングスクリーンのスタイル */
.my_loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: my_fadeOutBackground 1.0s 1.5s forwards;
}

.my_loading img {
    opacity: 0;
    animation: my_logo_fade 2s 0.1s forwards;
    width: 300px; /* ロゴのサイズ（パソコン） */
}

@media screen and (max-width: 959px) {
    .my_loading img {
        width: 150px; /* ロゴのサイズ（スマホ） */
    }
    .my_loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    width: 100vw;
    height: 90vh;
    background-color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    animation: my_fadeOutBackground 1.0s 1.5s forwards;
}
}

/* 背景のフェードアウトアニメーション */
@keyframes my_fadeOutBackground {
    0% {
        opacity: 1;
    }
    
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* ロゴのフェードイン・フェードアウトアニメーション */
@keyframes my_logo_fade {
    0% {
        opacity: 0;
        /*transform: translateY(20px);*/
    }
    50% {
        opacity: 1;
        /*transform: translateY(0);*/
    }
    100% {
        opacity: 0;
    }
}