@charset "UTF-8";
/* CSS Document */


/*================
グローバルナビ
================*/

/*------------------
PC標準時メニューのスタイル
------------------*/
.bl_gNavi {
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
	/*最初に不可視の設定に。gnavi.jsにて可視化*/
	opacity: 0;
}
/*メニュー内容*/
.bl_gNavi ul {
    display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: nowrap;
	height: auto;
	list-style: none;
	padding-left: 0;
	gap:0;
	margin:0 0 25px;
}
.bl_gNavi ul li {
	flex-grow: 1;
	width: 100%;
	height: 35px;
	margin: 0;
	padding: 0;
	border-left: dotted #d3d3d3 2px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.bl_gNavi ul li:last-child {
	border-right: dotted #d3d3d3 2px;
}
.bl_gNavi ul li a {
	display: block;
	width: auto;
	height: auto;
	text-align: center;
	text-decoration: none;
	color:#696365;
	font-size: 0.9rem;
	letter-spacing: 0.2em;
	line-height: 1.1;
	display: block;
	padding: 5px 0 0 0;
	margin: auto;
	font-weight: nomal;
}
/*--下線*/
.bl_gNavi ul li a::after {
	display: block;
	content: "";
	height: 3px;
	width:0%;
	margin: 4px auto 0;
	border-bottom: solid var(--theme-color) 3px;
	transition: width 0.5s;
}
.bl_gNavi ul li:hover a:hover::after {
	width:100%;
}


/*----------------------------------
レスポンシブ-狭い画面時のメニューのスタイル
.bodyWrap.width-narrow
----------------------------------*/
/* -narrow時固有要素　PC時隠しておく */
.bl_gNavi .header, .bl_gNavi .footer {
	display: none;
}
/*メニュー全体*/
.width-narrow .bl_gNaviWrap {
	/*スクロールバー表示抑止のwrap*/
	display: block;
	width: 100%;
	overflow:hidden;
	position: absolute;
	top:0;
	box-sizing: border-box;
}
.width-narrow .bl_gNavi {
	display: block;
	position: fixed;/*fixed メニュー展開時は縦位置固定*/
	z-index: 90;
	text-align: center;
	width: 60%;
	right:-100%;/*画面外に追い出しておく*/
	padding: 0;
	margin: 0;
	transition: right 0.5s;
	overflow: auto;
	overscroll-behavior: contain;
	background-color: #fff;
}
.width-narrow .bl_gNavi.menuActive {
	right:0;/*画面内に復帰*/
	position: fixed;/*メニュー展開時は縦位置固定*/
}
/*+++モーダル+++*/
.width-narrow .bl_gNaviWrap .modal {
	display: none;
	opacity: 0;
	transition: opacity 0.3s, display 0.3s allow-discrete;
}
.width-narrow .bl_gNaviWrap.menuActive .modal {
	display: block;
	opacity: 1;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(248, 100, 163, 0.4);
	@starting-style {
		opacity: 0;
	}
}

/*メニュー内容*/
.width-narrow .bl_gNavi ul {
	display: block;
	height: 100vh;
	position: static;
	width: 90%;
	margin: 4em auto 9vh;
	padding: 0;
	font-size: 1.5rem;
}
.width-narrow .bl_gNavi ul li {
	height: auto;
	border-left:none;
}
.width-narrow .bl_gNavi ul li::after {
	border: none;
}
.width-narrow .bl_gNavi ul li a {
	display: flex;
	font-size: 1rem;
	border-top: dotted #666 1px;
	padding-left: 0;
	padding-right: 0;
	width: auto;
	height: min(7.5vh, 70px);
	margin: auto;
	justify-content: center;
	align-items: center;
	width: 100%;
	text-align: center;
	transition: background 0.5s;
}
.width-narrow .bl_gNavi ul li a:hover {
	background-color: #ffd9e9;
}
.width-narrow .bl_gNavi ul li:last-child {
	border-right: none;
}
/*--下線*/
.width-narrow .bl_gNavi ul li a::after {
	display: none;
}
.width-narrow .bl_gNavi ul li:hover a:hover::after {
	display: none;
}


/*===================
ハンバーガーメニューボタン
hamburgerMenuBtn
===================*/
/*レスポンシブ-メニューの表示 切り替え start*/
.hamburgerMenuBtn {
	display: none;
}
.bodyWrap.width-narrow .hamburgerMenuBtn {
	display: block;
	position: fixed;
}
/*レスポンシブ-メニューの表示 切り替え end*/

/* -外枠 */
.hamburgerMenuBtn {
	position: absolute;
	z-index: 91;
	background-color: transparent;
	cursor: pointer;
	width: 32px;
	height: 45px;
	border-radius: 0;
	right:12px;
	top:36px;
}
/* -三本線 */
.hamburgerMenuBtn span {
	display: inline-block;
	transition: all 0.5s;
	position: absolute;
	left:0px;
	height: 2px;
	border-radius: 0;
	background-color: var(--theme-color);
	width: 32px;
}
.hamburgerMenuBtn span:nth-of-type(1) {
	top:0;
}
.hamburgerMenuBtn span:nth-of-type(2) {
	top:11px;
}
.hamburgerMenuBtn span:nth-of-type(3) {
	top:22px;
}
/* -active状態　位置固定&見た目変化*/
.hamburgerMenuBtn.menuActive {
	position: fixed;
}
.hamburgerMenuBtn.menuActive span:nth-of-type(1){
	width: 43px;
	top:5px;
	left:-5px;
	transform: translateY(10px) rotate(-45deg);
}
.hamburgerMenuBtn.menuActive span:nth-of-type(2){
	opacity: 0;/*真ん中線を透明に*/
}
.hamburgerMenuBtn.menuActive span:nth-of-type(3){
	width: 43px;
	top:25px;
	left:-5px;
	transform: translateY(-10px) rotate(45deg);
}
/*下付きテキストがある場合のスタイル*/
.hamburgerMenuBtn div {
	display: block;
	position: absolute;
	bottom: 0;left: 0;right: 0;
	text-align: center;
	font-size: 0.625rem;
	font-weight: bold;
	color: var(--theme-color);
}