@charset "UTF-8";
/* CSS Document */
/* ハンバーガーメニュー用
   ========================================================================== */

.openbtn{
	position:fixed;
	top:0;
	right: 0;
	z-index: 9999;
	cursor: pointer;
    width: 100px;
    height:100px;
	background:#91dbd0;
	border-radius: 0 0 0 30px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.1);
}
.openbtn::before{
	content: '';
	position: absolute;
	display: block;
	z-index: 9999;
	top: 100px;
	right: 30px;
	width: 30px;
	height: 30px;
}
	
/*×に変化*/	
.openbtn span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 30px;
    height: 3px;
	background-color: #fff;
  	width: 45%;
	text-transform: uppercase;
  }

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

.openbtn span:nth-of-type(2) {
	top:50px;
}

.openbtn span:nth-of-type(3) {
	top:60px;
	height: auto;
	background-color: transparent;
	text-align: center;
	font-size: 0.7em;
	font-weight: 500;
	font-style: normal;
	color: #fff;
}
.openbtn span:nth-of-type(4) {
	top:60px;
	height: auto;
	background-color: transparent;
	text-align: center;
	font-size: 0.7em;
	font-weight: 500;
	font-style: normal;
	color: #fff;
	display: none;
}


.openbtn.active span:nth-of-type(1) {
    top: 35px;
    left: 30px;
    transform: translateY(6px) rotate(-45deg);
    width: 40%;
}

.openbtn.active span:nth-of-type(2) {
	top: 48px;
    left: 30px;
    transform: translateY(-6px) rotate(45deg);
    width: 40%;
}

.openbtn.active span:nth-of-type(3){
    display: none;
}
.openbtn.active span:nth-of-type(4){
    display: block;
}

/* グローバルナビ用  
   ========================================================================== */

/*アクティブになったエリア*/
#g-nav.panelactive{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 9990;
	top: 0;
	width:100%;
    height: 100vh;
}

/*拡大*/
.circle-bg{
    position: fixed;
	z-index:999;
    width: 200px;
    height: 200px;
	border-radius: 50%;
    background: #f8f4e6;
	transform: scale(1);
    transform-origin: center;
	right:-100px;
    top:-100px;
    transition: 1s;
}

.circle-bg.circleactive{
    top:50vh;
	transform: scale(30);
}

/*ナビゲーションの縦スクロール*/
#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%);
	width: calc(100% - 30px);
	max-width: 350px;
    overflow: hidden;
}

/*背景が出現後にナビゲーションを表示*/
#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{
	list-style: none;
	text-align: left;
    position: relative;
	padding-left: 15px;
	border-bottom: solid 3px #eee;
	margin-top: 3px;
}
#g-nav li::before{
	position: absolute;
	top: 1rem;
	left: 0;
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: '\f061';
	padding-right: 10px;
	color: #91dbd0;
	transition: .5s;
}
#g-nav li::after{
    position: absolute;
	bottom: -3px;
	left: 0;
	width: 100%;
	height: 1px;
    border-bottom: solid 3px rgba(145,219,208,0.0);
	content: '';
	transform: translate3d(-100%,0,0);
    transition: .5s;
}

#g-nav li a{
	color:#1a1a1a;
	font-weight: 400;
	font-style: normal;
	text-decoration: none;
	padding:10px;
	display: block;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	margin-bottom: 0.5em;
	transition: .5s;
}
#g-nav li:hover::before{
	transform: translateX(5px);
}
#g-nav li:hover::after{
	border-bottom: solid 3px rgba(145,219,208,1.0);
	transform: translate3d(0,0,0);
}
#g-nav .chara{
	position: absolute;
	top: 5%;
	left: 5%;
}
#g-nav .chara img{
	width: 150px;
}