@charset "UTF-8";



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/




/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 共通項目 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */



/* マージン */
.margin02 {	margin-bottom: 2px; }
.margin05 {	margin-bottom: 5px; }
.margin06 {	margin-bottom: 6px; }
.margin08 {	margin-bottom: 8px; }
.margin10 {	margin-bottom: 10px; }
.margin15 {	margin-bottom: 15px; }
.margin20 {	margin-bottom: 20px; }
.margin30 {	margin-bottom: 30px; }
.margin40 {	margin-bottom: 40px; }


/* 文字装飾 */
strong {
	font-weight: bold;
}

ul {
	
}
	ul li {
		list-style:none;	
	}


/* float解除 */
.cbox { 
}
* html .cbox {
	zoom: 100%;
}
*:first-child+html .cbox {
	display: inline-block;
}
.cbox:after {
	content: ""; 
	clear: both; 
	height: 0; 
	display: block; 
	visibility: hidden;
}
ul { 
}
* html ul {
	zoom: 100%;
}
*:first-child+html ul {
	display: inline-block;
}
ul:after {
	content: ""; 
	clear: both; 
	height: 0; 
	display: block; 
	visibility: hidden;
}






/* リンク */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
a {
	color: #000;
}
a:hover {
	color: #bb897d;
}


/* テキスト装飾 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 小文字 */
.cap {
	line-height: 1.5;
	font-size: 86%;
}	

.lato {
	font-family: 'Lato', sans-serif;
	letter-spacing: 1px;
}
.didot {
	font-family: 'GFS Didot', serif;
	letter-spacing: 1px;
}
.cormorant {
	font-family: 'Cormorant Garamond', serif;
	letter-spacing: 1px;
}




/* 横幅 */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
body {
	font-family: 'Unna', serif;
	letter-spacing: 1px;
	color: #000000;
	padding: 0;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}





/* 1201 - */
@media screen and (min-width: 1201px), print {



body {
  margin: 0;
  position: relative;
  overflow-x:hidden;
}





.sp,
#header_sp {
	display: none !important;
}










/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#header {
	width: 180px;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 100px;
	z-index: 3;
}
	#header h1  {
		position: absolute;
		top: 50px;
		left: -50px;
		z-index: 100 !important;
	}
		#header h1 a {
			display: block;
			width: 95px;
		}
			#header h1 a svg {
				width: 95px;
				height: auto;
			}
	
	#header .container {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		-webkit-flex-flow: row wrap;
		-ms-flex-flow: row wrap;
		flex-flow: row wrap;
	}
	
	#header .navigation {
		width: 100%;
		position: fixed;
		z-index: 10;
	}
	
	#header .open-nav {
	}
	
	#header .menu-shelf {
		width: 180px;
		height: 100vh;
		position: relative;
		overflow: hidden;
		display: none;
		max-width: 180px;
	}
		#header .menu-shelf .menu {
			position: absolute;
			top: 50%;
			margin-top: -250px;
		}
			#header .menu-shelf .menu a {
				display: block;
				font-size: 86%;
				font-weight: 500;
				letter-spacing: 2px;
				padding-left: 5px;
				font-family: 'Cormorant Garamond', serif;
				color: #000;
				margin: 50px 0;
				transition: 0.4s;
				-webkit−transition: 0.4s;
				background: url(../../common/img/nav_border.png) no-repeat left -150px center;
			}
			#header .menu-shelf .menu a:nth-child(1) {
				width: 30px;
			}
			#header .menu-shelf .menu a:nth-child(2) {
				width: 50px;
			}
			#header .menu-shelf .menu a:nth-child(3) {
				width: 80px;
			}
			#header .menu-shelf .menu a:nth-child(4) {
				width: 45px;
			}
			#header .menu-shelf .menu a:nth-child(5) {
				width: 100px;
			}
			#header .menu-shelf .menu a:nth-child(6) {
				width: 64px;
			}
			#header .menu-shelf .menu a:hover {
				background: url(../../common/img/nav_border.png) no-repeat left center;
			}
	
	#header .navigation:after {
		content: '';
		background: rgba(0,0,0,0);
		height: 100vh;
		width: 100vw;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 3;
		display:none;
	}
	
	#header .nav {
		width: 180px;
		height: 100vh;
		background: #fff;
		position: fixed;
		left: 0;
		z-index: 10 !important;
	}
	
	#header .logo-menu {
		display: block;
		margin: 47vh 0 47vh 60px;
	}	
		#header .logo-menu img {
			cursor: pointer;
		}		
				

	#header ul  {
		position: fixed;
		bottom: 50px;
		left: 50px;
		z-index: 100;
	}
		#header ul li  {
			float: left;
			margin-right: 25px;
		}
			#header ul li img {
				width: auto;
				height: 22px;
			}






/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#main {
	width: 100%;
}
	#main #contents {
		width: 1028px;
		float: right;
	}


section {
}
* html section {
	zoom: 100%;
}
*:first-child+html section {
	display: inline-block;
}
section:after {
	content: ""; 
	clear: both; 
	height: 0; 
	display: block; 
	visibility: hidden;
}




	
	
	
	
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* フッター */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#footer {
	height: 150px;
	background: #323232;
	color: #fff;
	text-align: center;
	position: relative;
}
	#footer .box {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
		#footer .box .link {
			padding-top: 40px;
		}
		#footer .box .link a {
			font-family: 'Vollkorn', serif;
			font-size: 143%;
			letter-spacing: 2px;
			color: #fff;
		}
		#footer .box .link a:hover {
			color: #999;
		}
	
	
		#footer .box p {
			padding-top: 10px;
			font-family: 'Vollkorn', serif;
			font-size: 86%;
			letter-spacing: 2px;
		}
				





				





}







/* 901px - 1200px */
@media only screen and (min-width: 901px) and (max-width: 1200px), print {






.sp,
#header {
	display: none !important;
}





/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#header_sp #logo  {
	width: 95px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 100;
}
	#header_sp #logo a  {
		display: block;
		width: 95px;
		height: 21px;
		background:  url(../img/logo.svg) no-repeat;
		background-size: 95px;
		text-indent: -9999px;
		overflow: hidden;
		}
				

	#header_sp ul  {
		position: fixed;
		top: 24px;
		right: 60px;
		z-index: 100;
	}
		#header_sp ul li  {
			float: left;
			margin-right: 15px;
		}		
			#header_sp ul li img {
				width: auto;
				height: 22px;
			}







/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* 基本レイアウト */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#main {
	width: 100%;
}
	#main #contents {
		width: 100%;
	}



}






/* 900px - */
@media only screen and (max-width: 900px) {






.pc,
#header {
	display: none !important;
}









/* ++++++++++++++++++++++++++++++++++++++++++++++ */
/* ヘッダー */
/* ++++++++++++++++++++++++++++++++++++++++++++++ */
#header_sp #logo  {
	width: 95px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 100;
}
	#header_sp #logo a  {
		display: block;
		width: 95px;
		height: 21px;
		background:  url(../img/logo.svg) no-repeat;
		background-size: 95px;
		text-indent: -9999px;
		overflow: hidden;
	}
				

	#header_sp ul  {
		position: fixed;
		bottom: 20px;
		left: 25px;
		z-index: 100;
	}
		#header_sp ul li  {
			float: left;
			margin-right: 15px;
		}	
			#header_sp ul li img {
				width: auto;
				height: 22px;
			}






}