@charset "utf-8";
/*アニメーションなど設定*/

@media screen and (max-width:990px) {
    #g-nav.panelactive {
        width:100%;
        height: 100vh;
    }

    .circle-bg {
        position: fixed;
        z-index:3;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #013a24;/*#00973b*/
        transform: scale(0);
        bottom:-50px;
        left:calc(50% - 50px);/*50%から円の半径を引いた値*/
        transition: all .6s;
    }

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

    /*ナビゲーションの縦スクロール*/
    #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;
        position: absolute;
        z-index: 999;
        top:40%;
        left:50%;
        transform: translate(-50%,-40%);
    }

    /*背景が出現後にナビゲーションを表示*/
    #g-nav.panelactive ul {
        opacity:1;
    }
    #g-nav.panelactive ul li {
        animation-name:gnaviAnime;
        animation-duration:1s;
        animation-delay:.2s;
        animation-fill-mode:forwards;
        opacity:0;
    }
}

@keyframes gnaviAnime{
    0% {
    opacity: 0;
    transform: translateY(100px);
    }
    100% {
    opacity: 1;
    transform: translateY(0);
    }
}

/*========= スマホopenbtn ========*/
.openbtn {
    display: none;
}

@media screen and (max-width:990px) {
    .openbtn {
        display: block;
        position: fixed;
        z-index: 9999;
        cursor: pointer;
        top:10px;
        right:10px;
        width: 45px;
        height: 45px;
        border: 1px solid #ddd;
        background-color: rgba(0,0,0,.4);
    }

    .openbtn span {
        display: inline-block;
        transition: all .4s;
        position: absolute;
      }
    .openbtn span:nth-of-type(1),
    .openbtn span:nth-of-type(3) {
        height: 1px;
        background: #ddd;
        width: 74%;
        left: 6px;
     }

    .openbtn span:nth-of-type(1) {
        top: 10px;
    }
    .openbtn span:nth-of-type(2) {
        top: 14px;
        left: 6px;
        font-size: 0.55rem;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #eee;
    }
    .openbtn span:nth-of-type(3) {
        top: 33px;
    }
    .openbtn.active span:nth-of-type(1) {
        top: 16px;
        left: 15px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
    }
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    .openbtn.active span:nth-of-type(3){
        top: 28px;
        left: 15px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
    }
}
@media screen and (max-width:540px) {
    .openbtn {
        top:60px;
    }
}


/*==================================
 ボタン 
===================================*/
.btn a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 290px;
	height: 70px;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	transition: 0.3s;
}
.btn a:hover {
	color: #fff;
}
.btn01 a {
	background-color: #111;
}
.btn01 a:hover {
    color: #fff;
    /*background: #006428;*/
background: rgb(0,100,40);
background: linear-gradient(90deg, rgba(0,100,40,1) 0%, rgba(0,5,0,1) 25%, rgba(0,0,33,1) 75%, rgba(0,67,133,1) 100%);
}
.btn01 a::after {
    content: '';
	position: absolute;
	top: 50%;
	right: 25px;/*30px*/
	transform: rotate(45deg) translateY(-50%);
	width: 8px;
	height: 8px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff;/*#F7E500*/
}
.btn01 a:hover::after {
	border-color: #fff #fff transparent transparent;
}
.btn01 i {
    margin-right: 5px;
}


.btn02 a {/*アクアコート*/
	background-color: #004386;
    color: #fff;
}
.btn02 a:hover {
	background-color: #1b90bf;
}
.btn02 a::after {
    content: '';
	position: absolute;
	top: 50%;
	right: 24px;/*30px*/
	transform: rotate(45deg) translateY(-50%);
	width: 8px;
	height: 8px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff;
}
.btn02 a:hover::after {
	border-color: #fff #fff transparent transparent;
}


.btn03 a {/*グリーンコート*/
	background-color: #006428;
    color: #fff;
}
.btn03 a:hover {
	background-color: #58b183;
}
.btn03 a::after {
    content: '';
	position: absolute;
	top: 50%;
	right: 24px;/*30px*/
	transform: rotate(45deg) translateY(-50%);
	width: 8px;
	height: 8px;
	border-width: 2px 2px 0 0;
	border-style: solid;
	border-color: #fff;
}
.btn03 a:hover::after {
	border-color: #fff #fff transparent transparent;
}


/*page-top*/
#page-top a {
	display: flex;
	justify-content:center;
	align-items:center;
	width: 50px;
	height: 50px;
	color: #6C6C6C;
    border: 1px solid #6C6C6C;
	transition:all 0.3s;
}

@media screen and (min-width:769px) {
    #page-top a:hover {
        background: #34373a;
    }
}

#page-top {
	position: fixed;
	right: 10px;
	z-index: 2;
	cursor: pointer;
	opacity: 0;
	transform: translateY(100px);
}

/*　上動き　*/
#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
	animation-delay:0s;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下動き　*/
#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

/* ぼかしから出現 */
.blur {
	animation-name: blurAnime;
	animation-duration: .6s;
	animation-fill-mode:forwards;
}
@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.blurTrigger{
    opacity: 0;
}

/*枠線が伸びて出現*/
.lineTrigger {
  position: relative;
  opacity:0;
}
.lineTrigger.lineanime{
	animation-name:lineAnimeBase;
	animation-duration:.1s;
	animation-fill-mode:forwards;
}

@keyframes lineAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*上下線*/
.lineTrigger::before,
.lineTrigger::after{
  position: absolute;
  content: '';
  width:0;
  height:1px;
  background:#444;
}

/*左右線*/
.line2::before,
.line2::after{
  position: absolute;
  content: '';
  width: 1px;
  height:0;
  background:#444;
}

/*上線*/
.lineTrigger::before {
	top:0;
	left:0;
}
.lineTrigger.lineanime::before {
	animation: lineAnime .1s linear 0s forwards;
}

/*右線*/
.line2::before{ 
	top:0;
	right:0;
}
.lineTrigger.lineanime .line2::before {
	animation: lineAnime2 .1s linear .1s forwards;
}

/*下線*/
.lineTrigger::after { 
	bottom:0;
	right:0;
}

.lineTrigger.lineanime::after {
	animation: lineAnime .1s linear .2s forwards;
}

/*左線*/
.line2::after{ 
	bottom:0;
	left:0;
}

.lineTrigger.lineanime .line2::after {
	animation: lineAnime2 .1s linear .3s forwards;
}

@keyframes lineAnime {
	0% {width:0%;}
    100%{width:100%;}
}
@keyframes lineAnime2 {
	0% {height:0%;}
    100%{height:100%;}
}

/*枠線内側の要素*/
.lineTrigger.lineanime .lineinappear{
	animation: lineInnerAnime .2s linear .4s forwards;
	opacity: 0;	
}

@keyframes lineInnerAnime{
	0% {opacity:0;}
    100% {opacity:1;}
}