@charset "UTF-8";

/*----------------------------------------------------------------------------*/
/* JOOX　乾癬・掌蹠膿疱症講座：スタイルシート (2025/12/12 update) */
/*----------------------------------------------------------------------------*/

.header{
	top:0;
	left:0;
	height:60px;
	width:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:0px 0px;
	background-color:transparent;
	position:fixed;
	z-index:10;
	}

.logo{
	margin:0px 30px 0px 0px;
	text-align:left;
	}

.logo img{
	width:280px;
	height:50px;
	}

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

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

.drawer_open_base{
	width:60px;
	height:60px;
	display:flex;
	justify-content:center;
	align-items:center;
	position:absolute;
	right:0px;
	z-index:100;
	background-image:url("../images/navi_button.png");
	}


/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after{
	content: '';
	display:block;
	height:3px;
	width:30px;
	border-radius:5px;
	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:100%;
	height:100%;
	position: fixed;
	top:0%;
	left:100%; /* メニューを画面の外に飛ばす */
	z-index:10;
	background-color:rgba(200,220,230,0.8);
	transition: .5s;
	text-align: center;
	padding-top: 20px;
	}

.nav_list_1{
	width:280px;
	margin:70px auto 0px auto;
	}

.nav_list_1 a{
	display:block;
	margin:0px 10px 15px 10px;
	padding:8px 0px 8px 30px;
	font-size:20px;
	line-height:20px;
	text-align:left;
	background-color:#ffffff;
	border-radius:30px;
	color:#000000;
	text-decoration:none;
	}

.nav_list_1 a .navi_blue{
	font-size:16px;
	line-height:30px;
	text-align:left;
	color:#00aaff;
	text-decoration:none;
	}

.nav_list_2{
	width:280px;
	margin:20px auto 0px auto;
	text-align:center;
	}

.nav_list_2 a img{
	margin:0px 10px 10px 10px;
	padding:0px;
	}


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

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