@charset "utf-8";
/* CSS Document */


/* =========================================================

	8ablish 共通ヘッダーCSS

	@version 1.0     2017.8.10  New
	@author          K.Sekioka of HEVIZ Co.,Ltd.

============================================================ */



	#eightablishHeader {
		display			: block;
		position		: fixed;
		width			: 100%;
		left			:  0;
		top				:  0;
		height			: 50px;
		margin			:  0;
		padding			:  0;
		background		: #ffffff;
		z-index			: 1000;
		color			: #231815;
		font-family		: 'Helvetica LT W01 Roman', 'Helvetica Neue', 'Helvetica', 'Ariel', Sans-serif;
		font-weight		: normal;
		font-size		: 11pt;
	}



	/* Reset ------------------------------------- */

	#eightablishHeader ul,
	#eightablishHeader ul li,
	#eightablishHeader dl,
	#eightablishHeader dl dt,
	#eightablishHeader dl dd {
		margin		: 0;
		padding		: 0;
		list-style-type	: none;
	}



	/* Logo -------------------------------------- */

	#eightablishHeader > h1 {
		display			: block;
		position		: relative;
		width			: 100px;
		height			:  50px;
		text-align		: center;
		margin			: 0 auto;
		padding			: 0;
		z-index			: 1500;
	}

	#eightablishHeader > h1 > a {
		display			: block;
		position		: relative;
		width			: 100%;
		height			: 100%;
		margin			: 0;
		padding			: 0;
	}

	#eightablishHeader > h1 > a img {
		display			: block;
		position		: absolute;
		left			: 50%;
		top				: 50%;
		margin			: -9px 0 0 -31px;
		padding			: 0;
	}



	/* Nav --------------------------------------- */

	#eightablishHeader > nav {
		display			: block;
		position		: absolute;
		left			:  0;
		top				:  0;
		width			: 100%;
		z-index			: 1001;
	}



	/* Nav 1st Layer ----------------------------- */

	#eightablishHeader > nav > div {
	}

	#eightablishHeader > nav > div > ul {
	}

	#eightablishHeader > nav > div > ul > li {
	}

	#eightablishHeader > nav > div > ul > li > a {
		display:none;
		width:40px;
		height:40px;
		margin:0;
		padding:0;
		background:url(img/menu_b.png) center center no-repeat;

		font-size:1px;
		text-align:left;
		text-indent:-9999px;
		overflow:hidden;

		cursor:pointer;
	}



	/* Nav 2nd Layer ----------------------------- */

	#eightablishHeader > nav > div > ul > li > div {
	}

	#eightablishHeader > nav > div > ul > li > div > ul {
		width			: 70%;
		min-width		: 850px;
		margin			: 0 auto;
		padding			: 0;
		zoom			: 1;
	}
	#eightablishHeader > nav > div > ul > li > div > ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#eightablishHeader > nav > div > ul > li > div > ul > li {
		float			: left;
		padding			: 18px 0;
		width			: 12.5%;
		line-height		: 14px;
	}
	#eightablishHeader > nav > div > ul > li > div > ul > li.home         { display:none; }
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(2) { }
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(3) { }
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(4) { }
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(5) { margin-left:25%; }
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(6) { }
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(7) { }

	#eightablishHeader > nav > div > ul > li > div > ul > li > a {
		display			: block;
		width			: auto;
		height			: 14px;
		line-height		: 14px;
		color			: #000000;
		text-decoration	: none;
		text-align		: center;
		border-right	: 1px solid #000000;
		cursor			: pointer;
	}
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(2) > a,
	#eightablishHeader > nav > div > ul > li > div > ul > li:nth-child(5) > a { border-left:1px solid #000000; }



	#eightablishHeader > nav > div > ul > li > div > ul > li a:hover,
	#eightablishHeader > nav > div > ul > li > div > ul > li.sel a {
		color			: #849ca8;
		text-decoration	: none;
		transition		: 0.5s;
	}



	/* 3rd Layer --------------------------------- */

	#eightablishHeader > nav > div > ul > li > div > ul > li > div {
		display			: none;
		position		: absolute;
		width			: 100%;
		left			:  0;
		bottom			: -29px;
		border-bottom	: 1px solid #000000;
		background		: #ffffff;
		overflow		: hidden;

		opacity			: 0;
		transition		: 0.5s;
	}
	#eightablishHeader > nav > div > ul > li > div > ul > li.sel > div {
		display			: block;
		opacity			: 1;
	}


	#eightablishHeader > nav > div > ul > li > div > ul > li > div > ul {
		display			: block;
		position		: relative;
		float			: left;
		left			: 50%;
	}
	#eightablishHeader > nav > div > ul > li > div > ul > li > div > ul:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }

	#eightablishHeader > nav > div > ul > li > div > ul > li > div > ul > li {
		display			: block;
		position		: relative;
		float			: left;
		left			: -50%;
	}

	#eightablishHeader > nav > div > ul > li > div > ul > li.sel > div > ul > li > a,
	#eightablishHeader > nav > div > ul > li > div > ul > li > div > ul > li > a {
		height			: 38px;
		line-height		: 38px;
		padding			: 0 30px;
		text-decoration	: none;
		color			: #231815;
		transition		: 0.5s;
		white-space		: nowrap;
		cursor			: pointer;
	}

	#eightablishHeader > nav > div > ul > li > div > ul > li > div > ul > li > a:hover,
	#eightablishHeader > nav > div > ul > li > div > ul > li > div > ul > li.sel > a {
		color			: #849ca8;
		text-decoration	: none;
		transition		: 0.5s;
	}



/* ===================================================================
	共通ナビゲーション（主にtable, smartphone用)
====================================================================== */



	#eightablishMenu {
		display:block;
display:none;
		position:fixed;
		top:0;
		left:0;
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		z-index:1100;
	}



	/* Reset ------------------------------------- */

	#eightablishMenu ul,
	#eightablishMenu ul li,
	#eightablishMenu dl,
	#eightablishMenu dl dt,
	#eightablishMenu dl dd {
		margin:0;
		padding:0;
		list-style-type:none;
	}



	/* clickable background ---------------------- */

	#eightablishMenu > .bg {
		display:block;
		position:relative;
		width:100%;
		height:100%;
		margin:0;
		padding:0;
		background-color:rgba(255,255,255,0.8);
		cursor:pointer;
		z-index:-1;
	}



	/* Navigation -------------------------------- */

	#eightablishMenu > nav {
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:250px;
		height:100%;
		margin:0;
		padding:30px 10px;

		box-sizing:border-box;
		overflow:auto;
		overflow-x:hidden;
		overflow-y:auto;

		background-color:#000000;
		color:#ffffff;
	}

	#eightablishMenu > nav a {
		display:block;
		padding:5px;
		color:#ffffff;
		text-decoration:none;
	}

	#eightablishMenu > nav a[href] {
		padding:5px 5px 5px 25px;
		background-color:#222222;
		background-image:url(img/right.png);
		background-position:5px center;
		background-repeat:no-repeat;
	}



	/* Nav 1st layer ----------------------------- */

	#eightablishMenu > nav > div {
	}

	#eightablishMenu > nav > div > ul {
	}

	#eightablishMenu > nav > div > ul > li {
		margin:1px 0 0 0;
	}
	#eightablishMenu > nav > div > ul > li.hasChild {
		margin:20px 0;
	}

	#eightablishMenu > nav > div > ul > li > a {
	}

	#eightablishMenu > nav > div > ul > li.hasChild > a {
		padding:5px;
		background-color:transparent;
		background-image:none;
	}



	/* Nav 2nd layer ----------------------------- */

	#eightablishMenu > nav > div > ul > li > div {
	}

	#eightablishMenu > nav > div > ul > li > div > ul {
	}

	#eightablishMenu > nav > div > ul > li > div > ul > li {
		margin:1px 0 0 0;
	}

	#eightablishMenu > nav > div > ul > li > div > ul > li > a {
	}



	/* close button ------------------------------ */

	#eightablishMenu .close {
		display:block;
		position:absolute;
		top:30px;
		left:250px;
		margin:0;
		padding:0;
	}

	#eightablishMenu .close a {
		display:block;
		width:40px;
		height:40px;
		margin:0;
		padding:0;

		background-color:#000000;
		background-image:url(img/close_s.png);
		background-position:center center;
		background-repeat:no-repeat;

		color:#ffffff;
		font-size:1px;
		text-align:left;
		text-indent:-9999px;
		overflow:hidden;

		cursor:pointer;
	}