@charset "UTF-8";
/* content CSS Document */
/*--------------------------------------------------------------
 * menu-style
--------------------------------------------------------------*/
/*PC表示*/
.menubotn-warp {display:none;}
#g-nav {position:static;width:100%;background:var(--theme-color);margin-top:10px;}
#g-nav-list {}
#g-nav-list ul {display:flex;flex-wrap: nowrap;justify-content: space-around;align-items: center;margin: 0;padding: 0;}
#g-nav-list ul li {list-style:none;}
#g-nav-list ul li:last-child {} 
#g-nav-list ul li a {text-decoration:none;padding:1em;padding:10px;display: block;text-transform: uppercase;letter-spacing: 0.1em;font-size:15px;}
#g-nav-list ul li a,
#g-nav-list ul li a:visited {color:#fff;}
#g-nav-list .contact-call {display:none;}
/*メニューボタン*/
#g-nav-list .contact-call .contact-call-btn {background:var(--point-btn);}

/*=========-------- スマホ表示 --------=========*/
@media screen and (max-width:999px) {

	/*ボタン*/
	.menubotn-warp {z-index:888;display:block;}
	.openbtn{position: relative;cursor: pointer;border-radius: 5px;}
	.openbtn,#g-nav {width: 50px;height:50px;}
	.menubotn-warp {position:absolute;top:6%;right:0;}

	/*グローバルナビ*/
	#g-nav {overflow:hidden;}
	#g-nav {position:fixed;width:80%;height: 90vh;z-index: 999;top:0;left: -120%;transition: all 0.6s;background:rgba(193, 240, 145, 0.9);margin-top:0;border-radius: 0 0 20px;}
	#g-nav.panelactive{left: 0;}
	#g-nav.panelactive{}

	/*ナビゲーションの縦スクロール*/
	#g-nav.panelactive #g-nav-list{position: fixed;z-index: 999; width:80%;height: 90vh;overflow: auto;-webkit-overflow-scrolling: touch;}

	/*リストのレイアウト設定*/
	#g-nav-list {transition: all .5s;}
	#g-nav-list.listactive {display:block;transition: all .5s;}
	#g-nav ul {flex-wrap: wrap;position: absolute;z-index: 999;top:50%;left:50%;transform: translate(-50%,-60%);margin: 0;padding: 0;width: 100%;max-width: calc(100% - 2em);}
	#g-nav-list ul li a,
	#g-nav-list ul li a:visited {color:#333;}
	#g-nav li {width: 95%;}
	#g-nav-list ul li a{font-size:17px;margin-bottom:18px;background: #fff;border-radius: 10px;padding:10px 10px 10px 16px;display: flex;line-height: 1.2;}
	#g-nav-list ul li a:hover {box-shadow:2px 2px 4px rgba(55, 55, 55, 0.3);transition: all 0.4s;}
	#g-nav-list ul li a::before {content:'▶︎';padding-right: 11px;transition: all 0.4s;display:inline-block;color:var(--theme-color);}
	#g-nav-list ul li a:hover::before {content:'▶︎';transform:translatex(10px);transition: all 0.4s;}

	/*上部案内*/
	#g-nav-list .contact-call {display:flex;flex-wrap:nowrap;font-weight:normal;font-size:16px;text-align:center;letter-spacing:.1em;position:absolute;bottom:0;width:100%;background:#fff;justify-content: space-around;align-items: center;padding:1em .5em;letter-spacing: 0;font-weight: bold;border-radius: 0 0 10px 0;border:1px solid var(--theme-color);color:var(--theme-color);}

	/*お問合せ*/
	#g-nav-list .contact-call .contact-call-btn {color:#fff;padding:.3em .5em;font-size:15px;border-radius:10px;box-shadow: 1px 1px 3px #777;outline: 1px solid #fff;outline-offset: -2px;text-decoration:none;transition: all .8s;}
	#g-nav-list .contact-call .contact-call-btn:hover {box-shadow:none;transition: all .6s;}

	/*リストがスライドイン*/
	.slide-in-list li {opacity: 0;transform: translateX(-50px);transition: opacity 0.5s ease, transform 0.5s ease;transition-delay: 0s;}

	/*ボタン内側*/
	.openbtn span{display: inline-block;transition: all .4s;position: absolute;left: 14px;height: 1.5px;border-radius: 5px;background: #444;width: 45%;}
	.openbtn span:nth-of-type(1) {top:13px;}
	.openbtn span:nth-of-type(2) {top:19px;}
	.openbtn span:nth-of-type(3) {top:25px;}
	.openbtn span:nth-of-type(3)::after {content:"Menu";position: absolute;top:5px;left:-2px;color: #444;font-size: 0.6rem;text-transform: uppercase;}

	/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
	.openbtn.active span:nth-of-type(1) {top: 14px;left: 18px;transform: translateY(6px) rotate(-45deg);width: 30%;}
	.openbtn.active span:nth-of-type(2) {opacity: 0;}
	.openbtn.active span:nth-of-type(3){top: 26px;left: 18px;transform: translateY(-6px) rotate(45deg);width: 30%;}
	.openbtn.active span:nth-of-type(3)::after {content:"Close";transform: translateY(0) rotate(-45deg);top:5px;left:4px;}

}/*=====-----　スマホここまで -----=====*/