@media screen and (min-width: 1061px) {

/* PC用のスタイル記述 */











/*gnav*/









.nav_logo{

	margin-bottom:50px;

	display:none;

}











#g-nav-list{



    /* max-width: 730px; */

    width: 100%;

    height: 60px;

/*    background: rgba(38,62,98,0.80);*/

/*    background: rgba(108,96,131,0.80);*/

    margin: 0 0 0 auto;



  border-top-left-radius: 40px;

  border-bottom-left-radius: 40px;

  

    text-align: right;

    position: absolute;

    z-index: 9;



    top:34px;

    right: -50px;



    box-sizing: border-box;

    

 



}



#g-nav-list ul{

    padding-top: 14px;

    margin-right: 50px;

    box-sizing: border-box;

}



#g-nav-list ul li{

    display: inline-block;

    font-size:17px;

	line-height:150%;

	margin-right:25px;

    font-family: 'noto400';

}



#g-nav-list ul li:last-child{

	margin-right:0px;

}



#g-nav-list ul li a{

     position: relative;

	color:#222222;

	text-decoration: none;



    

    -webkit-transition: all 0.3s ease;

    -moz-transition: all 0.3s ease;

    -o-transition: all 0.3s ease;

    transition: all  0.3s ease;



}



#g-nav-list ul li a:before{

  position: absolute;

  content: url(../img/common/nav_on.png);

  display: block;



  bottom: -14px;

  left: calc(50% - 5px);

  



  opacity: 0;



  -webkit-transition: all 0.6s ease;

  transition: all 0.6s ease;  

}





#g-nav-list ul li a:hover:before{

  opacity: 1;



}



 .gnav_on_t{

	color: #ff9a00 !important;



}



.gnav_on{





    

}





#g-nav-list ul li span{

    display: none;



}





  

  

  





}



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

/* タブレット用のスタイル記述 */







.nav_logo{



    width: 270px;

    height: auto;

    margin: 0 auto 25px auto;





animation-name:gnaviAnime;

animation-duration:1s;

animation-delay:.2s;/*0.2 秒遅らせて出現*/

animation-fill-mode:forwards;

opacity:0;

}











/*========= ナビゲーションのためのCSS ===============*/





/*アクティブになったエリア*/

#g-nav.panelactive{

    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/

    position:fixed;

    z-index:100;

  top: 0;

  width:100%;

    height: 100vh;

}



/*丸の拡大*/

.circle-bg{

    position: fixed;

  z-index:3;

    /*丸の形*/

    width: 100px;

    height: 100px;

    border-radius: 50%;



 background:#FFFFFF;







 

    /*丸のスタート位置と形状*/

  transform: scale(0);/*scaleをはじめは0に*/

    top:calc(50% - 50px);/*50%から円の半径を引いた値*/

    left:calc(50% - 50px);/*50%から円の半径を引いた値*/

    transition: all .6s;/*0.6秒かけてアニメーション*/

}



.circle-bg.circleactive{

  transform: scale(50);/*クラスが付与されたらscaleを拡大*/

}



/*ナビゲーションの縦スクロール*/

#g-nav-list{

    display: none;/*はじめは表示なし*/

    /*ナビの数が増えた場合縦スクロール*/

    position: fixed;

    z-index: 999; 

    width: 100%;

    height: 100vh;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

}



#g-nav.panelactive #g-nav-list{

     display: block; /*クラスが付与されたら出現*/

}



/*ナビゲーション*/

#g-nav ul {

  opacity: 0;/*はじめは透過0*/

    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/

    position: absolute;

    z-index: 999;

    top:50%;

    left:50%;

    transform: translate(-50%,-50%);

    

    max-width: 450px;

    box-sizing:border-box;

    width: 100%;

    



}



/*背景が出現後にナビゲーションを表示*/

#g-nav.panelactive ul {

    opacity:1;

}



/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/

#g-nav.panelactive ul li{

animation-name:gnaviAnime;

animation-duration:1s;

animation-delay:.2s;/*0.2 秒遅らせて出現*/

animation-fill-mode:forwards;

opacity:0;

}

@keyframes gnaviAnime{

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}



#g-nav{



}









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







#g-nav ul {

    margin-left: -30px  !important;

}



#g-nav li{

	list-style: none;

    padding-bottom: 15px;

    margin-bottom: 20px;

    border-bottom: 1px solid #C1AC8D;

}



#g-nav li:last-child{

    margin-bottom: 0px;

}





#g-nav li a{

	color:#585858;
	text-decoration: none;

    font-size: 22px;

    line-height: 120%;



	display: block;



 

    font-family: 'noto400';

}



#g-nav li span{

    margin-left: 15px;

    font-size: 13px;
    color:#9E7130;  



}





.gnav_on{

	color: #263e62 !important;



}







#g-nav li{

 position:relative;

 padding-left:10px;

list-style:none;

}





#g-nav li:before{

 content:'';

 display:inline-block;

 position:absolute;

 right:10px;

 top:8px;

 width:8px;

 height:8px;

 border-bottom:1px solid #9E7130;

 border-right:1px solid #9E7130;

 transform:rotateZ(-45deg);

}







/*========= ボタンのためのCSS ===============*/

/*

.openbtn{

	position:fixed;

	top:6px;

	right: 10px;

	z-index: 9999;

	cursor: pointer;

    width: 65px;

    height:65px;

	background-color:#263e62;

    border: 1px solid #f26868;





    

}



/*

	

/*×に変化*/	

/*.openbtn span{

    display: inline-block;

    transition: all .4s;

    position: absolute;



    left: 12px;

    height: 3px;

    border-radius: 2px;

	background-color:#263e62;

  	width: 45%;

  }



.openbtn span:nth-of-type(1) {

	top:13px;	

}



.openbtn span:nth-of-type(2) {

	top:21px;

}



.openbtn span:nth-of-type(3) {

	top:29px;

}



.openbtn.active span:nth-of-type(1) {

    top: 15px;

    left: 16px;

    transform: translateY(6px) rotate(-45deg);

    width: 30%;

}



.openbtn.active span:nth-of-type(2) {

	opacity: 0;

}



.openbtn.active span:nth-of-type(3){

    top: 27px;

    left: 16px;

    transform: translateY(-6px) rotate(45deg);

    width: 30%;

}*/







/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/

.openbtn{

  position:absolute;

  width: 50px;

    height:50px;

  cursor: pointer;





	top:5px;

	right: 0px;

	z-index: 9999;/*ボタンを最前面に*/

}

  

/*ボタン内側*/



.openbtn span{

    display: inline-block;

    transition: all .4s;/*アニメーションの設定*/

    position: absolute;

    left: 13px;

    height: 4px;

 background-color:#9E7130;

/*  background-color:#010C44;*/

  }





.openbtn span:nth-of-type(1) {

  top:19px; 

    width: 50%;

}



.openbtn span:nth-of-type(2) {

  top:28px;

    width: 50%;

}



/*activeクラスが付与されると線が回転して×に*/



.openbtn.active span:nth-of-type(1) {

    top: 20px;

    left: 16px;

    transform: translateY(6px) rotate(-30deg);

    width: 45%;

 background-color:#9E7130;     

}



.openbtn.active span:nth-of-type(2) {

    top: 32px;

    left: 16px;

    transform: translateY(-6px) rotate(30deg);

    width: 45%;

 background-color:#9E7130;      

}











  }

  

  

  

  



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

/* スマートフォン用のスタイル記述 */









.nav_logo{



    width: 210px;

    height: auto;

    margin: 0 auto 30px auto;





animation-name:gnaviAnime;

animation-duration:1s;

animation-delay:.2s;/*0.2 秒遅らせて出現*/

animation-fill-mode:forwards;

opacity:0;

}









/*========= ナビゲーションのためのCSS ===============*/





/*アクティブになったエリア*/

#g-nav.panelactive{

    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/

    position:fixed;

    z-index:100;

  top: 0;

  width:100%;

    height: 100vh;

}



/*丸の拡大*/

.circle-bg{

    position: fixed;

  z-index:3;

    /*丸の形*/

    width: 100px;

    height: 100px;

    border-radius: 50%;



 background:#FFFFFF;

 

    /*丸のスタート位置と形状*/

  transform: scale(0);/*scaleをはじめは0に*/

    top:calc(50% - 50px);/*50%から円の半径を引いた値*/

    left:calc(50% - 50px);/*50%から円の半径を引いた値*/

    transition: all .6s;/*0.6秒かけてアニメーション*/

}



.circle-bg.circleactive{

  transform: scale(50);/*クラスが付与されたらscaleを拡大*/

}



/*ナビゲーションの縦スクロール*/

#g-nav-list{

    display: none;/*はじめは表示なし*/

    /*ナビの数が増えた場合縦スクロール*/

    position: fixed;

    z-index: 999; 

    width: 100%;

    height: 100vh;

    overflow: auto;

    -webkit-overflow-scrolling: touch;

}



#g-nav.panelactive #g-nav-list{

     display: block; /*クラスが付与されたら出現*/

}



/*ナビゲーション*/

#g-nav ul {

  opacity: 0;/*はじめは透過0*/

    /*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/

    position: absolute;

    z-index: 999;

    top:50%;

    left:50%;

    transform: translate(-50%,-50%);

    

    max-width: 340px;

    box-sizing:border-box;

    width: 100%;

}



/*背景が出現後にナビゲーションを表示*/

#g-nav.panelactive ul {

    opacity:1;

}



/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/

#g-nav.panelactive ul li{

animation-name:gnaviAnime;

animation-duration:1s;

animation-delay:.2s;/*0.2 秒遅らせて出現*/

animation-fill-mode:forwards;

opacity:0;

}

@keyframes gnaviAnime{

0% {

opacity: 0;

}

100% {

opacity: 1;

}

}





#g-nav ul {

    margin-left: -20px  !important;







}





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

#g-nav li{

	list-style: none;

    padding-bottom: 10px;

    margin-bottom: 15px;

    border-bottom: 1px solid #C1AC8D;

}



#g-nav li:last-child{

    margin-bottom: 0px;

}





#g-nav li a{

	color:#585858;

	text-decoration: none;

    font-size: 17px;

    line-height: 120%;



	display: block;



 

    font-family: 'noto400';

}





#g-nav li span{

    margin-left: 12px;

    font-size: 11px;
    color:#9E7130;  


}



.gnav_on{

	color: #263e62 !important;



}



#g-nav li{

 position:relative;

 padding-left:10px;

list-style:none;

}





#g-nav li:before{

 content:'';

 display:inline-block;

 position:absolute;

 right:10px;

 top:8px;

 width:5px;

 height:5px;

 border-bottom:1px solid #9E7130;

 border-right:1px solid #9E7130;

 transform:rotateZ(-45deg);

}







/*========= ボタンのためのCSS ===============*/

/*

.openbtn{

	position:fixed;

	top:4px;

	right: 5px;

	z-index: 9999;

	cursor: pointer;

    width: 55px;

    height:55px;

	background-color:#263e62;   

    border: 1px solid #f26868;





    

}



*/

	

/*×に変化*/	

/*.openbtn span{

    display: inline-block;

    transition: all .4s;

    position: absolute;



    left: 12px;

    height: 3px;

    border-radius: 2px;

	background-color:#263e62;

  	width: 45%;

  }



.openbtn span:nth-of-type(1) {

	top:13px;	

}



.openbtn span:nth-of-type(2) {

	top:21px;

}



.openbtn span:nth-of-type(3) {

	top:29px;

}



.openbtn.active span:nth-of-type(1) {

    top: 15px;

    left: 16px;

    transform: translateY(6px) rotate(-45deg);

    width: 30%;

}



.openbtn.active span:nth-of-type(2) {

	opacity: 0;

}



.openbtn.active span:nth-of-type(3){

    top: 27px;

    left: 16px;

    transform: translateY(-6px) rotate(45deg);

    width: 30%;

}



*/





/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/

.openbtn{

  position:absolute;

  width: 50px;

    height:50px;

  cursor: pointer;





	top:4px;

	right: 0px;

	z-index: 9999;/*ボタンを最前面に*/

}

  

/*ボタン内側*/



.openbtn span{

    display: inline-block;

    transition: all .4s;/*アニメーションの設定*/

    position: absolute;

    left: 13px;

    height: 4px;

 background-color:#9E7130;

/*  background-color:#010C44;*/

  }





.openbtn span:nth-of-type(1) {

  top:19px; 

    width: 50%;

}



.openbtn span:nth-of-type(2) {

  top:28px;

    width: 50%;

}



/*activeクラスが付与されると線が回転して×に*/



.openbtn.active span:nth-of-type(1) {

    top: 20px;

    left: 16px;

    transform: translateY(6px) rotate(-30deg);

    width: 45%;

 background-color:#9E7130;    

}



.openbtn.active span:nth-of-type(2) {

    top: 32px;

    left: 16px;

    transform: translateY(-6px) rotate(30deg);

    width: 45%;

 background-color:#9E7130;    

}







}