@charset 'UTF8';  
/******************************************************************************/
/* BODY ヘッダ  */
/******************************************************************************/
#header_title1,#side_title1,#side_menu_ul li a{ font-family:'Copperplate Gothic Bold'; }
#side_menu_ul li a{font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif;}

#header *,#side_title1,#side_title2{ color:var(--gold); }
#header{
	top:0; left:0px; width:100vw; height:55px; position:fixed; z-index:9991;
	border-bottom:solid 1px var(--gold); background-color:var(--brun);
}
#header_title2{
	margin:6px 0 0 10px; line-height:1; font-size:40%;
}
#header_title1{
	margin-left:10px; width:7em; line-height:1; font-size:120%;
	font-weight:bold; 
}

#header_subtitle{
	top:0; left:10px; height:53px; position:absolute; z-index:9992;
	width:calc(100% - 3em); width:-webkit-calc(100% - 3em); 
	font-size:110%; color:var(--gold); background-color:var(--brun);
	line-height:2.2; vertical-align:middle;
}

@media screen and (min-width:550px){
	#header_subtitle{ 
		left:8.5em; width:calc(100% - 11em); width:-webkit-calc(100% - 11em); 
	}
}
@media screen and (min-width:800px){
	#header_subtitle{ 
		left:8em; width:calc(100% - 11em); width:-webkit-calc(100% - 11em); 
		text-align:center; background-color:rgb(255,255,255,0); 
	}
}

#contents{
	top:2.5em; left:0; position:fixed; overflow-x:hidden; overflow-y:auto;
	width:100vw; height:calc(100% - 55px); height:-webkit-calc(100% - 55px);
}

/******************************************************************************/
/* ハンバーガー・トリガ・ボタン */
/******************************************************************************/
#torigger_menu{	
	top:13px; right:20px; width:36px; height:28px;
	position:fixed; z-index:9998; cursor:pointer;
	display:inline-block; vertical-align:middle;
	transform:translateX(0); transition:transform .5s;
}
#torigger_menu:hover{ background-color:var(--brun1); }

/* #torigger_menu.active{} */
#torigger_menu span{
	display:inline-block;
	box-sizing:border-box;	position:absolute;
	left:0;
	width:100%;
	height:4px;
	background-color:var(--gold);
	transition:transform .5s;
}
#torigger_menu.active span{
	background-color:var(--gold);
	transition:transform .5s;
}
#torigger_menu span:nth-of-type(1){
	top:0;
	transition:transform .5s;
}
#torigger_menu.active span:nth-of-type(1){
	transform:translateY(12px) rotate(-45deg);
	background-color:var(--gold);
	transition:transform .5s;
}	
#torigger_menu span:nth-of-type(2){
	top:12px;
	transition:transform .5s;
}
#torigger_menu.active span:nth-of-type(2){
	opacity:0;
	transition:transform .5s;
}
#torigger_menu span:nth-of-type(3){
	bottom:0;
	transition:transform .5s;
}
#torigger_menu.active span:nth-of-type(3){
	transform:translateY(-12px) rotate(45deg);
	background-color:var(--gold);
	box-shadow:3px 4px 5px #ddd;
	transition:transform .5s;
}

/******************************************************************************/
/* サイド・メニュー  */
/******************************************************************************/
#side_title{ margin:16px 0 16px 20px; }
#side_title2{
	margin:6px 0 0 10px; line-height:1; font-size:50%;
}
#side_title1{
	margin-left:10px; line-height:1.4; font-size:100%;
}
#side_title:hover{ background-color:var(--brun1); }
#side_title:active{ background-color:var(--brun3); }
#side_title:active a{ color:var(--brun); }

/* サイド・メニュー */
#side_menu{
	top:0; left:0; width:300px; height:100%;
	position:fixed; z-index:9999; overflow-y:auto;
	background-color:var(--brun);
	border-right:groove 3px #807c7b;
	transform:translate(-300px);
	transition:all .5s;
}
#side_menu.open{
	transform:translateZ(0);
}
#side_menu li:first-child{
	border-top:groove 3px #807c7b;
}
#side_menu li{
	border-bottom:groove 3px #807c7b; 
	color:var(--gold); 
	line-height:2.5em;
	font-size:100%;
}
#side_menu li:hover{ background-color:var(--brun1); }
#side_menu li:active{ background-color:var(--brun3); }
#side_menu li:active a{ color:var(--brun); }

/* サイド・メニュー・バックグランド */
#side_bg{
	top:-10px; left:-10px; width:0; height:0; position:fixed;
	overflow-x:hidden; overflow-y:auto;
	content:'';	display:block;
	background-color:rgba(0, 0, 0, 0.75);
	z-index:9997; opacity:0; transition:opacity .5s;
}
#side_bg.open{
	top:0; left:0; width:100vw; height:100vh;
	opacity:1; transition:opacity .5s;
}
#side_bottom{ 
	left:15px; bottom:0; position:absolute; font-size:55%; 
}

/******************************************************************************/