@charset "utf-8";


#kanban {position:relative; width:100%; height:600px;}
#kanban-bglayer { }
#kanban h2 { color:#fff; font-size:50px; }
#kanban h2+p { color:#fff; font-size:17px;}

#kanban-midlayer { position:absolute; top:-25%; left:0; bottom:-25%; width:100%; height:150%; }

#kanban-inner { position:absolute; top:0; left:0; padding-top:335px;/*35vh*/; overflow:hidden; color:#fff; text-shadow:1px 1px 3px #666; }
#kanban-inner p:not(.blog-home) {font-size:400%; font-family:'Geosans-L'; line-height:1.2em; text-align:center;}
#kanban-inner p.blog-home {font-size:350%; font-family:'Geosans-L'; line-height:1.2em; text-align:center;}
#kanban-inner p span.sub { line-height:0.1em; font-size:30px;}

/* 
 ============== FRONT page ===============
*/
#kanban.front-page {position:relative; width:100%; height:80vh; }
#kanban-bglayer.front-page {  }
#kanban-bglayer.front-page ul {margin:0; padding:0;}
#kanban-bglayer.front-page ul.slides li {
	margin:0;padding:0; width:100%; height:80vh; 
	position:relative;
	background-size:cover; background-position:center center; background-repeat:no-repeat;
	background-attachment:fixed;
}

/* FrontPage-SlideShow */
#kanban-bglayer.front-page ul.slides {  }
#kanban-bglayer.front-page ul li.slide-1 {background-image:url(./img/slider/1.jpg);} 
#kanban-bglayer.front-page ul li.slide-1a {background-image:url(./img/slider/1a.jpg);} 
#kanban-bglayer.front-page ul li.slide-1b {background-image:url(./img/slider/1b.jpg);} 
#kanban-bglayer.front-page ul li.slide-1c {background-image:url(./img/slider/1c.jpg);} 
#kanban-bglayer.front-page ul li.slide-1n {background-image:url(./img/slider/1n.jpg);} 
#kanban-bglayer.front-page ul li.slide-2 {background-image:url(./img/slider/2.jpg);} 
#kanban-bglayer.front-page ul li.slide-2b {background-image:url(./img/slider/2b.jpg);} 
#kanban-bglayer.front-page ul li.slide-2c {background-image:url(./img/slider/2c.jpg);} 
#kanban-bglayer.front-page ul li.slide-2n {background-image:url(./img/slider/2n.jpg);} 
#kanban-bglayer.front-page ul li.slide-3 {background-image:url(./img/slider/3.jpg);} 
#kanban-bglayer.front-page ul li.slide-3c {background-image:url(./img/slider/3c.jpg);} 
#kanban-bglayer.front-page ul li.slide-4 {background-image:url(./img/slider/4.jpg);} 
#kanban-bglayer.front-page ul li.slide-5 {background-image:url(./img/slider/5.jpg);} 
#kanban-bglayer.front-page ul li.slide-5a {background-image:url(./img/slider/5a.jpg);} 
#kanban-bglayer.front-page ul li.slide-5b {background-image:url(./img/slider/5b.jpg);} 
#kanban-bglayer.front-page ul li.slide-5n {background-image:url(./img/slider/5n.jpg);} 



#kanban-bglayer.front-page ul li img.maker-logo {width:auto; height:auto; max-height:26px; position:absolute; bottom:10px; right:10px}
#kanban-bglayer.front-page ul li img.maker-logo-be {width:auto; height:auto; max-height:50px; position:absolute; bottom:10px; right:10px}
#kanban-bglayer.front-page ul li p {position:absolute; top:50%; left:0; right:0; margin-top:-40px; margin-bottom:0; text-align:center !important; color:#fff; text-shadow:0 0 2px #111,0 0 4px rgba(80,0,0,0.5);}
#kanban-bglayer.front-page ul li p img.slider-catchcopy {width:auto; height:80px; margin:0 auto !important;}
#kanban-bglayer.front-page ul li p img.slider-catchcopy-smp {display:none;}

#body-menu span img {width:100%;}

h3.body-menu {margin:0; padding:0.5em 0 0; line-height:0.6em; text-align:center; font-family:'Geosans-L'; font-size:180%; font-weight:normal; color:rgb(104,32,43);}
h3.body-menu span {display:inline-block; margin-top:0.75rem; font-size:14px; color:#666; font-weight:normal;}
h3.body-menu + p {font-size:13px; line-height:1.5em; padding:0.5em 0.5em; margin:0.5em auto 3em;}

/* 
 ============== index page ===============
*/
#kanban-bglayer.index { background-image:url(./img/banner/kanban/index.jpg);}

/* 
 ============== fixed page ===============
*/
#kanban-bglayer.para {position:absolute; top:0; left:0; width:100%; height:100vh; min-height:500px; background-size:cover; background-position:center center; z-index:-100;}

#kanban-bglayer.page-fabric { background-image:url(./img/photo/fabric-colorful-samples.jpg);}
#kanban-bglayer.page-interior { background-image:url(./img/slider/4.jpg);}
#kanban-bglayer.page-reform { background-image:url(./img/illust/pers1.jpg);}
#kanban-bglayer.page-biz { background-image:url(./img/photo/biz-data.jpg);}

#kanban-midlayer { background:rgba(76,34,45,0.4) url(./img/bg/pattern.png) repeat 0 0;}

#greetings h3 {margin:1.2em 0 0; padding:0; font-weight:normal; font-size:145%; text-align:left; border-bottom:2px dotted #888;}

#order-flow table th {width:auto; min-width:200px;}


.section-inner {margin:2.5rem auto;}




#contact {
	position:relative; 
	height:500px; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,0.8), 0 0 3px rgba(0,0,0,0.6) ;
	background-size:cover; background-repeat:no-repeat; 
	background-position:center center;background-attachment:fixed;
}
#contact .midlayer {
	position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; 
	content:" "; background:url(./img/bg/pattern.png) repeat 0 0;
	padding-top:120px; 
}
#contact h2 { 
	color:#fff; font-size:50px; font-weight:normal;
}
#contact h2+p { color:#fff; font-size:17px;}

#contact.inquiry {background-image:url(./img/photo/inquiry.jpg);}
#contact.application {background-image:url(./img/photo/application.jpg);}
#contact.reservation {background-image:url(./img/photo/reservation.jpg);}
.other-form {background:rgba(0,0,0,0.2); padding:16px; border-radius:6px;}
.this-form {margin-top:40px; padding:16px; border-radius:6px; border:1px solid #fff; background:rgba(255,255,255,0.5);}
.this-form h2 {font-size:24px; border-bottom:1px dotted #fff;}


/*
 =============== Blog (note) ===============
*/
#co-kanban {
	position:relative; 
	height:250px; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,0.8), 0 0 3px rgba(0,0,0,0.6) ;
	background-size:cover; background-repeat:no-repeat; 
	background-position:center center; background-attachment:fixed;
}
#co-kanban-midlayer {
	position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; 
	content:" "; background:rgba(76,34,45,0.4) url(./img/bg/pattern.png) repeat 0 0;
	padding-top:52px; 	
}
#co-kanban-inner p { font-family: 'Geosans-L'; font-size:28px; letter-spacing:0.3em}

#co-kanban.blog-home { background-image:url(./img/illust/fireplace.jpg);}
#co-kanban.archive {  background-image:url(./img/illust/fireplace.jpg);}
#co-kanban.category-archive {  background-image:url(./img/illust/fireplace.jpg);}
#co-kanban.tag-archive {  background-image:url(./img/illust/fireplace.jpg);}


#main-loop h2 {
	font-weight:normal; font-size:19px; line-height:1.5em; 
	border-bottom:1px dotted #888;
	margin-top:0.5em ;margin-bottom:1em;
}
#main-loop .triangle-lt-slight h2 {padding-left:0.25em; padding-right:0.25em;}
.post-inner {overflow:hidden !important; height:auto; max-height:420px !important;}

ul.blog-cat-list, .blog-tag-cloud {margin:0 0 2em; padding:0;}
ul.blog-cat-list li.cat-item {display:inline-block; margin:0em; padding:0;}
ul.blog-cat-list li.cat-item a, .blog-tag-cloud a {font-size:15px !important; line-height:1.5em !important; display:inline-block; margin:0.5em; padding:0.5em; background:rgba(0,0,0,0); border:1px solid #aaa; transition:all 0.3s linear 0s;}
ul.blog-cat-list li.cat-item a:hover,  .blog-tag-cloud a:hover { background:rgba(0,0,0,0.5); border:1px solid transparent; color:#fff; transition:all 0.3s linear 0s;}

.navigation { font-family:'Geosans-L'; margin-bottom:1em;}
.navigation div a{font-size:125% !important; line-height:1.5em !important; display:inline-block; margin:0.25em 0; padding:0.25em 0.5em; background:rgba(0,0,0,0); border:1px solid #aaa; transition:all 0.3s linear 0s;}
.navigation div a:hover  { background:rgba(0,0,0,0.5); border:1px solid transparent; color:#fff; transition:all 0.3s linear 0s;}

div.post-body {padding:0 16px 2em;}
div.post-meta span.row + span.row, div.post-meta span.row + span.row + span.row {display:inline; margin:0 16px 0 0;}
#main-loop.single div.post-meta span.row { display:inline-block; margin:0 16px 0 0;}

/*
 =============== Custom Post ===============
*/

.custom-post dt { width:100%; max-width:320px; padding:0; font-size:22px; }
.custom-post dd {padding:0; margin:4px 0;}
.custom-post dd.eyecatch {position:relative; width:100%; max-width:320px; height:200px; background:rgba(255,255,255,0);  overflow:hidden; padding:0; }
.custom-post span.imgframe {display:inline-block; width:100%; height:100%; margin:0; vertical-align:top; overflow:hidden;}
.custom-post dd.eyecatch img {width:auto !important; height:auto !important; vertical-align:middle; margin:0;}
.custom-post dd.eyecatch .noimage {position:absolute; top:0; right:0; bottom:0; left:0; margin:0; font-size:28px; text-align:center; padding:2em 0; font-family:'Geosans-L';}
.custom-post dd.caption {padding:0 0.5em;}
.custom-post dd.caption img {display:none;}
.custom-post dd.caption.summary { 
	padding:1em 0.5em 0; height:105px;
	/*overflow: hidden; white-space: wrap; text-overflow: ellipsis;*/
}
.custom-post dd.caption.member {padding:0 0.5em;}
.custom-post dd.caption.member h4 {margin-top:1em; margin-bottom:0.25em; color:#f7f7e7; text-shadow:1px 1px 4px #333,1px 1px 10px #777;}

.post-body section#custom-field {padding:8px 16px;}
.post-body section#custom-field h3.member {border:none; padding-left:0; margin-top:1em; margin-bottom:0.25em; color:#f7f7e7; text-shadow:1px 1px 4px #333,1px 1px 10px #777;}


/*
 =============== Related Post, and So on ===============
*/

.blog-sel-trio p {font-size:14px; line-height:1.5em; margin-top:0;}
.blog-sel-trio .post-tn {display:block; float:left; width:64px; height:64px; margin:0 8px 8px 0; background:rgba(0,0,0,0.2); overflow:hidden;}
.blog-sel-trio .post-tn {display:block; float:left; width:64px; height:64px; margin:0 8px 8px 0; background:rgba(0,0,0,0.2); overflow:hidden;}
.blog-rel {padding:10px 4px;}
.blog-rel th, .blog-rel td {border:none; padding-top:0; padding-bottom:0;} 
.blog-rel .post-tn {display:block; width:100px; height:100px; margin:4px 2px; background:rgba(0,0,0,0.15); overflow:hidden;}

#policy ol {margin:2em 0;}
#policy ol li {	line-height:1.7em; font-size:20px; margin:1em 0;}

#recent-post th div.post-tn {width:75px; height:75px; background:rgba(0,0,0,0.2); overflow:hidden;}
#recent-post td {line-height:1.5em; padding-right:0;}

table.blog-rel div.post-tn-100 {width:100px; height:100px; background:rgba(0,0,0,0.2); overflow:hidden;}
table.blog-rel div.post-tn-150 {width:150px; height:150px; background:rgba(0,0,0,0.2); overflow:hidden;}

/* pickup_cat-XXXXX.php */
#list-inner .item-cell {
	border-radius:6px; border:2px solid transparent; background:rgba(0,0,0,0.1); transition:all 0.3s linear 0s;
}
#list-inner .item-cell:hover {
	border:2px solid rgba(255,255,255,0.75); background:rgba(255,255,255,0); transition:all 0.3s linear 0s;
}
.bg-vgreen #list-inner .item-cell * {color: color:#333; text-shadow:none;}
.bg-vgreen #list-inner .item-cell a {color: color:#333; text-shadow:none;}


.bg-white #list-inner .item-cell {border-radius:6px; border:2px solid transparent; background:rgba(155,155,155,0.2); transition:all 0.3s linear 0s;}
.bg-white #list-inner .item-cell * {color: #666;} 
.bg-white #list-inner .item-cell:hover {border:2px solid rgba(155,155,155,0.75); background:rgba(255,255,255,0); transition:all 0.3s linear 0s;}

.bg-photo #list-inner .item-cell {border-radius:6px; border:2px solid transparent; background:rgba(0,0,0,0.3); transition:all 0.3s linear 0s;}
.bg-photo #list-inner .item-cell:hover {border:2px solid rgba(255,255,255,0.75); background:rgba(0,0,0,0.1); transition:all 0.3s linear 0s;}


/*
 =============== image Effects ===============
*/

.imgframe {overflow:hidden;}

.triangle-lt {display:inline-block; transition: all 0.33s linear 0s;}
.triangle-lt + * {position:relative;}
.triangle-lt:after {
	position:absolute;
	top: 0;
	left: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;	
	border-bottom:50px solid transparent;
	border-left:50px solid rgb(84,22,33); 
}

.triangle-lt:hover { 
	-webkit-transform: scale(1.05);
	-moz-transform: scale(1.05);
	-o-transform: scale(1.05);
	-ms-transform: scale(1.05);
	transform: scale(1.05);
	transition: all 0.1s linear 0s;
}

.triangle-lt-slight, .triangle-lt-slight * {transition: all 0.33s linear 0s;}
.triangle-lt-slight + * {position:relative;}
.triangle-lt-slight:after {
	position:absolute;
	top: 0;
	left: 0;
    content: "";
    display: block;
    width: 0;
    height: 0;	
	border-bottom:35px solid transparent;
	border-left:35px solid rgb(84,22,33); 
}

.triangle-lt-slight:hover h2, .triangle-lt-slight:hover img  { 
	-webkit-transform: scale(1.035);
	-moz-transform: scale(1.035);
	-o-transform: scale(1.035);
	-ms-transform: scale(1.035);
	transform: scale(1.035);
	transition: all 0.175s linear 0s;
}

span.galthumb {
	display:inline-block; width:140px; height:140px; margin:0.35em 0.35em 0 0;
	background-size:cover !important; background-repeat:no-repeat !important; background-position:center center !important;
}



/* Tablet Portrait size to Base 996px */
@media only screen and (min-width: 768px) and (max-width: 995px) {



}


/* All Mobile Sizes */
@media only screen and (max-width: 767px) {

	#kanban.front-page { width: 100%; height: 75%;}
	#kanban-bglayer.front-page ul.slides li {
		margin:0;padding:0; width:auto; height:75vh; 
		position:relative;
		background-size:cover; background-position:center center; background-repeat:no-repeat;
		background-attachment:scroll;
	}

	#kanban-bglayer.front-page ul li p img.slider-catchcopy {width:auto; height:56px;}

	#order-flow table th {width:auto; min-width:auto; font-weight:bold; padding-top:1.25em; border:none;}
	#order-flow table td { padding-bottom:1.25em;}
	
	.custom-post.upper {padding-bottom:3em;}
		
}

/* Mobile Portrait Size to Mobile Landscape Size */
@media only screen and (max-width: 479px) {

	#kanban, #contact {height:400px;}
	#kanban-inner { padding-top:135px;}
	
	#kanban.front-page { width: 100%; height: 100vw;  }
	#kanban-bglayer.front-page ul.slides li {height:100%; min-height:460px;}
	#kanban-bglayer.front-page ul li p img.slider-catchcopy {display:none;}
	#kanban-bglayer.front-page ul li p img.slider-catchcopy-smp {display:block; width:100%; height:auto; margin:0 auto !important;}

	#kanban.page-fabric, #kanban.page-interior, #kanban.page-reform, #kanban.page-biz { height:350px;}

	#kanban-bglayer.page-fabric, #kanban-bglayer.page-interior, #kanban-bglayer.page-reform, #kanban-bglayer.page-biz  {background-size:auto 350px; background-position:center top;}
	
	#greetings h3 {margin:0 0 0; padding:0; font-weight:normal; font-size:140%; text-align:center;}

	
	span.galthumb { margin:3px;}

	#outline .gbtn-gray-slim {display:block; width:90%; margin:0.75em auto;} 

	#kanban.blog-home { height:300px; }
	#kanban-inner.blog-home { padding-top:50px; }
	#co-kanban-midlayer { padding-top:35px;}
	#co-kanban {height:180px;}
	
	#contact h2 {font-size:40px;}

}


/* */