@charset "utf-8";

/*
	* 顧客オリジナルスタイルシート
	* 本体サイトのグローバルメニューのみに関するスタイル
	* ver1
	* Copyright (C) ●●など
	* 更新履歴
		└ 
*/
/* ******************************************************************************************
	グローバルメニュー > 本体サイト
****************************************************************************************** */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	全体
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.bl_gNavUnit{
	display: flex;
	justify-content: flex-end;
	position: relative;
}
/* 画像なしメニュー */
.bl_gNav_item_image {
    display: none; /* グローバルメニューでは画像を非表示 */
}
.bl_gNav_item_text_mobile {
    /* display: none; */
	/* スマホ用テキストは非表示 */
}
/* 画像ありメニュー（子ページ一覧） */
.bl_bannerNavList .bl_gNav_item_image{
	display: block;
}
.bl_bannerNavList .bl_gNav_item_text_mobile{
	display: none;
}
@media screen and (max-width:1300px){
	.bl_gNav_item_image {
        display: none; /* 画像を非表示 */
    }
    .bl_gNav_item_text_mobile {
        display: block;  /* スマホ用テキストを表示 */
    }
	.bl_gNav_area{
		position: fixed;
		top: 0;
		right: -100%;
		overflow: auto;
		transition: .4s;
		width: 100%;
		background-color: var(--mainColor);
		height: 100vh;/* フォールバック */
		height: 100dvh;
		visibility: hidden;
		padding: calc(120px + 20px) 20px 20px;/* フォールバック */
		padding: calc(120px + 20px) 20px calc(20px + env(safe-area-inset-bottom)); /* calc(ハンバーガーメニュー高さ分 + 余白) */
		z-index: 3;
	}
	.is_active .bl_gNav_area{
		right: 0;
		visibility: visible;
	}
	.bl_gNav.is_open{
		left: 0;
		transition: all .6s;
	}
	.bl_gNavUnit{
		flex-direction: column;
		gap: 10px;
	}
}
@media screen and (max-width:768px){
	.bl_gNav_area{
		padding: calc(60px + 20px) 20px 20px;/* calc(ハンバーガーメニュー高さ分 + 余白) */
	}
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	個別
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ======================================================================
	グローバルメニューのリスト
====================================================================== */
.bl_gNav_link{
	display: flex;
    justify-content: start;
    align-items: center;
	transition: all .3s;
	margin: 20px 28px;
	font-size: var(--fontSize17);
	color: var(--black);
	font-weight: 500;
	letter-spacing: 0.06em;
}
.bl_gNav_link:is(:hover,:focus){
	opacity: 1;
}
/* ------------------------------------------------------------
	子リスト
------------------------------------------------------------ */
/* -----
	pc
----- */
@media screen and (min-width:1299px){
	.bl_gNav_item_childWrap{
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0.3s ease;
		position: absolute;
		top: 66px;/* Gメニュー高さ */
		left: 0;
		width: 100%;
		z-index: 1;
		/* background-image: 
		linear-gradient(135deg, rgba(64, 172, 156, 1) 0%, rgba(133, 212, 144, 1) 100%); */
		background-color: var(--mainColor);
		background-size: cover;
		border-radius: 30px;
		z-index: 2;/* セカンドページh1重なり防止 */
	}
	.st_gNav_itemParent:hover > .bl_gNav_item_childWrap,
	.st_gNav_itemParent:focus-within > .bl_gNav_item_childWrap {
		opacity: 1;
		visibility: visible;
	}
	.bl_gNav_item_child {
		display: grid;
		grid-template-columns: repeat(3, 1fr); /* 4カラムの繰り返しレイアウト */
		gap: 10px;
		/* max-width: calc((350px * 4) + 10px + 10px + 10px); */
		/* margin: auto; */
		width: 100%;
		padding: 30px 30px;
	}
	.bl_gNav_item_child_item{
		width: 100%;
		margin: 0;
	}
	.bl_gNav_link.bl_gNav_item_child_link{
		margin: 0;
		color: #fff;
		padding-left: calc(7px + 10px);
		position: relative;
		font-size: var(--fontSize16);
	}
	.bl_gNav_link.bl_gNav_item_child_link:hover{
		background-color: var(--mainColorLight);
	}
	.bl_gNav_link.bl_gNav_item_child_link::before{
		content: '';
        width: 0;
        height: 0;
        border-top: 4px solid transparent;
        border-bottom: 4px solid transparent;
        border-left: 7px solid #fff;
        display: block;
        position: absolute;
        top: 9px;
        left: 0;
	}
	.bl_gNav_link{
		/* white-space: nowrap; */
	}
	/* 子ページがある場合矢印付与 */
	.bl_gNav_link.is_arrow{
		position: relative;
	}
	.bl_gNav_link.is_arrow::after{
		content: '';
        position: absolute;
        top: 50%;
        right: -17px;
        display: block;
        width: 7px;
        height: 7px;
        transform: translateY(-50%) rotate(135deg);
        border-top: 1px solid var(--black);
        border-right: 1px solid var(--black);
	}
}
/* -----
	中間
----- */
@media screen and (max-width:1530px){
	/* グリッド */
	.grid_gNavArea{
		gap: 5px 15px;
	}
	/* 検索フォーム */
	.bl_formArea form{
		width: 220px;
	}
	/* sns */
	.bl_snsArea{
		gap: 10px;
		width: initial;
	}
	/* 採用・金融ボタン */
	.bl_headerBtnLink{
		width: 230px;
		height: 60px;
	}
	/* 採用・金融ボタン */
	.bl_headerBtnLink.bl_headerBtnLink__recruit{
		width: 200px;
	}
	/* グローバルメニュー */
	.bl_gNav_link{
		margin: 20px 15px;
		font-size: var(--fontSize15);
	}
	.bl_gNav_link.bl_gNav_item_child_link{
		margin: 0;
		font-size: var(--fontSize14);
	}
	/* グローバルメニュー > 下矢印 */
	.bl_gNav_link.is_arrow::after{
		right: -11px;
		width: 5px;
		height: 5px;

	}
}
/* -----
	sp
----- */
@media screen and (max-width:1300px){
/* グローバルメニュー */
	.bl_gNav_item_child{
		display: flex;
		flex-direction: column;
		gap: 5px;
	}
	.bl_gNav_item_childWrap{
		padding: 10px 10px 0 10px;
	}
	.bl_gNav_item{
		width: 100%;
	}
	.bl_gNav_item + .bl_gNav_item::before{
		content: none;
	}
	.bl_gNav_link{
		position: relative;
		display: block;
		padding: 5px 10px;
		border-bottom: 1px solid #fff;
		font-size: var(--fontSize16);
		font-weight: 700;
		color: #fff;
		margin: 0;
	}
	.bl_gNav_link:is(:hover,:focus){
		/* opacity: 0.7; */
		background-color: var(--mainColorLight);
	}
	.bl_gNavUnit > .bl_gNav_item > .bl_gNav_link{
		padding-right: 20px;
	}
	/* 第一階層のリストのリンクのみ矢印付与 */
	.bl_gNavUnit > .bl_gNav_item > .bl_gNav_link::after{
		content: '';
        position: absolute;
        top: 50%;
        right: 10px;
        width: 7px;
        height: 7px;
        transform: translateY(-50%) rotate(45deg);
        border-top: 2px solid #fff;
        border-right: 2px solid #fff;
	}
	.bl_gNav_item_child_link{
		/* font-size: var(--fontSize14); */
		padding: 5px;
		padding-left: calc(10px + 10px);/* 行頭線幅 + 余白 */
		border-bottom: none;
		font-weight: normal;
	}
	.bl_gNav_item_child_link::before{
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 7px;
		height: 2px;
		background-color: #fff;
		transform: translateY(-50%);
	}
	/* グリッド */
	.grid_gNavArea{
		gap: 30px 10px;
	}
	/* 検索フォーム */
	.bl_formArea form{
		max-width: 320px;
		width: 100%;
		background-color: #fff;
		border: none;
	}
	/* 採用・金融ボタン */
	.bl_headerBtnArea{
		gap: 20px;
		justify-content: center;
		flex-wrap: wrap;
	}
	.bl_headerBtnLink{
		max-width: 320px;
		width: 100%;
		border-radius: 999px;
		background-color: var(--mainColorLight);
	}
	.bl_headerBtnLink.bl_headerBtnLink__recruit{
		width: 100%;
		border-radius: 999px;
	}
	.bl_headerBtnLink.bl_headerBtnLink__kinyu{
		border-radius: 999px;
	}
	/* snsボタン */
	.bl_snsArea{
		justify-content: center;
	}
}
/* ============================================================
	ハンバーガーメニュー
============================================================ */
/* フォーカストラップ非表示 */
#js_focusTrapFirst,#js_focusTrapEnd{
	display: none;
}
.el_trigger{
	display: none;
}
@media screen and (max-width:1300px){
	/* ハンバーガーメニューオープン時のみフォーカストラップ有効化 */
	.is_active #js_focusTrapFirst,.is_active #js_focusTrapEnd{
		display: block;
	}
	.el_trigger{
		display: block;
		position: absolute;
		top: 50%;
		right: calc(0px - 120px - 20px);/* 基準 + メニュー幅 + 左余白 */
		transform: translateY(-50%);
		transition: .2s;
		width: 120px;
		height: 120px;
		margin: 0;
		background-color: var(--mainColor);
		cursor: pointer;
		border-radius: 14px;
		z-index: 1000;
		border: none;
	}
	.el_trigger:hover{
		background-color: var(--mainColor);
	}
	.is_active .el_trigger .el_trigger_line{
		background-color: transparent;
	}
	.is_active .el_trigger .el_trigger_line::before{
		top: 0;
		transform: rotate(45deg);
	}
	.is_active .el_trigger .el_trigger_line::after{
		top: 0;
		transform: rotate(-45deg);
	}
	/* .is_active .el_trigger .el_trigger_text::before{
		content: "閉じる";
	} */
	.el_trigger_line{
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		transition: .4s;
		width: 60px;
		height: 5px;
		border-radius: 999px;
		background-color: #fff;
	}
	.el_trigger_line::before, .el_trigger_line:after{
		content: "";
		display: block;
		position: absolute;
		transition: inherit;
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 999px;
	}
	.el_trigger_line::before{
		top: -15px;
	}
	.el_trigger_line:after{
		top: 15px;
	}
	.el_trigger_text{
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translateX(-50%);
		width: 100%;
		text-align: center;
	}
	/* .el_trigger_text::before{
		content: "メニュー";
		color: #fff;
		font-weight: bold;
		font-size: 13px;
	} */
}
@media screen and (max-width:768px){
	.el_trigger{
		width: 60px;
		height: 60px;
		right: calc(0px - 60px - 10px);/* 基準 + メニュー幅 + 左余白 */
	}
	.el_trigger_line{
		width: 24px;
		height: 2px;
	}
	.el_trigger_line::before{
		top: -7px;
	}
	.el_trigger_line:after{
		top: 7px;
	}
}