@charset "UTF-8";

/*----------------------------------------------------------------------------*/
/* JOOX　BTOC：スタイルシート (2025/07/05 update) */
/*----------------------------------------------------------------------------*/

.header{
	top:0;
	left:0;
	height:60px;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0px 0px;
	background-color:rgba(0,120,240,0.8);
	position:fixed;
	z-index:10;
	}

.logo{
	margin:0px auto 0px auto;
	text-align:center;
	}

.logo img{
	width:145px;
	height:45px;
	}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden{
	display:none;
	}

/* ハンバーガーアイコンの設置スペース */
.drawer_open{
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	right:30px;
	z-index:11;/* 重なり順を一番上にする */
	cursor:pointer;
	}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after{
	content: '';
	display:block;
	height:3px;
	width:30px;
	border-radius:3px;
	background:#ffffff;
	transition:0.5s;
	position:absolute;
	}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before{
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after{
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span{
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}


/* メニューのデザイン*/
/* 上から表示 ------------*/
.XXX_nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  bottom: 100%;
  left: 0%; /* メニューを画面の外に飛ばす */
  z-index:10;
  background: rgb(110, 110, 110);
  transition: .5s;
  text-align: center;
  padding-top: 20px;
}

/* 右から表示 ------------*/
.nav_content {
	width: 70%;
	height: 100%;
	position: fixed;
	top:0%;
	left:100%; /* メニューを画面の外に飛ばす */
	z-index:10;
	background-color:rgba(0,120,240,0.9);
	transition: .5s;
	text-align: center;
	padding-top: 20px;
	}

ul.nav_list{
	margin:50px 20px 0px 20px;
	list-style:none;
	}

ul.nav_list li{
	margin:0px 10px 5px 0px;
	list-style:none;
	font-size:20px;
	line-height:30px;
	text-align:left;
	}

ul.nav_list li a{
	display:block;
	background-color:rgba(0,0,90,0.2);
	color:#ffffff;
	font-family:HiraKakuProN-W3,"ヒラギノ角ゴ Pro W3";
	padding:5px 0px 5px 10px;
	text-decoration:none;
}

/* アイコンがクリックされたらメニューを表示 */
/* 上から表示 ------------*/
#XXX_drawer_input:checked ~ .nav_content {
  bottom: 0;/* メニューを画面に入れる */
}

/* 右から表示 ------------*/
#drawer_input:checked ~ .nav_content{
	left:30%;
	}


/* Anchor ------------------------------------------*/

#anchor_btoc_document,
#anchor_btoc_seminar{
	margin-top:-50px;
	padding-top:50px;
	}