/*PC*/
@media print, screen and (min-width:769px){
 /*上部資料請求ボタン*/
.snavi{display: block;width:10vw;height:40px;margin: 0px auto;line-height: 40px; padding: 10px 0px 10px 0px;color:#fff;text-align: center;background:linear-gradient(90deg, #b5b5b6,#898989);font-weight: 400;letter-spacing:6px;font-size: clamp(1.0rem, 1.2vw, 1.8rem);}
.snavi:hover{opacity:0.7;transition: opacity 0.5s;-moz-transition: opacity 0.5s;-webkit-transition: opacity 0.5s;-o-transition: opacity 0.5s;}

/*上部来場予約ボタン*/
.snavi2{display: block;width: 10vw;height:40px;margin: 0px auto;line-height: 40px; padding: 10px 0px 10px 0px;color:#fff;text-align: center;background:linear-gradient(90deg, #658f93,#456669);font-weight: 400;letter-spacing:6px;font-size: clamp(1.0rem, 1.2vw, 1.8rem);}
.snavi2:hover{opacity:0.7;transition: opacity 0.5s;-moz-transition: opacity 0.5s;-webkit-transition: opacity 0.5s;-o-transition: opacity 0.5s;}
	

.gnavi2bg {width:100%;margin: 0px auto 0px auto;height:auto;background:#c9caca}
.gnavi2 {width:98%;margin: 0px auto 0px 2%;}
.gnavi2:after {content: "";clear: both;display: block;}
.gnavi2 li {float: left;width:8.3%;text-align:center;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;line-height: 150%;margin: 15px 0px 20px auto;font-weight: 500;background:#c9caca;color:#fff;font-size: clamp(10px, 0.9vw, 0.9rem);}
.gnavi2 a {display: block;text-decoration: none;font-weight: 500;color:#000}
.gnavi2 a:hover {color:#fff;  -webkit-transition-duration: 0.3s;transition-duration: 0.3s;} 

}


#g-nav li:nth-child(1) {
  padding:130px 0px 0px 0px;
}

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;padding:0px 0px 0px 0px;
    /*ナビのスタート位置と形状*/
	top:100px;
    right: -100%;
	width:30%;
    height: 100vh;/*ナビの高さ*/
	background: #fff;
    /*動き*/
	transition: all 0.8s;
    
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 30%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}


/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    padding:0px 0px 0px 0px;
    top:160px;
    left:50%;
    transform: translate(-50%,-50%);
    width:90%;background: #fff;
}

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

#g-nav li{
	list-style: none;
    text-align: left;
	font-size: 1.6rem;
	padding:10px 0 5px 0;font-weight: bold;
    
}

#g-nav li a{
	color: #4c4948;
	text-decoration: none;
	padding:10px 0 5px 0;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
    transition: all .5s;
}

#g-nav li a:hover{
    color:#ccc;
}


/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
    #g-nav,
    #g-nav.panelactive #g-nav-list{
    width:100%;
    }
	
	#g-nav li:nth-child(1) {
  padding:30px 0px 0px 0px;
}
	
#g-nav li{
	list-style: none;
    text-align: left;
	font-size: 1.6rem;
	padding:5px 0 0px 0;font-weight: bold;
    
}
	
	
    #g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;padding:0px 0px 0px 0px;
    /*ナビのスタート位置と形状*/
	top:70px;
    right: -100%;
	width:100%;
    height: 100vh;/*ナビの高さ*/
	background: #fff;
    /*動き*/
	transition: all 0.8s;
    
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
    

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    padding:0px 0px 0px 0px;
    top:180px;
    left:50%;
    transform: translate(-50%,-50%);
    width:90%;background: #fff;
}

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

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

#g-nav li a{
	color: #000;
	text-decoration: none;
	padding:5px 0 0px 0;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	font-weight: bold;
    transition: all .5s;
}

#g-nav li a:hover{
    color:#ccc;
}

}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{ float: right; 
z-index: 9999;
position: relative;/*ボタン内側の基点となるためrelativeを指定*/
cursor: pointer;
top:10px;
right: 20px;
width: 70px;
height:40px;	

}

/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .8s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 2px;
    border-radius: 5px;
  background: #000;
    width: 60%;

  }


.openbtn4 span:nth-of-type(1) {
  top:15px; 
}

.openbtn4 span:nth-of-type(2) {
  top:23px;
}

.openbtn4 span:nth-of-type(3) {
  top:31px;
}

.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:5px;
  left:-2px;
  color: #4c4948;
  font-size: 1.35rem;
  text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/

.openbtn4.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 70%;
}

.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn4.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 70%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:13px;
  left:28px;
}
/*========= レイアウトのためのCSS ===============*/





/*===========================================================*/
/* 機能編 5-3-1中心から外に線が伸びる（下部）*/
/*===========================================================*/

.sort-btn{
	display: flex;
	justify-content: center;
	margin:50px 0;
	list-style: none;
    text-transform: uppercase;
}

.sort-btn li{
	position: relative;
    cursor: pointer;
    margin: 0 20px;
}

.sort-btn li::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom:-5px;
    left: 25%;
    /*線の形状*/
    width: 50%;
    height: 2px;
    background:#a0a0a0;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

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

/*横幅が375px以下になった際の指定*/
@media only screen and (max-width: 375px) {
.sort-btn{
    flex-wrap: wrap;
	justify-content: space-between;
}
	
.sort-btn li{
	width:48%;
	margin:0 0 10px 0;
	text-align:center;
	}	
}

/*矢印が右に移動する*/
.btnarrow4{
    /*矢印と下線の基点とするためrelativeを指定*/
  position: relative;
    /*形状*/
    display: inline-block;
  padding: 20px;
    color: #333;
    text-decoration: none;
    outline: none;
}

/*矢印と下線の形状*/
.btnarrow4::before{
    content: '';
    /*絶対配置で下線の位置を決める*/
  position: absolute;
    bottom:0px;
    left:0%;
    /*下線の形状*/    
    width: 85%;
    height: 1px;
  background:#333;
    /*アニメーションの指定*/
    transition: all .3s;
}

.btnarrow4::after{
    content: '';
    /*絶対配置で矢印の位置を決める*/
  position: absolute;
    bottom:4px;
    right:15%;
    /*矢印の形状*/    
    width: 15px;
    height:1px;
  background:#333;
    transform: rotate(35deg);
    /*アニメーションの指定*/
    transition: all .3s;
}

/*hoverした際の移動*/
.btnarrow4:hover::before{
    left:20%;
}

.btnarrow4:hover::after{
    right:-5%;
}