@charset "UTF-8";

/* ナビゲーションメニュー：モバイル */
@media only screen and (max-width: 767px) {
	#g-nav {
		position: fixed;
		inset: 0 -100% 0 100%;
		z-index: 100;
		background-color: var(--nav_bk-color_sp);
		transition: transform 0.3s;
		overflow: scroll;
		/*スマホナビのスクロール許可*/
		padding-bottom: 50px;
		/*スマホナビスクロール時の下余白*/
	}

	.open #g-nav {
		transform: translate(-100%, 0);
	}

	.open body {
		position: fixed;
		overflow: hidden;
	}
}

/* ナビゲーションメニュー：PC */
@media print,
screen and (min-width: 768px) {

	#g-nav a:hover {
		color: #d3d3d3;
	}
}

/*メニュー副題*/
span.sub {
	content: attr(data-en);
	display: block;
	color: var(--accent-color1);
	font-size: 11px;
	text-align: center;
	font-weight: 400;
	letter-spacing: 0.2em;
	font-family: "Sawarabi Gothic", "M PLUS 1p", sans-serif;
	height: 12px;
	/* 固定の高さを指定 */
	line-height: 10px;
	/* 中央揃え */
}

@media only screen and (max-width: 767px) {
	span.sub {
		color: var(--accent-color1);
	}
}


/*===========================================================*/
/*機能編  5-1-1 ドロップダウンメニュー（上） */
/*===========================================================*/

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*ナビゲーションを横並びに*/
nav {
	position: relative;
	z-index: 1;
	margin-top: 10px;
	margin-bottom: 10px;
}

nav ul {
	display: flex;
	/*gap: 5%;*/
	/*6-7基準*/
	justify-content: center;
	align-items: center;
	list-style: none;
	z-index: 10;
	/*height: 70px;*/
	/*通常50-60*/
	text-align: center;
}

nav ul li {
	font-size: 16px;
	line-height: 1.5;
	/* background-color: #f8f6f5a1; */
	flex-grow: 1;
	text-align: center;
}

/* メニュー間の縦棒を、PC・TABのみ表示 */
@media print,
screen and (min-width: 768px) {
	#g-nav>#g-nav-list>ul>li+li {
		border-left: 1px solid var(--main-color);
	}
}

/* それ以外は非表示 */
#g-nav ul ul li {
	border-left: none !important;
}

/*2階層目以降は横並びにしない*/
nav ul ul {
	display: block;
}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
	position: relative;
	font-size: 16px;
}

/*ナビゲーションのリンク設定*/
nav ul li a {
	display: block;
	text-decoration: none;
	color: var(--nav_font-color);
	/*setting*/
	padding: 6px 20px;
	/* 以前: 20px 35px */
	transition: all .3s;
}

nav ul li li a {
	/* padding:10px 35px; */
	padding: 8px 25px;
	/* サブメニュー用も調整 */
}


nav ul li a:hover {
	color: #fff;
}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before {
	content: '';
	position: absolute;
	left: 15px;
	top: 25px;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--nav_font-color);
	/*setting*/
	border-right: 2px solid var(--nav_font-color);
	/*setting*/
	transform: rotate(135deg);
}


@media only screen and (max-width:767px) {
	nav ul li.has-child::before {
		top: 30px;
		border-top: 2px solid #FFF;
		border-right: 2px solid #FFF;
	}
}

@media only screen and (max-width:1200px) {
	nav ul li.has-child::before {
		left: 0;
	}
}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul {
	/*絶対配置で位置を指定*/
	position: absolute;
	left: 0;
	top: 58px;
	z-index: 4;
	/*形状を指定*/
	background: var(--nav_bk-color);
	/*setting*/
	width: 100%;
	min-width: 280px;
	/*はじめは非表示*/
	visibility: hidden;
	opacity: 0;
	/*アニメーション設定*/
	transition: all .3s;
}

/*hoverしたら表示*/
nav li.has-child:hover>ul,
nav li.has-child ul li:hover>ul,
nav li.has-child:active>ul,
nav li.has-child ul li:active>ul {
	visibility: visible;
	opacity: 1;
}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a {
	color: #fff;
	border-bottom: solid 1px rgba(255, 255, 255, 0.4);
}

nav li.has-child ul li:last-child a {
	border-bottom: none;
}

nav li.has-child ul li a:hover,
nav li.has-child ul li a:active {
	background: rgba(255, 255, 255, 0.1);
}

/*==767px以下の形状*/

@media only screen and (max-width:767px) {
	nav {
		padding: 0;
		
		/*PCのmargin打消し*/
		margin-top: 0px;
		margin-bottom: 0px;
	}

	nav ul {
		display: block;
	}

	nav ul li a {
		border-bottom: 1px solid #FFF;
	}

	nav li.has-child ul {
		background-color: rgba(255, 255, 255, 0.1);
	}

	/*矢印の位置と向き*/

	nav ul li.has-child::before {
		left: 20px;
	}

	nav ul ul li.has-child::before {
		transform: rotate(135deg);
		left: 20px;
	}

	nav ul li.has-child.active::before {
		transform: rotate(-45deg);
	}

}



/*==================================================
機能編 　5-1-11 クリックしたらナビが上から下に出現
===================================*/

@media only screen and (max-width:767px) {

	/*ナビゲーション*/
	#g-nav ul {
		/*ナビゲーション天地中央揃え*/
		width: 90%;
		margin: 100px auto 0 auto;
	}

	#g-nav ul ul {
		width: 100%;
		margin: 0;
	}

	/*プルダウンナビのCSS*/
	#g-nav ul li.has-child ul {
		position: relative;
		left: 0;
		top: 0;
		width: 100%;
		visibility: visible;
		/*JSで制御するため一旦表示*/
		opacity: 1;
		/*JSで制御するため一旦表示*/
		display: none;
		/*JSのslidetoggleで表示させるため非表示に*/
		transition: none;
		/*JSで制御するためCSSのアニメーションを切る*/
		transform: none;
	}

	/*リストのレイアウト設定*/

	#g-nav li {
		list-style: none;
		text-align: center;
	}

	#g-nav li a {
		color: #FFF;
		text-decoration: none;
		padding: 10px;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
	}
}


/*==================================================
　機能編 5-3-3 左から右に線が伸びる（下部）
===================================*/
.nav01c li a {
	/*線の基点とするためrelativeを指定*/
	position: relative;
	text-align: center;
}

.nav01c li a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	/* bottom: 16px; */
	bottom: 0px;
	left: 25%;
	/*線の形状*/
	width: 50%;
	height: 1px;
	background: var(--main-color);
	/*setting*/
	/*アニメーションの指定*/
	transition: all .3s;
	transform: scale(0, 1);
	/*X方向0、Y方向1*/
	transform-origin: left top;
	/*左上基点*/
}

.nav01c li li a::after {
	display: none;
}

.nav01c li li a {
	text-align: left;
}

/*現在地とhoverの設定*/
.nav01c li.current a::after,
.nav01c li a:hover::after {
	transform: scale(1, 1);
	/*X方向にスケール拡大*/
}

@media only screen and (max-width:767px) {
	.nav01c li a::after {
		display: none;
	}
}

/* hover動作はマウスがある端末だけに限定（iPad等で無効化） */
@media (hover: hover) and (pointer: fine) {

	nav li.has-child:hover>ul,
	nav li.has-child ul li:hover>ul,
	nav li.has-child:active>ul,
	nav li.has-child ul li:active>ul {
		visibility: visible;
		opacity: 1;
	}
}