@charset "UTF-8";
/*===================================================
  reset_css   
====================================================*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*===================================================
  basic   
====================================================*/
 /* font-base */
html {	font-size: 62.5%; } /* 1rem=10px */
body {	font-size: 13px; font-size: 1.3rem; 
	font-family:'Avenir','Helvetica Neue','Helvetica','Arial',YuGothic,'Yu Gothic','Hiragino Sans','ヒラギノ角ゴシック','メイリオ', Meiryo,'MS Pゴシック','MS PGothic'; 
	color:#000;
	background-color: #fff;
	letter-spacing: 0.02em; 
	line-height: 1.5em;
	text-align: justify;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: break-all; }

html, body {
	height: 100%;
	margin: 0; }

* { word-break: break-all; }

/*===================================================
  link design   
====================================================*/
a {
	text-decoration: none;
	color: #000;
	-webkit-transition: .3s;
	-moz-transition: .3s;
	-o-transition: .3s;
	-ms-transition: .3s;
	transition: .3s; }
	
a:hover { color: #faee00; }

a:hover img {
	opacity: 0.4;
	filter: alpha(opacity=40);
	-moz-opacity: 0.4;
	-webkit-transition: 0.3s ease-in-out;
	-moz-transition: 0.3s ease-in-out;
	-o-transition: 0.3s ease-in-out;
	transition: 0.3s ease-in-out; }

.hover2:hover { color: #fff; }

/*===================================================
  header   
====================================================*/
.header {
	width: 100%;
	height: 150px;
	position: relative; 
	margin-top: -15px; }
	
.top_icon { 
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform : translate(-50%,-50%);
	transform : translate(-50%,-50%); } 

/*===================================================
  hm   
====================================================*/
.hm {
	position: fixed;
	right: 20px;
	top: 55px;
	width: 30px;
	z-index: 2; }

#nav-drawer { position: relative; }

/*チェックボックス等は非表示に*/
.nav-unshown { display:none; }

/*アイコンのスペース*/
#nav-open {
	display: inline-block;
	width: 35px;
	height: 30px;
	vertical-align: middle; }

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
	position: absolute;
	height: 4px;/*線の太さ*/
	width: 35px;/*長さ*/
	border-radius: 4px;
	background: #000;
	display: block;
	content: '';
	cursor: pointer; }
	
#nav-open span:before { bottom: -12px; }
#nav-open span:after { bottom: -24px; }

/*閉じる用の薄黒カバー*/
#nav-close {
	display: none;/*はじめは隠しておく*/
	position: fixed;
	z-index: 99;
	top: 0;/*全体に広がるように*/
	left: 0;
	width: 100%;
	height: 100%;
	background: black;
	opacity: 0;
	transition: .3s ease-in-out; }

/*中身*/
#nav-content {
	overflow: auto;
	position: fixed;
	top: 0;
	left: 0px;
	z-index: 9999;/*最前面に*/
	width: 80%;/*右側に隙間を作る（閉じるカバーを表示）*/
	max-width: 330px;/*最大幅（調整してください）*/
	height: 100%;
	background: #fff;/*背景色*/
	transition: .3s ease-in-out;/*滑らかに表示*/
	-webkit-transform: translateX(-105%);
	transform: translateX(-105%);/*左に隠しておく*/ }

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
	display: block;/*カバーを表示*/
	opacity: .5; }

#nav-input:checked ~ #nav-content {
	-webkit-transform: translateX(0%);
	transform: translateX(0%);/*中身を表示（右へスライド）*/
	box-shadow: 6px 0 25px rgba(0,0,0,.15); }

.hm li {
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 3rem;
	margin-left: 50px;
	margin-top: 25px; }

.hm hr {
	margin-left: 50px;
	width: 60%; }

.hm br { line-height: 150%; }

/*===================================================
  slideshow   
====================================================*/
.slideshow {
	float: left;
	width: 100%;
	height: 100%;
	overflow: hidden; }
	
.slideshow:after {
	content: "";
	display: block;
	clear: both; }

.slideshow img { 
	height: 280px;
	padding-right: 30px;}

/*----------------------------------------------------
  midashi
----------------------------------------------------*/
.midashi {
	float: left;
	width: 100%;
	height: auto; }

.midashi:after {
	content: "";
	display: block;
	clear: both; }

/*===================================================
  main_area   
====================================================*/
.main_area:after {
	content: "";
	display: block;
	clear: both; }
	
.main_area {
	width: 80%;
	height: auto;
	float: left;
	overflow: hidden; }

.left, .right { 
	width: 10%;
	height: auto;
	float: left; }

/*----------------------------------------------------
  josei
----------------------------------------------------*/
.josei {
	width: 100%;
	height: auto; }

.josei:after {
	content: "";
	display: block;
	clear: both; }

.josei-txt {
	width: auto;
	height: auto;
	float: left; }
	
.josei-pic {
	width: 120px;
	height: auto;
	float: left;
	box-sizing:border-box;
	margin-top: 10px; }

/*----------------------------------------------------
  8mm hakkenn project
----------------------------------------------------*/
.hakken_box1, .hakken_box2, .hakken_box3 {
	width: 100%;
	height: 150px; }

.hakken_box1:after {
	content: "";
	display: block;
	clear: both; }
.hakken_box2:after {
	content: "";
	display: block;
	clear: both; }
.hakken_box3:after {
	content: "";
	display: block;
	clear: both; }

.hakken_left1, .hakken_left2, .hakken_left3 {
	width: 100%;
	height: auto;
	float: left;
	box-sizing:border-box;
	padding-right: 30px; }

.hakken_right1, .hakken_right2, .hakken_right3 {
	width: 100%;
	height: auto;
	float: left; }

.hakken_right1 img, .hakken_right2 img, .hakken_right3 img { 
	width: 80%;
	box-sizing:border-box;
	padding-left: 27px;
	padding-top: 10px;
	padding-bottom: 60px; }

/*----------------------------------------------------
  8mm　table
----------------------------------------------------*/
.hakken_num th, .hakken_num td {
	vertical-align: top;
	height: auto; }

.hakken_num th {
	padding-right: 20px; }

/*----------------------------------------------------
  8mm　contact
----------------------------------------------------*/
.hakken_contact {
	width: 100%;
	height: 100px;
	float: left;
	background-color: #faee00;
	display:table;
	position:relative; }

.hakken_contact:after {
	content: "";
	display: block;
	clear: both; }

.hakken_contact p {
	text-align: center;
	display:table-cell;
	vertical-align: middle;}

.hakken_contact img {
	width: 220px; 
	height: auto;
	position: absolute;
	bottom: 85px;
	left: 0px; }

/*----------------------------------------------------
  book menu
----------------------------------------------------*/
.book_wrap {
	display: flex;
	justify-content: center; }

.book_wrap li {
	margin: 2px; }

/*===================================================
  under contruction   
====================================================*/
.uncon {
	filter:alpha(opacity=20);
	-moz-opacity: 0.2;
	opacity: 0.2; }
	
/*===================================================
  top_layout   
====================================================*/
.top_layout {
	float: left;
	width: 100%;
	height: auto; }
	
.top_layout:after {
	float: left;
	width: 100%;
	height: auto; }

.top_layout img {
	max-width: 100%; 
	height: auto; }
	
.top_layout_left {
	float: left;
	width: 20%;
	height: auto; }
	
.grid {
	float: left;
	width: 80%;
	height: auto;
	box-sizing:border-box;
	padding-left: 30px; }	

.grid img {
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 14%; }		
	
/*===================================================
  footer   
====================================================*/
#footer {
	font-size: 1.0rem;
	letter-spacing: 0.1em;
	background-color: #646464;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 40px; }

.footerimg img {
	width: 100%;
	height: auto; }







/*===================================================
  media_screen width 600px~   
====================================================*/
@media screen and (min-width:600px) { /*　画面サイズが600pxからはここを読み込む　*/

/*===================================================
  main_area sp  
====================================================*/
.main_area {
	max-width: 1024px;
	width: 60%; }

.left, .right { 
	display: block;
	width: 20%;
	height: auto;
	float: left; }

/*===================================================
  hm   
====================================================*/
.hm {
	right: 55px;
	top: 55px; }

/*===================================================
  slideshow   
====================================================*/
.slideshow img {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	width: 100%;
	margin: 0 auto; }

/*===================================================
  main_area   
====================================================*/
.member_pic { max-width: 1000px; }

/*----------------------------------------------------
  josei
----------------------------------------------------*/	
.josei-txt { padding-right: 20px; }
.josei-pic { width: 150px; }

/*----------------------------------------------------
  8mm hakkenn project
----------------------------------------------------*/
.hakken_left1, .hakken_left2, .hakken_left3 {
	width: 300px;
	height: auto;
	float: left;
	box-sizing:border-box;
	padding-right: 30px; }

.hakken_right1, .hakken_right2, .hakken_right3 { width: auto; }

.hakken_right1 img, .hakken_right2 img, .hakken_right3 img { 
	width: 100%;
	max-width: 280px;
	padding: 0; }

/*----------------------------------------------------
  8mm　table
----------------------------------------------------*/
.hakken_num th, .hakken_num td {
	vertical-align: top;
	height: auto; }

.hakken_num th {
	padding-right: 20px; }

/*----------------------------------------------------
  8mm　contact
----------------------------------------------------*/
.hakken_contact img {
	width: 260px; 
	height: auto;
	position: absolute;
	bottom: 83px;
	left: 0px; }

/*----------------------------------------------------
  book menu
----------------------------------------------------*/
.book_wrap li {
	float: left; 
	width: 33%;
	height: auto;
	margin: 10px; }
	
/*===================================================
  top_layout   
====================================================*/
.top_layout_left { width: 11%; }
	
.grid {
	width: 89%;
	padding-left: 0px; }

/*===================================================
  Masonry   
====================================================*/
.grid-item {
	width: 45%;
	float: left;
	padding-left: 5%;
	display: table; }
	
.grid-item a {
	display: table-cell;
	vertical-align: top;
	text-align: right;
	width: 100%; }

.item-1, .item-2, .item-3, .item-4, .item-5, .item-6, .item-7 { height: auto; }