@charset "utf-8";

/*========= ナビゲーションドロップダウンのためのCSS ===============*/

/*==ナビゲーション全体の設定*/
nav{color:#333; text-align: center;}

/*ナビゲーションを横並びに*/
nav ul{list-style: none; display: flex; justify-content: center;}

/*2階層目以降は横並びにしない*/
nav ul ul{display: block;}

/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li{position: relative; padding: 0 10px;}
nav ul li.daughter{padding: 0;}

/*ナビゲーションのリンク設定*/
nav ul li a{display: block; text-decoration: none; color: #fff; padding:20px 35px; transition:all .3s;}
nav ul li li a{padding:10px 35px;}
nav ul li a:hover{color:#fff;}

a.m-pointer {cursor: pointer;}

/*==矢印の設定*/

/*2階層目を持つliの矢印の設定*/
nav ul li.has-child::before {content:''; position: absolute; left:10px; top:20px; width:6px; height:6px; border-top: 1px solid #222; border-right: 1px solid #222; transform: rotate(135deg);}
nav ul li.has-child:hover::before {transform: rotate(-45deg);}
/* ▼ active時（開いているとき）：上向き固定 */
nav ul li.has-child.active::before {transform: rotate(-45deg);}

/*3階層目を持つliの矢印の設定*/
nav ul ul li.has-child::before {content:''; position: absolute; left:6px; top:17px; width:6px; height:6px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg);}

/*== 2・3階層目の共通設定 */

/*下の階層を持っているulの指定*/
nav li.has-child ul{position: absolute; left:0; top: 62px; z-index: 4; background: rgba(255,255,255,0.7); width: 220px; visibility: hidden; opacity: 0; transition: all .3s;}

/*hoverしたら表示*/
nav li.has-child:hover > ul,
nav li.has-child ul li:hover > ul,
nav li.has-child:active > ul,
nav li.has-child ul li:active > ul{visibility: visible; opacity: 1;}

/*ナビゲーションaタグの形状*/
nav li.has-child ul li a{color: #fff; border-bottom:solid 1px rgba(255,255,255,0.9);}
nav li.has-child ul li:last-child > a{border-bottom:none;}
nav li.has-child ul li a:hover,
nav li.has-child ul li a:active{background: rgba(213,213,213,0.7);}


/*==3階層目*/

/*3階層目の位置*/
nav li.has-child ul ul{
  top:0;
  left:182px;
  background:#66ADF5;
}

nav li.has-child ul ul li a:hover,
nav li.has-child ul ul li a:active{
  background:#2c83b0;
}



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

/*==ヘッダーの形状*/
#header{position: fixed; z-index: 999; height: 80px; width:100%; background-color: #009cff00; transition: 0.3s;}
#header .container {display: flex; justify-content: space-between; align-items: center;	position: relative;}
#header.headbg {background-color: #f5f7ff; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}

@media screen and (max-width:1200px){
	#header {padding: 0 10px;}
}

/*==ヘッダーのテキストナビゲーションの形状*/
.grand-navigation ul {list-style: none; display: flex; flex-wrap: nowrap; justify-content: center;}
.grand-navigation ul li ul {list-style: none; display: block;}
.grand-navigation ul li a {display: block; text-decoration: none; color: #222; padding: 10px;}
.grand-navigation ul li a.list-color {color: #222;}
.grand-navigation ul li.current a, .grand-navigation ul li a:hover{color: #3e7062;}
.grand-navigation li.active > a {}

.scroll-nav {display: none;}


@media screen and (max-width:991px){
	#header {height: 60px;}
	.scroll-nav {display: block; position: fixed; top: 0; right: 8px; width: 60px; height: 60px; z-index: 999;}
	.logo {}
	
	#g-navi.panelactive {width: 100%; margin-top: 50px;}
	.grand-navigation.panelactive ul li.current a, .grand-navigation.panelactive ul li a:hover {color: #e8d3d1;}
	.circle-bg {
		position: fixed;
		z-index:3;
		/*丸の形*/
		width: 100px;
		height: 100px;
		border-radius: 50%;
		background: rgba(10,26,75,.9);
		/*丸のスタート位置と形状*/
		transform: scale(0);/*scaleをはじめは0に*/
		right:-50px;
		top:-50px;
		transition: all .6s;/*0.6秒かけてアニメーション*/
	}
	.circle-bg.circleactive{transform: scale(50);/*クラスが付与されたらscaleを拡大*/}
	
	#g-navi ul{
		opacity: 0;/*はじめは透過0*/
		/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
		position: absolute;
		z-index: 999;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		transition: all .3s;
	}
	#g-navi.panelactive ul {opacity: 1; display: block; width: 100%; position: relative; top: initial; left: initial; transform: none; background: none;}
	nav ul li.has-child::before {display: none;}
	nav ul li {text-align: left; padding: 0 20px;}
	.grand-navigation ul li a {padding: 5px 10px; color: #fff;}
	.grand-navigation ul li a span {display: none;}
	.grand-navigation ul li a.list-color {color: #fff; padding: 5px 10px 5px 25px;}
	
	nav{padding: 0;}
	nav ul{display: block;}

	nav li.has-child ul, nav li.has-child ul ul{position: relative; left:0; top:0; width:100%; visibility:visible;/*JSで制御するため一旦表示*/ opacity:1;/*JSで制御するため一旦表示*/ display: none;/*JSのslidetoggleで表示させるため非表示に*/ transition:none;/*JSで制御するためCSSのアニメーションを切る*/}
	nav ul li a{border-bottom:1px solid #ccc;}

/*矢印の位置と向き*/
	nav ul li.has-child::before{left:20px;}
	nav ul ul li.has-child::before{transform: rotate(135deg); left:20px;}
	nav ul li.has-child.active::before{transform: rotate(-45deg);}
	.grand-navigation ul li a.list-color {border-bottom: dotted 1px rgba(255, 255, 255, 0.6);}
	nav li.has-child ul li:last-child > a {border-bottom: dotted 1px rgba(255, 255, 255, 0.6);}
}


/*==768px以下の形状*/

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





/*========= ボタンのためのCSS ===============*/
/*ボタン全体の形状*/
.openbtn1{position:fixed; top:8px; right: 15px; z-index: 999; cursor: pointer; width: 45px; height:45px; font-size: 0.9em;}

/*ボタンのアイコン設定*/
.openbtn1 span{display: inline-block; transition: all .4s; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); height: 2px; border-radius: 2px; background-color: #222; width: 80%;}
.lowerlayer-nav .openbtn1 span {background-color: #fff;}
.lowerlayer-nav.navbg .openbtn1 span {background-color: #222;}

.openbtn1 span:nth-of-type(1) {top:8px;}
.openbtn1 span:nth-of-type(2) {top:20px; width: 80%;}
.openbtn1 span:nth-of-type(3) {top:32px; width: 80%;}


/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn1.active span:nth-of-type(1) {top: 16px; left: 7px; transform: translateY(6px) rotate(-45deg); width: 30px; background-color: #fff;}
.openbtn1.active span:nth-of-type(2) {opacity: 0;}
.openbtn1.active span:nth-of-type(3){top: 28px; left: 7px; transform: translateY(-6px) rotate(45deg); width: 30px; background-color: #fff;}

/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


/*========= ロゴのためのCSS ===============*/
.openbtn2 {position: fixed; top: 20px;left: 15px; z-index: 999;}
.openbtn2 img {width: 350px; height: auto;}

@media screen and (max-width:490px){
	.openbtn2 img {width: 62vw;}
}