/*
Theme Name: Twenty Twenty-Four Child
Theme URI: 
Author: rpstx
Author URI: 
Description: Twenty Twenty-Four Child Theme
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfour
Text Domain: twenty-twenty-four-child
Tags: 
*/
/*==================================================
Root
==================================================*/

:root{

	--header-height:80px;

	--green:#0F5132;
	--green-dark:#0A3E26;

	--text:#222;
	--sub:#666;
	--border:#E5E7EB;

	--white:#fff;

}


/*==================================================
Reset
==================================================*/

*{

	margin:0;
	padding:0;
	box-sizing:border-box;

}

img{

	display:block;
	max-width:100%;

}

a{

	color:inherit;
	text-decoration:none;

}

button{

	font:inherit;
	background:none;
	border:none;
	cursor:pointer;

}

ul{

	list-style:none;

}


/*==================================================
Body
==================================================*/

body{

	font-family:"Noto Sans JP",sans-serif;
	color:var(--text);
	padding-top:30px ;
    

}


/*==================================================
Header
==================================================*/

.site-header{

	position:fixed;

	top:0;
	left:0;

	width:100%;

	height:var(--header-height);

	background:#fff;

	border-bottom:1px solid var(--border);

	z-index:9999;

	transition:.3s;

}

.site-header.is-scrolled{

	box-shadow:0 10px 25px rgba(0,0,0,.08);

}


/*==================================================
Container
==================================================*/

.header-container{

	width:100%;

	height:100%;

	padding:0 48px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	gap:48px;

}


/*==================================================
Logo
==================================================*/

.header-left{

	flex-shrink:0;

}

.logo{

	display:flex;

	align-items:center;

	gap:14px;

}

.logo-icon{

	width:42px;
	height:42px;

	border-radius:50%;

	background:var(--green);

	color:#fff;

	display:flex;

	align-items:center;

	justify-content:center;

	font-size:18px;

	font-weight:700;

}

.logo-text{

	font-size:24px;

	font-weight:700;

}


/*==================================================
Navigation
==================================================*/

.main-nav{

	flex:1;

	display:flex;

	justify-content:center;

}

.nav-list{

	display:flex;

	align-items:center;

	height:80px;

	gap:6px;

}

.nav-item{

	height:100%;

	display:flex;

	align-items:center;

}


/*==================================================
Nav Button
==================================================*/

.nav-trigger,

.nav-item>a{

	height:80px;

	padding:0 18px;

	display:flex;

	align-items:center;

	gap:8px;

	font-size:15px;

	font-weight:600;

	color:var(--text);

	position:relative;

	transition:.25s;

}

.nav-trigger:hover,

.nav-item>a:hover{

	color:var(--green);

}


/*==================================================
Arrow
==================================================*/

.arrow{

	display:flex;

	align-items:center;

}

.arrow svg{

	width:18px;

	height:18px;

	stroke:currentColor;

	fill:none;

	transition:.25s;

}

.mega-trigger.active .arrow svg{

	transform:rotate(180deg);

}


/*==================================================
Right
==================================================*/

.header-right{

	display:flex;

	align-items:center;

	gap:18px;

	flex-shrink:0;

}

.nav-company{

	font-size:15px;

	font-weight:600;

	transition:.25s;

}

.nav-company:hover{

	color:var(--green);

}


/*==================================================
Button
==================================================*/

.btn.primary{

	height:46px;

	padding:0 24px;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	border-radius:999px;

	background:/*var(--green);*/black;

	color:#fff;

	font-weight:700;

	transition:.25s;

}

.btn.primary:hover{

	background:var(--green-dark);

	transform:translateY(-2px);

}

.btn.secondary{

	height:46px;

	padding:0 24px;

	display:inline-flex;

	align-items:center;

	justify-content:center;

	border:2px solid var(--green);

	border-radius:999px;

	background:#fff;

	color:var(--green);

	font-weight:700;

	transition:.25s;

}

.btn.secondary:hover{

	background:var(--green);

	color:#fff;

	transform:translateY(-2px);

}


/*==================================================
Mobile Toggle
==================================================*/

.mobile-toggle{

	display:none;

	width:44px;

	height:44px;

	position:relative;

}

.mobile-toggle span{

	position:absolute;

	left:10px;

	width:24px;

	height:2px;

	background:#222;

	transition:.3s;

}

.mobile-toggle span:nth-child(1){

	top:13px;

}

.mobile-toggle span:nth-child(2){

	top:21px;

}

.mobile-toggle span:nth-child(3){

	top:29px;

}

.mobile-toggle.active span:nth-child(1){

	transform:rotate(45deg);

	top:21px;

}

.mobile-toggle.active span:nth-child(2){

	opacity:0;

}

.mobile-toggle.active span:nth-child(3){

	transform:rotate(-45deg);

	top:21px;

}

/*==================================================
Mega Menu
==================================================*/

.mega-panels{

	position:absolute;

	top:100%;

	left:0;

	width:100%;

	pointer-events:none;

	z-index:900;

}

.mega-panel{

	position:absolute;

	top:0;

	left:0;

	width:100%;

	background:#fff;

	border-top:1px solid var(--border);

	border-bottom:1px solid var(--border);

	opacity:0;

	visibility:hidden;

	transform:translateY(16px);

	transition:
		opacity .3s ease,
		transform .3s ease,
		visibility .3s;

}

.mega-panel.active{

	opacity:1;

	visibility:visible;

	transform:translateY(0);

	pointer-events:auto;

}


/*==================================================
Mega Container
==================================================*/

.mega-container{

	width:100%;

	padding:56px 48px;

	display:grid;

	grid-template-columns:320px 1fr;

	gap:72px;

	align-items:flex-start;

}


/*==================================================
Heading
==================================================*/

.mega-heading{

	display:flex;

	flex-direction:column;

	gap:18px;

}

.mega-label{

	font-size:12px;

	font-weight:700;

	letter-spacing:.12em;

	color:var(--green);

	text-transform:uppercase;

}

.mega-heading h2{

	font-size:34px;

	line-height:1.3;

}

.mega-heading p{

	font-size:15px;

	line-height:1.9;

	color:var(--sub);

}

.mega-cta{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	width:max-content;

	padding:14px 26px;

	border-radius:999px;

	background:var(--green);

	color:#fff;

	font-weight:700;

	transition:.25s;

}

.mega-cta:hover{

	background:var(--green-dark);

	transform:translateY(-2px);

}


/*==================================================
Mega Content
==================================================*/

.mega-content{

	display:grid;

	grid-template-columns:repeat(2,minmax(260px,1fr));

	gap:40px 56px;

}


/*==================================================
Section
==================================================*/

.mega-section{

	display:flex;

	flex-direction:column;

	gap:18px;

}

.mega-section-title{

	font-size:18px;

	font-weight:700;

	color:var(--green);

	padding-bottom:10px;

	border-bottom:2px solid var(--green);

}


/*==================================================
Links
==================================================*/

.mega-links{

	display:grid;

	gap:10px;

}

.mega-link{

	display:flex;

	align-items:center;

	padding:14px 16px;

	border-radius:12px;

	border:1px solid transparent;

	background:#fafafa;

	transition:.25s;

}

.mega-link:hover{

	background:#fff;

	border-color:var(--green);

	transform:translateX(0);

	box-shadow:0 10px 24px rgba(0,0,0,.06);

}

.mega-link span{

	font-weight:600;

}


/*==================================================
Overlay
==================================================*/

.mega-overlay{

	position:fixed;

	inset:0;

	background:rgba(0,0,0,.25);

	backdrop-filter:blur(2px);

	opacity:0;

	visibility:hidden;

	transition:.3s;

	z-index:800;

}

.mega-overlay.active{

	opacity:1;

	visibility:visible;

}

/*==================================================
Mobile
==================================================*/

@media (max-width:1023px){

	.header-container{

		padding:0 20px;

		gap:20px;

	}

	.main-nav{

		display:none;

	}

	.header-right{

		margin-left:auto;

	}

	.nav-company,

	.btn.primary{

		display:none;

	}

	.mobile-toggle{

		display:flex;

		align-items:center;

		justify-content:center;

	}

}


/*==================================================
Mobile Navigation
==================================================*/

.mobile-nav{

	position:fixed;

	top:80px;

	right:-100%;

	width:100%;

	height:calc(100vh - 80px);

	background:#fff;

	overflow-y:auto;

	transition:right .35s ease;

	z-index:9998;

}

.mobile-nav.open{

	right:0;

}

.mobile-nav-inner{

	padding:24px;

}


/*==================================================
Mobile Links
==================================================*/

.mobile-nav a{

	display:flex;

	align-items:center;

	height:56px;

	border-bottom:1px solid var(--border);

	font-size:15px;

	font-weight:600;

	color:var(--text);

}

.mobile-home{

	margin-bottom:12px;

}


/*==================================================
Accordion
==================================================*/

.mobile-group{

	border-bottom:1px solid var(--border);

}

.mobile-trigger{

	width:100%;

	height:56px;

	display:flex;

	align-items:center;

	justify-content:space-between;

	font-size:15px;

	font-weight:600;

	color:var(--text);

}

.mobile-arrow{

	font-size:22px;

	font-weight:300;

	transition:.3s;

}

.mobile-trigger.active .mobile-arrow{

	transform:rotate(45deg);

}


/*==================================================
Accordion Panel
==================================================*/

.mobile-panel{

	display:none;

	padding-bottom:12px;

}

.mobile-panel.active{

	display:block;

}

.mobile-panel a{

	height:46px;

	padding-left:18px;

	font-size:14px;

	color:var(--sub);

	border:none;

}

.mobile-panel a:hover{

	color:var(--green);

}


/*==================================================
Mobile CTA
==================================================*/
.mobile-buttons{

	margin-top:28px;

	display:grid;

	gap:12px;

}

.mobile-buttons .btn{

	width:100%;

	height:52px;

	display:flex;

	align-items:center;

	justify-content:center;

}


/*==================================================
Body Lock
==================================================*/

body.menu-open{

	overflow:hidden;

}


/*==================================================
Hide Desktop Mega
==================================================*/

@media (max-width:1023px){

	.mega-panels{

		display:none;

	}

}

/*==================================================
Desktop Responsive
==================================================*/

@media (max-width:1400px){

	.header-container{

		padding:0 32px;

	}

	.mega-container{

		padding:48px 32px;

		grid-template-columns:280px 1fr;

		gap:48px;

	}

}

@media (max-width:1200px){

	.logo-text{

		font-size:20px;

	}

	.nav-trigger,
	.nav-item>a{

		padding:0 14px;

		font-size:14px;

	}

	.header-container{

		gap:24px;

	}

}


/*==================================================
Desktop Hover
==================================================*/

.mega-trigger.active .nav-trigger{

	color:var(--green);

}

.mega-trigger.active .nav-trigger::after{

	content:"";

	position:absolute;

	left:18px;

	right:18px;

	bottom:0;

	height:3px;

	background:var(--green);

	border-radius:999px;

}


/*==================================================
Animation
==================================================*/

@keyframes megaFade{

	from{

		opacity:0;

		transform:translateY(12px);

	}

	to{

		opacity:1;

		transform:translateY(0);

	}

}

.mega-panel.active{

	animation:megaFade .28s ease;

}


/*==================================================
Scrollbar
==================================================*/

.mobile-nav::-webkit-scrollbar{

	width:8px;

}

.mobile-nav::-webkit-scrollbar-thumb{

	background:#d7d7d7;

	border-radius:999px;

}


/*==================================================
Focus
==================================================*/

.nav-trigger:focus-visible,
.nav-item>a:focus-visible,
.mobile-trigger:focus-visible,
.mobile-nav a:focus-visible,
.btn:focus-visible{

	outline:2px solid var(--green);

	outline-offset:2px;

}


/*==================================================
Reduce Motion
==================================================*/

@media (prefers-reduced-motion:reduce){

	*{

		animation:none !important;

		transition:none !important;

		scroll-behavior:auto;

	}

}


/*==================================================
Desktop Only
==================================================*/

@media (min-width:1024px){

	.mobile-nav{

		display:none !important;

	}

}


/*==================================================
Mobile Only
==================================================*/

@media (max-width:1023px){

	.mega-overlay{

		display:none;

	}

}


/*==================================================
Utilities
==================================================*/

.hidden{

	display:none !important;

}

.text-center{

	text-align:center;

}


/*=========================
Accordion
=========================*/

#megaFeatures .mega-section-title{

	width:100%;

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:0 0 14px;

	border:none;

	background:none;

	cursor:pointer;

	font-size:18px;

	font-weight:700;

	color:var(--green);

	border-bottom:2px solid var(--green);

}

#megaFeatures .mega-plus{

	font-size:24px;

	font-weight:300;

	transition:.3s;

}

#megaFeatures .mega-section.open .mega-plus{

	transform:rotate(45deg);

}

#megaFeatures .mega-links{

	max-height:0;

	overflow:hidden;

	transition:max-height .35s ease;

}

#megaFeatures .mega-section.open .mega-links{

	max-height:500px;

	padding-top:16px;

}