/*
Theme Name: テニス振興財団（Lightning子テーマ）
Theme URI: 
Template: lightning
Description:
Author: タロスカイ株式会社
*/


:root {
	--vk-color-text-body: #222;

	--margin-05: 0.5rem;
	--margin-10: clamp(0.9rem, 3vw, 1rem);
	--margin-15: clamp(1.25rem, 3.5vw, 1.5rem);
	--margin-20: clamp(1.5rem, 4.25vw, 2rem);
	--margin-30: clamp(2rem, 6vw, 3rem);
	--margin-40: clamp(3rem, 8vw, 4rem);

	--size-10: clamp(0.9rem, 2vw, 1rem);
	--size-1125: clamp(1rem, 2.25vw, 1.125rem);
	--size-125: clamp(1rem, 2.5vw, 1.25rem);
	--size-15: clamp(1.25rem, 3vw, 1.5rem);
	--size-175: clamp(1.5rem, 3.5vw, 1.75rem);
	--size-20: clamp(1.75rem, 4.25vw, 2rem);
	--size-25: clamp(2rem, 4.7vw, 2.5rem);
	--size-30: clamp(2.5rem, 5.7vw, 3rem);

	--font-accent: 'Anton', sans-serif;

	--transition-s: 0.3s ease;
	--transition-m: 0.5s ease;

	--gradient-bg: linear-gradient(
		90deg,
		rgba(0, 65, 157, 1) 0%,
		rgba(1, 107, 173, 1) 50%,
		rgba(0, 136, 187, 1) 80%,
		rgba(6, 177, 214, 1) 100%
	);
	--gradient-1: linear-gradient(
		90deg,
		rgba(0, 65, 157, 1) 0%,
		rgba(6, 177, 214, 1) 100%
	);

	--color-primary: var(--wp--preset--color--vk-color-primary);
	--color-primary-dark: var(--wp--preset--color--vk-color-primary-dark);
	--color-primary-vivid: var(--wp--preset--color--vk-color-primary-vivid);
	--color-accent: var(--wp--preset--color--vk-color-custom-1);
	--color-secondary: var(--wp--preset--color--vk-color-custom-2);
	--color-bg1: var(--wp--preset--color--vk-color-custom-3);
	--color-bg2: var(--wp--preset--color--vk-color-custom-4);
	--color-bg3: var(--wp--preset--color--vk-color-custom-5);
	--color-bg4: #e5e5e5;
}


/*ファーストビュー*/
.fv-slider.swiper-horizontal>.swiper-pagination-bullets, .fv-slider .swiper-pagination-bullets.swiper-pagination-horizontal, .fv-slider .swiper-pagination-custom, .fv-slider .swiper-pagination-fraction {
	display:none;
}

.fv-slider .swiper-button-next.swiper-button-mobile-bottom,
.fv-slider .swiper-button-prev.swiper-button-mobile-bottom{
 	display:none;
}

@media (width < 600px){
	.fv-slider.wp-block-vk-blocks-slider .wp-block-cover{
		min-height:75vh !important;
	}
}

/* ファーストビューテキスト */
.fv-text {
    position: absolute;
    top: 6vh;
    left: 0;
    z-index: 10;
    font-feature-settings: "palt";
    letter-spacing: .1em;
}
.fv-text p{
	font-size:min(3em,7vw);
	position: relative;
	display:inline-block;
	padding:0 .5em;
	line-height:1.5;
	font-weight:bold;
	color:#fff;
}

.fv-text p:before{
	background:var(--color-primary);
	background:var(--gradient-1);
	content: "";
	position: absolute;
	top: 0;
	left: 0;	
	width: 100%;
	height: 100%;
	transform-origin: left center;
	z-index: -1;	
	animation: bg 1s ease-out backwards;
	border-radius: 2px;
}

@keyframes bg {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
  50%, 100% {
    opacity: 1;
  }
}
/*デビスカップ*/
.vkp-top-over{
	top: 0em;
	box-shadow:0 0 1em rgba(0 0 0 / 0.1);
}
.banner-deviscup{
    width: fit-content;
    margin: 0 auto;
	transition:var(--transition-s);
}
.banner-deviscup .wp-block-image{
	mix-blend-mode:multiply;
}
.banner-deviscup:hover{
    top: -2px;
    box-shadow: 0 0 1.5em rgba(0 0 0 / 0.2);
	background-color:#f7f7f7;
}

/*トップページセクション*/
.vkp-container{
	 position:relative;
}
.vkp-title-short-border--center{
    font-size: 1.75rem;
    letter-spacing: .025em;
}
.vkp-title-short-border--center::before{
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1.5rem;
	background-color:currentColor !important;
	position: relative;
	top:unset;
	right:unset;
	left:unset;
	bottom:unset;
	border: unset;
	display:none;
}
.vkp-title-short-border--center::before{
	margin-left: auto;
	margin-right: auto;
}
/*キャッチコピー*/
.catchcopy{
	font-size: 1.8rem;
	letter-spacing: .1em;
	padding:0 1em;
	width:fit-content;
}
.catchcopy::before,
.catchcopy::after {
	position: absolute;
	width: .5em;
	height: 1em;
	content: '';
	color:currentcolor;
}
.catchcopy::before {
    border-left: solid 2px currentColor;
    border-top: solid 2px currentColor;
    top: 0;
    left: 0;
}
.catchcopy::after {
    border-right: solid 2px currentColor;
    border-bottom: solid 2px currentColor;
    bottom: 0;
    right: 0;
}
.col-gap-l{
	gap:4rem;
}

/*ボタン*/
.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline {
	position: relative;
	z-index: 0; 
	border-radius: 0;
	padding: .75em 2em;
	letter-spacing: 0.1em;
	min-width: 240px;
	margin-top:1em;
	font-weight:bold;
	border-width:2px;
	border-radius:.25em;
}
   
.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:var(--transition-s);
}

.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: 3em;
	height: 1px;
	bottom: 45%;
	right: -1.5em;
	border-bottom: solid 2px currentColor;
	transition:var(--transition-s);	
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline .vk_button_link_caption:after {
	content: '';
	position: absolute;
	display: block;
	width: .75em;
	height: 2px;
	background: currentColor;
	bottom: calc(45% + 4.5px);
	right: -1.55em;
	transform: rotate(45deg);
	transition:var(--transition-s);	
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover {
	opacity: unset;
	box-shadow: unset;
	background-color:  transparent !important;
	border: solid 2px;
}
.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover .vk_button_link_caption::before {
	bottom: 45%;
	right: -2.0em;
}

.vkp_button-through-arrow.vk_button .vk_button_link.is-style-outline:hover .vk_button_link_caption:after {
 right: -2.05em;
}

/*CTA*/
/* フィットカラム hover時のエフェクト */
.vkp-hover-effect .vk_button{
	position:relative;
}
.vkp-hover-effect .vk_button:not(.vkp_button-through-arrow)::before{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: '';
	background: #000;
	opacity:0.4;
	transition: all 0.5s ease-out;
	z-index:-1;
}
.vkp-hover-effect .vk_button:hover::before {
	opacity: 0.1;
}
.vkp-hover-effect .vk_button a:hover{
	opacity: 1;
}
.vkp-hover-effect.vk-cols--fit--gap1.wp-block-columns {
	gap: 0px;
}
.vkp-hover-effect .wp-block-cover{
	overflow:hidden;
}
.vkp-hover-effect .wp-block-cover .wp-block-cover__image-background{
  	transition: all 0.5s ease-out;
}
.vkp-hover-effect .wp-block-cover:hover .wp-block-cover__image-background{
  	transform: scale(1.05);
}
.vkp-hover-effect.alignfull .wp-block-cover__inner-container{
 	max-width:100vw;
}
.sect-cta .vk_button .has-text-color.is-style-outline:hover.has-white-color .vk_button_link_txt{
	color:var(--color-primary);
}
/*トップへ戻るボタン*/
.page_top_btn {
	position: fixed;
	right: 2%;
	bottom: 3%;
	z-index: 99999;
	width: 42px;
	height: 42px;
	color: transparent;
	border-radius: 100em;
	border: 2px solid #fff;
	background: var(--vk-color-primary);
	box-shadow: none;
	background-image: var(--ver_page_top_button_url);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center 30%;
	opacity: 0;
	transition: opacity 0.3s;
	text-decoration: none;
}
/*グロナビ　アニメーション*/
.global-nav-list > li:hover > a,
.global-nav-list > li.current-menu-item > a,
.global-nav-list > li.current-page-parent > a{
	color: var(--color-primary-vivid) !important;
}
.global-nav-list > li:hover:before,
.global-nav-list > li[class*='current']:where(:not(.menu-item-anchor)):before {
	width: 3em;
	height: 3em;
}
.global-nav-list > li::before {
	transition: all 0.2s ease-out;
	content: '';
	padding: 0;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	background: var(--color-accent);
	border-radius: 10em;
	width: 0em;
	height: 0em;
	z-index: 0;
}
.global-nav-list > li::before {
    border-bottom: 0px;
}
.global-nav-list > li:hover::before,
.global-nav-list > li.current-menu-item::before,
.global-nav-list > li.current-page-parent::before{
	opacity: 1;
}
.global-nav-list > li.menu-item-has-children:hover::before{
	opacity: 1;
}

.global-nav-list>li.menu-item-has-children::after {
    bottom: 2px;
}
.device-pc .global-nav-list > li.menu-item-has-children:hover::after,
.global-nav-list > li.acc-parent-open::after {
	bottom: 5px;
}
.vk-men.vk-menu-acc ul.acc-child-close {
    transition: all 0.3s ease-in;
}

.device-pc .global-nav-list > li:focus-within li:focus-within > .sub-menu,
.device-pc .global-nav-list > li:focus-within > .sub-menu,
.device-pc .global-nav-list > li:hover li:focus-within > .sub-menu,
.device-pc .global-nav-list > li:hover > .sub-menu {
	top: 43px;
}
:has(body.header_scrolled) .device-pc .global-nav-list > li:focus-within li:focus-within > .sub-menu,
:has(body.header_scrolled) .device-pc .global-nav-list > li:focus-within > .sub-menu,
:has(body.header_scrolled) .device-pc .global-nav-list > li:hover li:focus-within > .sub-menu,
:has(body.header_scrolled) .device-pc .global-nav-list > li:hover > .sub-menu {
	top: 50px;
}
/*サブメニュー*/
.global-nav-list>li>ul.sub-menu {
	background-color: #fff;
	border:2px solid var(--color-primary);
	width:14em;
	left: 50%;
	transform: translateX(-50%);
	margin-left: auto;
	top: 43px;
	transition: all 0.3s ease-in;
}
:has(body.header_scrolled) 
.global-nav-list>li>ul.sub-menu {
	top: 50px;
}
.global-nav-list>li>ul.sub-menu li a{
	color:var(--color-primary);
	text-align:center;
	border-bottom: 1px solid rgba(205 206 207 / .1);
	transition:.2s;
}
.global-nav-list .sub-menu li a, .global-nav-list .sub-menu li a:hover {
  color:var(--color-primary);
}
.global-nav-list .sub-menu li a:focus-within, .global-nav-list .sub-menu li a:hover {
  	background-color: var(--color-accent);
}
.global-nav-list > li.nav-cta:before {
	border: none;
}
.global-nav-list > li > ul.sub-menu {
	border-radius: .25em;
	font-weight: bold;
}
.global-nav-list>li.menu-item-has-children::after {
    display:none;
}

/*下層ページ*/
/*下層ページキャッチコピー*/
.catchcopy-frame .catchcopy{
	padding:0 1em;
	font-size:clamp(1.75rem, 5vw, 2.25rem);
}
@media (min-width: 782px){
	.catchcopy-image{
			margin-right: calc(100% - 50vw);
			width: 50vw;
	}
}
@media (max-width: 781px){
	.catchcopy-image{
			width: 100vw;
			margin-right: calc((100% - 100vw)/2);
			margin-left: calc((100% - 100vw)/2);
	}
}
.sect-catchcopy p{
	line-height:2;
}
/*財団について*/
.history-year {
	font-family: "Arial", "メイリオ";	
	font-weight:700;
	line-height:1;
	margin-bottom:1.5em;
}
.history-month{
	font-family: "Arial", "メイリオ";
	font-weight:700;
}
.sect-vision .vk_gridcolcard_item_container {
    align-items: center;
}
.sect-history .vk_timeline, 
.container .sect-history .is-layout-flow> .vk_timeline {
    margin: 0em auto;
}
.column-manager{
	justify-content: center;
}
/*活動*/
.vkp-number{
	font-family: "Arial", "メイリオ";
	font-weight:bold;
}
/*募集要項*/
.vkp-table-underline :is(td,th) {
	border: none;
	border-top: 1px solid var(--vk-color-border-hr);
	padding: 1rem;
}
.vkp-table-underline td:first-child {
	font-weight:bold;
}
.vkp-table-underline tr:last-child :is(td,th) {
	border-bottom: 1px solid var(--vk-color-border-hr);
}

/*テーブル*/
.vkp-table-underline tr td:nth-of-type(1)  {
	padding-left: 0;
	border-top-color: var(--vk-color-primary);
	border-right: none;
	border-bottom: none;
	border-left: none;
}
.vkp-table-underline tr:last-child td:nth-of-type(1)  {
	border-bottom:1px solid var(--vk-color-primary);
}

/*下層ページのパンくずリスト*/
.breadcrumb {
	border-top: none;
	border-bottom: none;
}
.breadcrumb {
	position: relative;
	z-index: 900;
}
.breadcrumb i {
	display: none;
}
.breadcrumb li a {
	text-decoration: none;
	color: var(--color-primary);
}
.breadcrumb li a:hover {
	text-decoration: underline;
	color: var(--color-primary-vivid);
}

.display-none{
	display:none;
}

/*お問い合わせ*/
.wpcf7-form label{
	font-weight:700;
}
.form-required{
	margin-left:1em;
	padding: .1em .5em;
	font-size:.8em;
	border-radius:.2em;
	background-color:firebrick;
	color:white;
	font-weight:400;
}
.wpcf7-form input,
.wpcf7-form textarea{
	margin-top:.5em  !important;
}

/*CTA*/

.vkp-hover-effect .wp-block-cover:hover .wp-block-cover__image-background {
    transform: unset;
}
.vkp-hover-effect:has(.vk_button_link:hover) .wp-block-cover__image-background {
    transform: scale(1.08);
}
.vkp-hover-effect .wp-block-cover .wp-block-cover__image-background {
    transition: all 0.3s ease-out;
}
.wpcf7-submit{
	font-weight:700;
}

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

/*ハンバーガーメニュー*/
.mobile-nav-btn-right .vk-mobile-nav-menu-btn, .vk-mobile-nav-menu-btn.position-right {
	right: 8px ;
	top:4px ;
}
@media (max-width: 991.98px) {
    .site-header-logo {
        padding-top: 9px;
        margin-bottom: 9px;
    }
}
.vk-mobile-nav-menu-btn {
    display: flex;
    top: 0px;
    left: 0px;
    width: 34px;
    height: 34px;
    font-size: 5px;
	padding-bottom: 6px;
    text-indent: 0px;
    justify-content: center;
    align-items: flex-end;
    overflow: visible;
    color: var(--color-primary-dark);
}
.vk-mobile-nav-menu-btn {
    --vk-mobile-nav-menu-btn-bg-src: url("/wp-content/uploads/2025/09/vk-menu-btn-nv.svg");
    background: var(--vk-mobile-nav-menu-btn-bg-src) center 20% no-repeat;
    background-size: 70%;
    background-color: #fff !important;
    border: 1px solid var(--color-primary-dark);
	border-radius: 10em;
}
.vk-mobile-nav-menu-btn.menu-open {
	--vk-mobile-nav-menu-btn-close-bg-src: url("/wp-content/uploads/2025/09/vk-menu-close-nv.svg");
	background: var(--vk-mobile-nav-menu-btn-close-bg-src) center 20% no-repeat;
	background-size:70%;
	border: 1px solid var(--color-primary-dark);
}

/*ハンバーガー 展開*/
.vk-mobile-nav {
	opacity: .97;
	border-bottom: 1px solid #e5e5e5;
}
.vk-mobile-nav .widget_nav_menu ul li a,
.vk-mobile-nav nav ul li a {
	color: var(--color-primary-dark);
	font-weight:700;
	border-bottom: 1px solid var(--color-primary-d);
	transition:var(--transition-s);
}
.vk-mobile-nav nav>ul {
    border-top: 1px solid var(--color-primary-d);
}
.vk-mobile-nav a:hover{
	background-color:var(--color-accent);
}
.vk-mobile-nav .acc-btn {
	border-radius: 10em;
	background-size: 80%;
}