/* 検索窓*/
#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 200;
    /*ナビのスタート位置と形状*/
  top:0px;
    right: -100%;
  width:410px;
    height: 55px;/*ナビの高さ*/
  background: #ffffff;
    /*動き*/
  transition: all 0s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    right: 0;
}

/*ナビゲーション*/
#g-nav form {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 100;
    top:50%;
    right: 60px;
    transform: translate(0%,-50%);
}

#g-nav .q{
	font-size: 16px;
	border: 1px solid #999;
	border-radius: 3px;
	padding: 4px;
	width: 250px;
}

#g-nav .send{
	background: #002E58;
	margin: 0 15px 0 2px;
	color: #FFF;
	font-size: 14px;
	border: 0px;
	border-radius: 3px;
	padding: 3px 8px;
	vertical-align: middle;
}


/* ボタンのためのCSS */
.openbtn1 {
	position:fixed;
    z-index: 300;/*ボタンを最前面に*/
	top:10px;
	right: 23px;
	cursor: pointer;
    width: 35px;
    height:35px;
    background:url("https://www.bbsec.co.jp/img/top/search_petabit.png") no-repeat center;/*虫眼鏡アイコンを背景に表示*/
	background-size: 30px 30px;
}

	
@media screen and (max-width: 800px) {
    .openbtn1 {
		display: none;
	}
}

/* モバイル */
.petabit_mobile {
	margin: 3px auto 3px;
	text-align: center;
}

.petabit_mobile .q{
	font-size: 16px;
	border: 1px solid #999;
	border-radius: 3px;
	padding: 4px;
	width: 250px;
}

.petabit_mobile  .send{
	background: #002E58;
	margin: 0 15px 0 2px;
	color: #FFF;
	font-size: 14px;
	border: 0px;
	border-radius: 3px;
	padding: 3px 8px;
	vertical-align: middle;
}

@media screen and (min-width: 769px) {
    .petabit_mobile {
		display: none;
	}
}
/* End 検索窓 */

/* BBSecロゴ */
.logo_wrapper {
	border-top: none;
  width: 100%;
  max-width: 1200px;
	top:0;
	margin: auto;
	background: #002C58;
}
.logo {
	position:fixed;
	display: flex;
	z-index: 900;
	margin: 2px 0 0 10px;
}
.logo img{
	width: auto;
  height: 45px;
  padding-top: 3px;
}


/* ナビメニュー固定 */
#header-gb {
  position: fixed;
  width: 100%;
  height: 55px;
  z-index: 30;
  background: #002C58;
}

/* navimenu */
.nav {
	position: sticky;
	top:0;
	max-width: 1200px;
	height: 55px;
	margin: auto;
	background: #002C58;
	z-index:10;
}

.header_nav {
	width: 100%;
	margin: auto;
}

.header_nav .nav_service {
	float:left;
	position: absolute;
	top: 18px;
	right: 10px;
	display: inline-block;
	text-align:right;
	list-style: none;
}

@media screen and (max-width: 768px) {
    .header_nav .nav_service {
		display: none;
	}
}

.header_nav .nav_service li {
  float:left;
	width:auto;
	text-align:center;
	margin: 0 0 0 50px;
	position:relative;
	font-size: 16px;
}

.header_nav .nav_service li a {
	color: #ffffff;
	font-size: 16px;
	display: flex-end;
  text-decoration: none;
}

.header_nav .nav_service li a:hover{
	text-decoration: underline;
}


/* support */
.CONTACT_US {
	position:fixed; 
  top: -5px;
  left: 10px;
  padding: 5px;
  font-weight: bold;
	background-color: #fff;
  text-align:center;
  font-size: 14px !important;
}

.CONTACT_US a {
  z-index: 40;
  text-decoration:none;
  color: #002C58 !important;
  font-size: 14px !important;
}

.CONTACT_US a:hover {
    text-decoration: underline;
}


@media screen and (max-width: 768px) {
.CONTACT_US {
		display: none;
	}
}

/* アンカー位置調整 */
a.anchor{
    display: block;
    padding-top: 60px;
    margin-top: -60px;
}

/* ハンバーガーメニュー */
.hamburger-menu{
  vertical-align: center;
  height: 53px;
  width: 62px;
}

@media screen and (min-width: 769px) {
	.hamburger-menu {
		display: none;
	}
}

/* 位置と色 */
.menu-btn{
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  height: 55px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 60;
  background-color: #002C58;
}

/* メニュー線（本体と before と after で３本表示する） */
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after{
  /* 白線 */
  content: '';
  display: block;
  height: 3px;
  width: 27px;
  border-radius: 3px;
  background-color: #ffffff;
  position: absolute;
}

/* before を少し上にずらして描画 */
.menu-btn span:before{
  bottom: 8px;
}
/* after を少し下にずらして描画 */
.menu-btn span:after{
  top: 8px;
}


/* メニューをオープンしたら三本線を×にする */
#menu-btn-check:checked ~ .menu-btn span{
  /* メニューオープン時は三本線の真ん中の線を透明にする */
  background-color: rgba( 255, 255, 255, 0 ); 
}

#menu-btn-check:checked ~ .menu-btn span::before{
  /* メニューオープン時は三本線の上の線を 45 度傾ける */
  bottom: 0;
  transform: rotate( 45deg ); 
}

#menu-btn-check:checked ~ .menu-btn span::after{
  /* メニューオープン時は三本線の下の線を -45 度傾ける */
  top: 0;
  transform: rotate( -45deg ); 
}

/* チェックを非表示にする */
#menu-btn-check{
  display: none;
}

/* メニュー装飾 */
.menu-content{
  width: 100%;
  height: auto;
  position: fixed;
  top: 55px;
  right: -100%; /* メニューを画面外へ */
  z-index: 50; /* 下のコンテンツの上にかぶせて表示する */
  background-color: #002C58;
  border-top: solid 1px #ffffff;
  transition: all 0; /* アニメーションで出し入れする秒数 */
}
.menu-content ul{
  padding: 5px 10px 15px 10px;
}
.menu-content ul li{
  border-bottom: solid 1px #ffffff; /* メニューアイテムの区切り線 */
  list-style: none;
}
.menu-content ul li a{
  display: block;
  width: 100%;
  font-size: 14px;
  text-decoration: none;
  color: #ffffff;
  padding: 10px 10px 10px 10px;
  position: relative;
}

/* メニューの出し入れ */
#menu-btn-check:checked ~ .menu-content{
  left: 0;  /* チェックされたら画面内へ */
}