@charset "utf-8";
/*===========================================================================*/
/*ewf.co.jp*/
/*===========================================================================*/
/*#menubar
/*===========================================================================*/
/*メニューを囲むブロック*/
#menubar {
	order: -1;		/*左側に表示させる。右側がいいならこの１行を削除。*/
	width: 10rem;
}
/*---------------------------------------------------------------------------*/
#menubar li {
	border-bottom: 1px solid var(--primary-text-color);	
}
#menubar li a {
	padding: 0.5rem 0 0.5rem 1rem;	
}
/*---------------------------------------------------------------------------*/
#menubar h3 {
	padding: 0.5rem 0;
	margin: 0 ;
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	text-align: center;	
}
/*変更不要*/
#menubar {opacity: 0;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}
.large-screen #menubar {opacity: 1;}
.small-screen #menubar.display-none {display: none;}
.small-screen #menubar.display-block {display: block;opacity: 1;}
#menubar_hdr.display-none {display: none;}


/*===========================================================================*/
/*#menubar（small-screen）
/*===========================================================================*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 100;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 100px;	/*上に空ける余白。ハンバーガーアイコンと重ならない為*/
	color: var(--primary-color);
	background: var(--primary-inverse-color);
	animation: animation1 0.2s both;
}
/*--------------------------------*/
.small-screen #menubar li {
	border: 1px solid var(--primary-color);
	margin: 1rem;			/*メニューの外側に空けるスペース*/
	border-radius: 5px;		/*角を丸くする指定*/
}
.small-screen #menubar a {
	padding: 1rem 2rem;	
	font-size: 1.3rem;
}
/*--------------------------------*/
/*#menubar_hdr
/*--------------------------------*/
#menubar_hdr {
	animation: opa1 0.3s 0.5s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	top: 10px;		/*上からの配置場所*/
	right: 15px;	/*右からの配置場所*/
	width: 50px;	/*幅*/
	height: 50px;	/*高さ*/
	padding: 15px;	/*ブロック内の余白*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: transform 0.5s;
	background: rgba(0,0,0,0.6);	/*背景色*/
}
/*--------------------------------*/
/*変更不要*/
#menubar_hdr div {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/*--------------------------------*/
/*バーの設定*/
#menubar_hdr div span {
	display: block;
	width: 100%;
	height: 2px;			/*線の太さ*/
	background-color: #fff;	/*線の色*/
	border-radius: 2px;		/*コーナーを少しだけ丸く*/
	transition: all 0.5s ease-in-out;
	position: absolute;
}
/*--------------------------------*/
/*変更不要*/
#menubar_hdr div span:nth-child(1) {top: 0;}
#menubar_hdr div span:nth-child(2) {top: 50%;transform: translateY(-50%);}
#menubar_hdr div span:nth-child(3) {bottom: 0;}
#menubar_hdr.ham div span:nth-child(1) {top: 50%;transform: translateY(-50%) rotate(45deg);}
#menubar_hdr.ham div span:nth-child(2) {opacity: 0;}
#menubar_hdr.ham div span:nth-child(3) {top: 50%;transform: translateY(-50%) rotate(-45deg);}

/*===========================================================================*/
/*footer
/*===========================================================================*/
footer {
	clear: both;
	padding: 20px 0px 0px 0px;
	font-size: 0.7rem;
	background: var(--primary-inverse-color);
	margin-top: 0px;
    text-align: center
}
footer a {
	text-decoration: none;
	color: var(--primary-color);
    text-align: center
}
footer a:hover {
	color: var(--color_yellow);
	transform: scale(0.92);
	transition: .2s;
}
@media screen and (min-width:380px) {
	footer {
		font-size: 0.75rem;
	}
}
@media screen and (min-width:640px) {
	footer {
		font-size: 0.8rem;
	}
}

/*===========================================================================*/
/*pagetop_show
/*===========================================================================*/
/*main.js*/
.pagetop-show {
	display: block;
}
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0,0,0,0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
}
/*===========================================================================*/