@charset "UTF-8"; 

@font-face{ 
	font-family: 'yajirushi'; 
	src: url('../font/yajirushi.eot'); /* IE9以上用 */
	src: url('../font/yajirushi.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/yajirushi.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/yajirushi.otf') format('opentype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}

@font-face{ 
	font-family: 'makinas4f'; 
	src: url('../font/Makinas-4-Flat.eot'); /* IE9以上用 */
	src: url('../font/Makinas-4-Flat.eot?#iefix') format('embedded-opentype'), /* IE8以前用 */
		url('../font/Makinas-4-Flat.woff') format('woff'), /* モダンブラウザ用 */
		url('../font/Makinas-4-Flat.otf') format('opentype'); /* iOS, Android用 */
	font-weight: normal; /* 念の為指定しておきます */
	font-style: normal;
}


/*  Table of Content: =General =Nav =Slider =About =Portfolio =Testimonials =Contact =Footer
====================================================================== */



/* General
====================================================================== */


body{
	background: #fff;
	height: 100%;
	margin: 0;
	padding: 0;
	font-family:Verdana,"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
}

h1, h2, h3, h4, h5, h6 {
	color: #820068; color: rgba(130, 0, 104, 0.8);
	font-weight: normal;
}

blockquote {
	border-left: 5px solid #820068;
	border-left: 5px solid rgba(130, 0, 104, 0.8);
}

.dark {
	background:;
	color: #dbdbdb; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.mgl {
	margin-left: -20px;
}

.mgb {
	margin-bottom: 20px;
}




.page-title { background-color: #d1d1d0; border-bottom: 1px solid #bdbdbc; outline: 1px solid #fff;  repeat; text-align: center; }
.page-title .shadow { background: url('../img/shadow-top.png@1367054543') top center no-repeat; }
.page-title .container p { color: #666666; }

doesnotexist:-o-prefocus, .page-title { outline: none; }

.main-section { padding: 1em 0; }
.main-section > h1:first-child { margin: 2em 0 1em; text-align: center; text-transform: uppercase; }

h1.center, h2.center, h3.center, h4.center, h5.center, h6.center { text-align: center; }

.divider { background: url('../img/divider-shadow.png@1365160891') no-repeat top center; height: 9px; margin: 2em 0 3em; }

.icons-delicious, .icons-digg, .icons-friendfeed, .icons-facebook, .icons-rss, .icons-google-buzz, .icons-tumblr, .icons-twitter, .icons-livejournal, .icons-reddit, .icons-stumbleupon, .icons-yahoo { width: 24px; height: 24px; }

.icons-plus-delicious, .icons-plus-deviantart, .icons-plus-digg, .icons-plus-dribble, .icons-plus-facebook, .icons-plus-flickr, .icons-plus-google, .icons-plus-rss, .icons-plus-twitter, .icons-plus-yahoo { width: 32px; height: 32px; }

.icons-phone, .icons-gmail, .icons-maps, .icons-browser { width: 20px; height: 20px; }

.icons-quote { width: 100px; height: 100px; }


.container { padding: 0 20px;  }

.navbar-fixed-top { margin-bottom: 0; position: fixed; }

@media only screen and (max-width: 979px) { .navbar .container { width: 90%; padding: 0; } }



/* Nav
====================================================================== */

#header {
	height: 50px;
	padding: 0 auto;
	margin: 0 auto;
	text-align: center;
	}

#header a {
	text-decoration: none;
	color: darkgrey;
}

header {
	background-color: #fff ;
	background: repeat-x;
	height: 50px;
	padding: 0 auto;
	margin: 0 auto;
	text-align: center;
}
header .logo {
	text-align: right;
}

.selectnav-container {
	padding: 4px 0;
	background:  repeat-x;
	font-size: 10px;
	font-size:1.0rem;
}

.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sf-menu li {
	position: relative;
	
}
.sf-menu li:hover > a, .sf-menu li.active > a {
	color: #00dcff;
}
.sf-menu ul {
	position: absolute;
	display: none;
	margin-top: 7%;
	left: 10%;
	z-index: 99;
	#fff-space: nowrap;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	-ms-border-radius: 3px;
	-o-border-radius: 3px;
	border-radius: 3px;
	background-color: #ffffff;
	background-color: rgba(0, 0, 0, 0.7);
}
.sf-menu > li { float: left; width: 8%; padding: 10px 0; }
.sf-menu a { display: block; position: relative; text-decoration: none; color: #666666; }
.sf-menu ul li { padding: 0 10px; min-width: 60px; }
.sf-menu ul a { border-top: 1px solid #000; padding: 7px 0; color: #ffffff;}
.sf-menu ul ul { top: 0; left: 100%; }

/* default style */
.selectnav { display: none; }

/* small screen */
@media screen and (max-width: 767px) { .js #nav { display: none; }
  .js .selectnav { display: block; width: 100%; margin: 0; }
  .selectnav-container { margin: 0; padding: 0; } }
nav { z-index: 2000; position: fixed; top: 30px; right: 2%; }
nav li { list-style: none; display: inline; margin-right: 0.9em; }
nav li.active a { color: #820068; color: rgba(130, 0, 104, 0.8); }
nav li a { text-decoration: none; color: darkgrey; }
nav li a:hover { text-decoration: none; color: #820068; color: rgba(130, 0, 104, 0.8); }

@media (min-width: 860px) { nav li { margin-right: 2em; } }
@media (min-width: 1000px) { nav li { margin-right: 3em; } }
@media (min-width: 1200px) { nav li { margin-right: 5em; } }
.menu { display: none; }

.wrapper { width: 100%; overflow: hidden; }

.inner { float: right; width: 100%; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

@media (max-width: 768px) { nav { position: fixed; top: 80px; overflow: auto; display: block; left: -220px; width: 220px; height: 100%; padding: 1em 0 0 0; background: url('../img/bg-nav-vertical.png@1365229694') repeat-y; -webkit-transition: left 0.5s; -moz-transition: left 0.5s; -ms-transition: left 0.5s; -o-transition: left 0.5s; transition: left 0.5s; }
  nav.open { left: 0; }
  nav.open ~ .wrapper .inner { margin-right: -220px; }
  nav #nav li { display: block; margin: 0; padding: 0; border: 0; outline: 0; height: 44px; list-style: none; }
  nav #nav li.active { background: url('../img/bg-nav-active.png@1365230384') no-repeat right center; }
  nav #nav li.active a { color: #820068; color: rgba(130, 0, 104, 0.8); }
  nav #nav a { height: 44px; text-align: right; padding: 8px 30px 0 0; display: block; color: darkgrey; text-decoration: none; }
  nav #nav a:hover { color: #820068; color: rgba(130, 0, 104, 0.8); }
  .brand { display: block; width: 200px; margin: 0 auto; text-align: center; }
  a.menu { position: absolute; display: inline; background: url('../img/menu2.png@1365766758'); opacity: 0.5; top: 24px; left: 40px; margin: 0; width: 32px; height: 32px; float: left; text-decoration: none; text-indent: -99999px; }
  a.menu.menu:hover { cursor: pointer; } }


/* Banner
====================================================================== */

.banner { margin: 0 0 2em; background: url('../img/bg-slider/bg_slider-default.png@1365927357') repeat-x top center; background-color: #eaeaea; height: 512px; -webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); box-shadow: 0 0 1em rgba(0, 0, 0, 0.5); text-align: center; }
.banner .flexslider .slides img { width: auto; }
.banner .flex-control-nav { position: absolute; bottom: -20px; }
.banner .flexslider-banner + ul { height: 512px; position: relative; text-align: center; padding: 10px; }
.banner li h1 { font-size: 60px; line-height: 90px; font-family: "Overlock", cursive; color: #820068; color: rgba(130, 0, 104, 0.8); font-weight: normal; }
.banner li p { color: darkgrey; font-size: 18px; }
.banner li > img { margin-left: auto; margin-right: auto; }

@media only screen and (max-width: 767px) { .intro { height: 500px; }
  .intro .intro-text { width: 90%; }
  .intro .intro-text h1 { font-size: 30px; line-height: 40px; margin: 40px 0; } }
.flex-control-paging li a.flex-active { background: #820068; background: rgba(130, 0, 104, 0.8); }

/* Slider
====================================================================== */

.full_width { max-width: 100%; width: 100%; max-height: 800px; position: absolute; top: 0; margin-top: 79px; }

@media (max-width: 767px) { .full_width { margin-top: 110px; } }

/* About
====================================================================== */

.flexslider { background: none; border: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }

.flexslider-team .slides > li { overflow: hidden; margin: 0 30px 0 0; width: 250px; background: #222; border: 1px solid #444; padding: 9px; color: #666666; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; }
.flexslider-team .slides > li figure { margin: 0; outline: none; padding: 0; border: 0; max-width: 250px; height: auto; }
.flexslider-team .slides > li ul { display: block; margin: 0; }
.flexslider-team .slides > li ul li { list-style: none; display: inline; float: left; margin: 0 1em 0 0; }


/* Portfolio
====================================================================== */

.isotope-item { z-index: 2; }

.isotope-hidden.isotope-item { pointer-events: none; z-index: 1; }

ul.item-filters {
	margin: 0;
	padding: 0 30px;
	list-style: none;
	display: block;
	background: #f5f5f5;
	height: 36px;
	line-height: 36px;
}
ul.item-filters li {
	float: left;
	padding: 0 2%;
	line-height: 36px;
	cursor: pointer;
}
ul.item-filters li.active {
	background-color: #fff253;
	color: #666;
}

.container ul.item-filters {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
}

.item-portfolio {
	text-align: center;
	overflow: hidden;
	float: left;
	position: relative;
	-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.item-portfolio a, .item-portfolio a img {
	display: block;
	position: relative;
}

.item-portfolio a {
	overflow: hidden;
}
.item-portfolio a > div {
	position: absolute;
	background: #333;
	background: rgba(75, 75, 75, 0.7); width: 100%;
	height: 100%;
}
.item-portfolio a > div span {
	display: block;
	padding: 20px 0;
	margin: 60px 20px 20px 20px;
	font-weight: normal;
	color: #fff; color: rgba(255, 255, 255, 0.6);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(75, 75, 75, 1);
	border-bottom: 1px solid #666; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.3);
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.2);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.2);
}
.item-portfolio a > div span strong {
	color: #fff; color: rgba(255, 255, 255, 0.9);
	text-transform: uppercase;
}

#items_normal-container { padding: 1em 1em; position: relative; }
#items_normal-container .item-portfolio { width: 340px; height: 255px; margin: 10px; }

@media (min-width: 768px) and (max-width: 979px) { #items_normal-container .item-portfolio { width: 336px; height: 237px; margin: 5px; } }
@media (max-width: 767px) { #items_normal-container .item-portfolio { max-width: 300px; max-height: 225px; margin: 5px; } }
@media (max-width: 480px) { #items_normal-container { max-width: 410px; margin: 0 auto 20px; }
  #items_normal-container .item-portfolio { max-width: 400px; max-height: 300px; margin: 5px; } }
#items_centered-container { margin: 0 auto 20px; }
#items_centered-container .item-portfolio { width: 312px; /* also need to change the width in isotope function */ height: 234px; margin: 10px; }

.items_container .item-portfolio {
	width: 400px;
	text-align: center;
	overflow: hidden;
	float: left;
	position: relative;
}
.items_container .item-portfolio a, .items_container .item-portfolio a img {
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
}
.items_container .item-portfolio a {
	overflow: hidden;
}
.items_container .item-portfolio a > div {
	position: absolute;
	background: #f2f2f2;
	background: rgba(255, 242, 83, 0.8);
	width: 100%;
	height: 100%;
}
.items_container .item-portfolio a > div span {
	display: block;
	padding: 20px 0;
	margin: 60px 20px 20px 20px;
	font-weight: bold;
	color: #666;
	color: rgb(23, 23, 23);
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid #fff;
	-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.1);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1), 0 -10px 0 rgba(255, 255, 255, 0.1);
}
.items_container .item-portfolio a > div span strong {
	color: #666;
	color: rgba(22, 22, 22, 1);
	text-transform: uppercase;
}






/* Footer
====================================================================== */

#footer {
	background: #f2f2f2;
	padding: 20px 30px;
	text-align: left;
	bottom: 0;
	margin: 0;
}

#footer,
#footer p,
#footer a{
	color: #222 !important;
}

#footer p i {
	color: #222;
	font-size: 15px;
	display: inline-block;
	width: 15px;
	text-align: left;
}

#footer a:hover {
	color: #fff;
}

#footer h3 {
	padding: 2px 0px !important;
	margin-bottom: 10px;
	color: #222;
	text-shadow: 0px -1px px #000;
	
}

#under-footer {
	padding: 0px 20px;
	min-height: 50px;
	background: #fff253;
	color: #666;
}




#under-footer-logo  {
	height: 46px;
}

#under-footer-logo a{
	color: #999;
	text-decoration: none;
	line-height: 48px;
	margin-left: 5px;
	font-size: 16px;
	font-size: 1.6 em;
}

#under-footer-logo span {

}

#under-footer-copyright {
	margin: 17px 0px 0px 0px;
	font-size: 10px;
	font-size: 1.0 em;
}

#under-footer-copyright a {
	color: #999;
}



#under-footer-back-to-top {
	margin: 10px;
	z-index: 999;
}

#under-footer-back-to-top a {
	width: 30px;
	height: 30px;
	display: block;
	background-color: #b0b0b0;
	background-image: url(../img/scroll-top-top.png);
	background-repeat: no-repeat;
	background-position: 50%;
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition: all 0.1s ease-in-out;
	-o-transition: all 0.1s ease-in-out;
	-ms-transition: all 0.1s ease-in-out;
	transition: all 0.1s ease-in-out;
}

#under-footer-back-to-top a:hover {background-color: #aaa;}


.f1  {
	font-size: 6px;
}

.kanji {	
	margin-top:16px;
	padding-left:4px;
}

.kanji a {
	border: 1px solid #222;
	padding: 5px;
	background: #fff;
	margin-right: 14px;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 2.4;
}

.next {
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	margin-top: 24px;
	text-align: center;
}

.next a {
	float: left;
	margin-right: 20px;
	display: block;
	color: #FFFF25;
	background: #666;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	padding: 14px;
	width: 130px;
}

.next a:hover {
	color: #00DCFF;
	background: #0039B6;
	text-decoration: none;
	border: none;
}


.paren {
		font-size: 90%;
		color: #444444;
}

/*
.u_line {
	background:linear-gradient(transparent 37.5%, #FFFA6D 62.5%);";
	padding: 0.3rem;
}
*/	

.st  {
	font-weight: bold;
}

#kumi h5 {
	font-size: 10rem;
	font-weight: normal;
	color: #666;
	margin-top: 200px;
	text-align: center;
}

#kumi h5 a{
	color: #222;
	font-family: yajirushi, sans-serif;
}

#kumi h5 a:hover{
	color:#1CC2DD;
	text-decoration: none;
}



#kumi h5 span.title{
	font-size: 1.4rem;
	vertical-align: middle;
	margin-left:  40px;
}


@media (max-width:480px) {
#kumi h5 a{
	font-size: 6.0rem;
}

}



.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; width:100%;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }