@charset "utf-8";

/*----------------------------------------------------------------
 MainLayout
 -----------------------------------------------------------------
 c/p
 <link href="./common/css/layout.css" rel="stylesheet" type="text/css" media="screen,print" />
----------------------------------------------------------------*/
/*----------------------------------------------------------------
 base
----------------------------------------------------------------*/
html,body{
	font-size			: 62.5%; /* 10px */
}
body{
	background			: var(--bg-color);
	font-family			: var(--font-sans);
	font-size			: var(--font-size);
	line-height			: var(--line-height);
	color				: var(--text-color);
}


/* inline element
-----------------------------------------------------*/

/* link
----------------------------------*/
a{
	text-decoration		: none;
	color				: var(--link-color);
}


/*-----------------------------------------------------
 class
-----------------------------------------------------*/

/* separater line
-----------------------------------------------------*/
hr.separater{ display: none; }

/* anchor(pagetop)
-----------------------------------------------------*/
p.anchor{
	visibility			: hidden;
	position			: absolute;
	top					: 0px;
	left				: 0px;
}

/* pagetop
-----------------------------------------------------*/
.pagetop{
	position			: relative;
	text-align			: center;
	background			: var(--base-color);
}
.pagetop::before{
	content				: "";
	position			: absolute;
	left				: 50%;
	top					: -20px;
	transform			: translateX(-50%);
	display				: block;
	width				: 1px;
	height				: 40px;
	background			: var(--link-color);
}
.pagetop::after{
	content				: "";
	position			: absolute;
	left				: 50%;
	bottom				: 15px;
	transform			: translateX(-50%);
	display				: block;
	width				: 36px;
	height				: 60px;
	background			: url(../images/dracula.png) center center /contain no-repeat;
}
.pagetop a{
	display				: block;
	height				: 140px;
	padding				: 28px 0 0 0;
	font-family			: var(--font-serif);
	font-size			: 18px;
}



/*----------------------------------------------------------------
 layout
----------------------------------------------------------------*/

/*-----------------------------------------------------
 wrap
-----------------------------------------------------*/
.wrap{
	position			: relative;
}

#wrap{
	width				: 100%;
}

/*-----------------------------------------------------
 area
-----------------------------------------------------*/
.area{
	position			: relative;
	clear				: both;
}
#header{
	position			: sticky;
	top					: 0;
	z-index				: 1;
	width				: 100%;
	height				: 100px;
	background			: var(--base-color);
}
body.admin-bar #header{ top: 32px; }

#contents{}
#footer{
	padding				: 40px 0;
	background			: var(--main-color);
	text-align			: center;
}
/*-----------------------------------------------------
 container
-----------------------------------------------------*/
.container{
	position			: relative;
	clear				: both;
	margin				: 0 auto;
	max-width			: var(--max-width);
	width			: var(--content-width);
}


/*----------------------------------------------------------------
 styles
----------------------------------------------------------------*/

/*-----------------------------------------------------
 header
-----------------------------------------------------*/

/* logo
-----------------------------------------------------*/
#header .logo{
	position			: absolute;
	left				: 0;
	top					: 0;
	background			: var(--main-color);
}
#header .logo img{
	width				: 230px;
	height				: var(--headerlogo-height);
	object-position		: center center;
	object-fit			: cover;	
}

/* navigation
-----------------------------------------------------*/
#header .navigation{
	height				: 100px;
	font-family			: var(--font-serif);
	font-size			: 14px;
	line-height			: 1.5;
}

/* navi */
#header .navigation .navi{
	display				: flex;
	flex-direction		: row;
	align-items			: center;
	justify-content		: center;
	margin				: 0 auto;
	max-width			: var(--max-width);
	min-width			: var(--content-width);
	height				: 100px;
	padding				: 0 170px 0 230px;
}
#header .navigation .navi>li{
	position			: relative;
	flex				: 1;
	height				: 100%;
	text-align			: center;
}
#header .navigation .navi>li a{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	display				: block;
	width				: 100%;
	color				: var(--link-color);
}
#header .navigation .navi>li.current-menu-item:after{
	content				: "";
	position			: absolute;
	left				: 50%;
	bottom				: -25px;
	transform			: translateX(-50%);
	display				: block;
	width				: 1px;
	height				: 40px;
	background			: var(--link-color);
}

/* sub-navi */
#header .navigation .sub-navi{
	position			: absolute;
	right				: 30px;
	top					: 0;
	display				: flex;
	flex-direction		: column;
	justify-content		: center;
	height				: 100px;
	font-size			: 12px;
	line-height			: 2;
}
#header .navigation .sub-navi>li>a:before{ content: "- "; }

@media screen and (max-width: 980px){
#header .navigation{
	position			: relative;
	padding				: 0 120px 0 230px;
}
#header .navigation .navi{
	padding				: 0;
	min-width			: initial;
}
}


/*-----------------------------------------------------
 contents
-----------------------------------------------------*/
/* breadCrumb
-----------------------------------------------------*/
#contents .breadCrumb{
	margin				: 10px 0;
	font-size			: 12px;
}

/*-----------------------------------------------------
 title
-----------------------------------------------------*/
#title{
	background			: var(--sub-color);
	text-align			: center;
}

#title .container{ height: 150px; }
#title h1{
	position			: absolute;
	top					: 50%;
	transform			: translateY(-50%);
	width				: 100%;
	line-height			: 1;
	font-size			: 36px;
	font-family			: var(--font-serif);
	color				: var(--heading-color);
}

/*-----------------------------------------------------
 content
-----------------------------------------------------*/
#content{ margin: 30px 0 150px 0; }

/* column
-----------------------------------------------------*/
#contents .column{
	display				: flex;
	flex-direction		: row;
	justify-content		: space-between;
	align-items			: flex-start;
}
#contents .column>#side{ 
	position			: sticky;
	top					: calc(var(--headerlogo-height) + 50px);
	flex				: 0 0 240px;
}
#contents .column>#main{ flex: 0 0 730px; }


/*-----------------------------------------------------
 footer
-----------------------------------------------------*/

/* logo
-----------------------------------------------------*/
#footer .logo{ margin: 15px 0 70px 0; }
#footer .logo img{
	width				: 217px;
	height				: 165px;
	object-position		: center center;
	object-fit			: cover;	
}

/* navigation
-----------------------------------------------------*/
#footer .navigation{ font-family: var(--font-serif); }
#footer .navigation ul{ margin: 40px 0; }
#footer .navigation ul>li{
	position			: relative;
	display				: inline-block;
	margin				: 0 20px;
}
#footer .navigation ul>li a{ color: var(--base-color); }

#footer .navigation .navi		{ font-size: 16px; }
#footer .navigation .sub-navi	{ font-size: 14px; }

#footer .navigation .navi br{ display: none; }

/* copy
-----------------------------------------------------*/
#footer .copy{ color: var(--base-color); }
#footer .copy small{ font-size: 12px; }