@charset "UTF-8";
/* default */

/*	reset
------------------------------------------------------------ */ 
@import url("reset.css");

/*	elements
------------------------------------------------------------ */ 
@import url("elements.css");

/*	form
------------------------------------------------------------ */ 
@import url("form.css");



/* links
------------------------------------------------------------ */
a.link_bold { text-decoration: none; color: #000; font-weight: bold; }

/* body
------------------------------------------------------------ */
body {
	background: #c7c7c7;
	font-size:14px;
	line-height:160%;
	color:#000;
	font-family: YuGothic,Helvetica,"serif";
}
body.pink { background: #ffeefc;}
body.sky { background: #e5f9ff;}

/* header
------------------------------------------------------------ */
header {
	width: 100%;
	position: sticky;
	top: 0;
	background:rgba(255,255,255,0.8);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding: 10px;
	box-sizing: border-box;
	z-index: 1;
}
header ul { text-align: right; margin: 8px 0 4px;}
header ul li { margin-right: 10px; display: inline;}
header ul li:last-child { margin-right: 0;}
header ul li a { padding: 8px 16px; border-radius: 10px; text-decoration: none; background:#fff; font-weight: normal; color: #000;}
header ul li a.selected { background: #333; color: #fff;}
header ul li.no_link { padding: 10px 20px; border-radius: 10px; background:#fff; color: #999;}
header #btn_header_close { width: 40px; height: 10px; margin: 0 auto 10px;}

header.edit {
	padding: 0px;
}

/*	left btn
------------------------------------------------------------ */ 
.left_btn {
	position: fixed;
	top: 24px;
	left: 20px;
	width: 25px;
	height: 20px;
	z-index: 4;
}
#btn-check:checked ~ .left_window {left: 0;}


/*	left box
------------------------------------------------------------ */ 
.left_window {
	width: 30%;
	height: 100%;
	position: fixed;
	top: 0;
	left: -100%;
	z-index: 3;
	background:rgba(255,255,255,0.95);
	transition: all 0.5s;/*アニメーション設定*/
	border-right: 1px solid #dcdcdc;
	padding: 80px 20px 0 20px;
}
.left_window h3 { font-size: 120%; margin-bottom: 20px;}
.left_window ul { text-align: left;}
.left_window ul li {border-bottom: solid 1px #e0e0e0;}
.left_window ul li a {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	padding: 10px;
	font-weight: normal;
	color: #000;
}

/*	home
------------------------------------------------------------ */
#home { width: 36px; height: 36px; position: fixed; top: 12px; left: 70px; z-index: 2;}

/*	log in out
------------------------------------------------------------ */
#log_in_out { width: 36px; height: 36px; position: fixed; top: 12px; left: 116px; z-index: 2;}

/*	project id
------------------------------------------------------------ */
#project_id { position: fixed; top: 22px; left: 180px; z-index: 2;}
#project_id>ul {display: flex;}
#project_id>ul li { margin-right: 8px;}
#project_id>ul li::before{
 content: "|";
 margin-right: 8px;
}
#project_id>ul li:first-child::before{
 content: "";
}


/* page top, back
------------------------------------------------------------ */ 
#pageTop {
	position: fixed;
	bottom: 20px;
	right: 20px;
	border-radius: 50%;
	background:rgba(0,0,0,0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	z-index:1000;
}
#pageBack {
	position: fixed;
	bottom: 20px;
	left: 20px;
	border-radius: 50%;
	background:rgba(0,0,0,0.2);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}