@charset "utf-8";

/* SOKEN飾屋
name::	layout.css
date::	2018/03 */

body {
	text-align: center;
	line-height: 1.7;
	font-size: 0.9em;
	*font-size: 90%;
	color: #333;
	background: url(../img/common/bg.jpg) repeat-x;
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}
img {
	max-width: 100%;
	height: auto;
}

/* //////////////////////////////////////////////////////////////////////////
	*.base layout
///////////////////////////////////////////////////////////////////////////*/

/*----------------------------------------------------
	#page
----------------------------------------------------*/
#page {
	border-left: 1px solid #FFF;
	border-right: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	box-shadow: 0 0 8px gray;
	}
/*----------------------------------------------------
	.wrap
----------------------------------------------------*/
.wrap {
	background-color: #FFF;
	text-align: left;
	margin: 0 auto;
	clear: both;
}
/*
////////////////////////////////////////////////////////////////////////////
	1. header layout	
//////////////////////////////////////////////////////////////////////////*/

#header {
	padding-top:4px;
	background:url(../img/common/bg_header.jpg) no-repeat top left;
}
#header h1 {
	float: left;
	width: 300px;
	margin-top: 20px;
	margin-left: 20px;
	margin-bottom: 20px;
}
#header #hdnav {
	float: right;
	margin-right: 25px;
	text-align:right;
	margin-top: 17px;
}
#header #hdnav p {
	margin-bottom: 4px;
}
#header #hdnav ul {
	margin-bottom: 1em;
}
#header #hdnav ul li {
	margin: 0.5em;
	display: inline-block;
	height: 30px;
}
/*----------------------------------------------------
	global nav
----------------------------------------------------*/
@media screen and (max-width: 767px) {
	.burger-btn {
		display: block;
		width: 39px;
		height: 39px;
		position: relative;
		z-index: 3;
		border: none;
		background-color: rgb(0, 0, 0);
		margin: 0 0 0 auto;
	}

	.bar {
		width: 20px;
		height: 1px;
		display: block;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		background-color: #fff;
	}

	.bar_top {
		top: 10px;
	}

	.bar_mid {
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.bar_bottom {
		bottom: 10px;
	}

	.burger-btn.close .bar_top {
		transform: translate(-50%, 10px) rotate(45deg);
		transition: transform 0.3s;
	}
	.burger-btn.close .bar_mid {
		opacity: 0;
		transition: opacity 0.3s;
	}
	.burger-btn.close .bar_bottom {
		transform: translate(-50%, -8px) rotate(-45deg);
		transition: transform 0.3s;
	}
/*スマホメニュー*/

	.nav-wrapper {
		display: none;
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
	}     
	#nav{        
	  width: 100%;
	  height: 100%;
	  background-color: #214EC9;
	  z-index: 2;
	}     
	#nav ul{        
	  display: block;
	  position: absolute;
	  top: 50%;
	  left: 50%;
	  transform: translate(-50%,-50%);
	  text-align: center;
	}      
	#nav li{        
	  margin-right: 0;        
	  margin-bottom: 40px;      
	}
	#nav li a {
		font-size: 120%;
		color: #fff;
		text-decoration: none;
	}
	body.noscroll{
		overflow: hidden;
	}
	
}
@media screen and (min-width:768px) {
	.burger-btn {
		display: none;
	}
	#nav {
		display: block;
		list-style: none;
		overflow: hidden;
		background:url(../img/common/menu_bg.jpg) repeat;
		height: 50px;
		padding-left: 10px;
		font-size: 90%;
	}

	#nav ul:after {
		 content: "";
		 display: block;
		 clear: both;
	}
	#nav li {
		text-align: center;
		float: left;
		height: 50px;
		line-height: 50px;
		font-weight: 500;
	}

	#nav li a {
		text-decoration: none;
		color: #fff;
		padding: 20px;
	}
	#nav li a:hover {
		color: #1C7DB2;
		background-color: #FC0;
	}

}
/*////////////////////////////////////////////////////////////////////////////

	2. footer layout
	
////////////////////////////////////////////////////////////////////////////*/

#footer {
	background:url(../img/common/menu_bg.jpg) repeat;
	color:#FFF;
	padding: 20px 0 20px 20px;
	clear: both;
}
#footer #f-logo {
	margin-top: 30px;
}

#footer #adress {
	color: #FFF;
	text-align: right;
	margin-top: 1em;
	margin-right: 1em;
}


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

	3. contents layout
	
////////////////////////////////////////////////////////////////////////////*/

#contents {
	padding: 25px 20px 20px 20px;
	}
#contents {zoom:1;}
#contents:after {
	content: ""; 
	display: block; 
	clear: both;
}
* html #contents {
	height: 1%;
}


/*----------------------------------------------------
	#main layout
----------------------------------------------------*/

/*inarea*/
.inarea {
	padding: 0 0 20px;
	overflow: hidden;
	margin: 0px 0px 20px;
	clear: both;
}
.inarea00 {
	padding: 0;
	margin: 0;
	overflow: hidden;
	clear: both;
}
.inarea02 {
	padding: 10px 5px 30px 5px;
}
.inarea03 {
	padding: 14px 5px 10px 5px;
}
.inarea_hinoki{
	text-align: right;
}

.inarea000 {
	padding: 0;
	margin: 0;
	overflow: hidden;
	clear: both;
}

/*----------------------------------------------------
	#side
----------------------------------------------------*/
#side {
	width: 100%;
}

	#side ul { margin-bottom: 20px; }
	#side li {
		padding-bottom: 4px;
		line-height: 1.4em;
		}
	

/*----------------------------------------------------
table
----------------------------------------------------*/

table {
	border-collapse: collapse;
}
	th, td {
	border: 1px solid #CCC;
	padding: 10px 10px;
		}

table tr:hover {
	background-color: #FFFEE6; /* 行の背景色 */
}

table th {
	background-color: #E8F5F7;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
}

@media screen and (min-width: 768px) {
	.wrap {
		width: 100%;
	}
	#main {
		float: left;
		width: 67%;
	}
	#side {
		width: 30%;
		margin-left: 70%;
	}
	#footer #f-logo {
		float: left;
	}
}
@media screen and (min-width: 900px) {
	.wrap {
		width: 900px;
	}
	.w615 {
		width: 615px;
	}
	#side {
		width: 230px;
		margin-left: 630px;
	}
	#footer #adress {
		margin-left: 560px;
		width: 300px;
	}
}