@charset "utf-8";

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

/* ハンバーガーメニュー開いたあとの部分なので
最初消しておかないと
フレックスの時あるもの扱いでズレる（追記） */
#g-nav{
    display: none;
}


/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
	/* top: 0; */
    bottom: 0;
	width:100%;
    height: 100vh;
    margin: 0 auto;
    /* ハンバーガーメニュー開いたあとの部分なので
開いてアクティブになったら復活させる（追記） */
    display: block;
}

/*丸の拡大*/
.circle-bg{
    position: fixed;
	z-index:3;
    /*丸の形*/
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* background: #eeece7; */
    background-image: url(../img/dairiseki05.jpg);
    background-size:cover;
    /*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
    right:-50px;
    top: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;
    left: 0;
    /* bottom: -6rem; */
    /* top: 0;
  bottom: 0; */
}

#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%);
}

/*背景が出現後にナビゲーションを表示*/
#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 li{
	text-align: center; 
	list-style: none;
}

#g-nav li a{
	color: #494949;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
    text-align: center;
    /* font-size: 4rem; */
    font-size: 3.2rem;
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    line-height: 0.8;
    letter-spacing: 0.1em;
    padding-bottom: 6.4rem;
}


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

/*==================================================
　5-2-1 3本線が×に
===================================*/
/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	/*ボタン内側の基点となるためrelativeを指定。
追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
	position: relative;
	/* background:#57a2c7; */
	cursor: pointer;
    width: 50px;
    height:50px;
	border-radius: 5px;
    z-index: 9999;
    margin: 0 15px;
}

/*ボタン内側*/
.openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
	/* background: #fff; */
  	width: 45%;
  }

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

.openbtn span:nth-of-type(2) {
	top:23px;
    background: #fff
}

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

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

.openbtn.active span:nth-of-type(1) {
    top: 18px;
    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: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

/* scroll固定 */
.noscroll{
    overflow: hidden;
  }

/* タブレット版 */
  @media screen and (min-width:481px) and (max-width:1280px){
    .openbtn{
        width: 8rem;
        height: 8rem;
        /* padding: 0 1.6rem; */
        padding: 0 2.4rem;
        margin: 0;
    }

    .openbtn span {
        /* width: 60%; */
        width: calc(100% / 8 * 3);
        left: 1.6rem;
    }

    .openbtn span:nth-of-type(1) {
        /* top: 1.6rem; */
        top: 2.4rem;
    }

    .openbtn span:nth-of-type(2) {
        top: 3.85rem;
    }

    .openbtn span:nth-of-type(3){
        /* top: 6.1rem; */
        top: 5.3rem;
    }
}
/* スマホ版 */

@media screen and (max-width:480px){
    .openbtn{
        /*ボタン内側の基点となるためrelativeを指定。
    追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
        width: 60px;
        height:60px;
        margin: 0;
    }

    /*ボタン内側*/
    .openbtn span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 16.5px;
    height: 3px;
    border-radius: 2px;
	/* background: #fff; */
  	width: 45%;
  }

  .openbtn span:nth-of-type(1) {
	top:16.5px;
    background: green
}

.openbtn span:nth-of-type(2) {
    top: 28.5px;
    background: #fff;
}

.openbtn span:nth-of-type(3) {
    top: 40.5px;
    background: red;
}

#g-nav li a {
    font-size: 2.4rem;
    padding-bottom: 4.8rem;
}
}