@charset "UTF-8";

/* Reset
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,input,textarea,p,blockquote,th,td {
margin: 0;
padding: 0;
}
address,em { font-style: normal; }
strong,th { font-weight: normal; }
table {
border-collapse: collapse;
border-spacing: 0;
}
th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
img,fieldset { border: 0; }
li { list-style-type: none; }

/* Fonts
------------------------------------------------------------*/
body {
font-size: 75%; /* IE */
-webkit-text-size-adjust: none;}
html>/**/body { font-size: 13px; } /* Except IE */

/*IE*/
@font-face {
	font-family: togoshi-mono;
	src: url(../font/togoshi-mono.eot);
}
/*others*/
@font-face {
    font-family: togoshi-mono; 
    src: url(../font/togoshi-mono.ttf)format("truetype"); 
}
/*IE*/
@font-face {
	font-family: Cousine-Bold;
	src: url(../font/Cousine-Bold.eot);
}
/*others*/
@font-face {
	font-family: Cousine-Bold;
	src: url(../font/Cousine-Bold.ttf)format("truetype");
}
/* clearfix
------------------------------------------------------------*/
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
}

.itemNotes {
	display: inline;
	float: right;
	width: 136px;
	margin-right: 3px;
}

body,td,th {
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
}
body {
    background: #fff;
    font-weight: 300;
	color: #666;
	width: 100%;
	height: 100%;
	text-align: center;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
img {
	max-width: 100%;
}

#wrapper {
	margin : 0 auto;
	text-align: center;
}
section {
	padding-top: 0px;
	height: 100%;
	min-height: 500px;
	width: 100%; 
}
.content {
	max-width: 880px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 100px;
	margin-left: auto;
}
.titlebox {
	max-width: 980px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 100px;
	margin-left: auto;
	font-size: 18px;
	font-family: 'Comfortaa', cursive;
	letter-spacing: 3px;
}
h2 {
	margin: auto 0 10px;
	padding-top: 100px;
	color: #83afbc;
	font-size: 20px;
	font-family: 'Comfortaa', cursive;
	letter-spacing: 2px;
	font-weight : normal;
}

h5 {

	margin-bottom: 15px;
	margin-top: 50px;
	padding-top: 30px;
	color: #83afbc;
	font-family: 'Comfortaa', cursive;
	font-weight : normal;
	font-size: 18px;
}


#hosoku {

	margin-bottom: 5px;
	margin-top: 0px;
	color: #999;
	font-family: 'Comfortaa', cursive;
	font-weight : normal;
	font-size: 13px;
}
 
 
p {
	line-height: 20px;
	color: #666;
	font-size: 13px;
	letter-spacing: 2px;
	font-weight : normal;
}

/*@header*/

/* ドロップダウンメニュー
------------------------------------------------------------*/
.menu {
    position: relative;
    width: 100%;
    height: 40px;
    max-width: 1000px;
    margin: 0 auto;
}

.menu > li {
    float: left;
    width: 20%; /* グローバルナビ5つの場合 */
    height: 40px;
    line-height: 40px;
    background: none;
    text-align:center;
    
}

.menu > li a {
    display: block;
    color: none;
}

.menu > li a:hover {
     color: none;
}

ul.menu__second-level {
    visibility: hidden;
    opacity: 0;
    z-index: 1;
}

ul.menu__third-level {
    visibility: hidden;
    opacity: 0;
}


.menu > li:hover {
    background: none;
    -webkit-transition: all .5s;
    transition: all .5s;
}

.menu__second-level li {
    border-top: 1px solid #999;
}

.menu__third-level li {
    border-top: 1px solid #999;
}

.menu__second-level li a:hover {
    background: none;
}

.menu__third-level li a:hover {
    background:  none;
}



/* floatクリア */
.menu:before,
.menu:after {
    content: " ";
    display: table;
}

.menu:after {
    clear: both;
}

/* シングルメニュー*/
.menu > li.menu__single {
    position: relative;
}

li.menu__single ul.menu__second-level {
    position: absolute;
    top: 40px;
    width: 100%;
    background: none;
    opacity:1;
    transition: all .2s ease;
}

li.menu__single:hover ul.menu__second-level {
    top: 50px;
    visibility: visible;
    
}

/*----トップ画像----*/

h1{
	text-indent: -9999px;
	font-weight : normal;
}

.topbg {
 width: auto;
 height:530px;
 border: none;
 background-color: #fff;
 background-image: url(img/top.jpg);
 background-repeat: repeat-x;
 padding: 0px;
 margin-top:0px;
}



/* naviサイトコンテンツ
------------------------------------------------------------*/
#navWrap {
	width: 100%;
	height: 3.75em; 
	background-color: #fff; 
	background-color: rgba(255,255,255,0.5);	
	position: fixed;
	top: 0;
	text-align: center;
	z-index: 1000;
}
#nav {
	width: 85%;
	height: 3.75em; 
	font-family: 'Comfortaa', cursive;
	letter-spacing: 2px;
	margin: 0 auto;
	z-index: 1000;
	
}
#nav a {
	color: #666;
	text-decoration: none;

	display: block;
	width: 20%;
	height: 100%;
	
	font-size: 1.5em; 
	line-height: 2.5em;
	text-align: center;
	-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;
}
#nav a:hover {
	color: #83afbc;
	background-color: #none;
}


/* portfolio(ポートフォリオ)
------------------------------------------------------------*/
	
.portbox2 {
	
	width: 100%;
	float:left;
	padding-right: 20px;
	margin-bottom: 30px;
 
	}	

hr {
	width: 100%;
	border-top: 1px solid #999;
	margin-bottom: 10px;
 
	}	

/*------------------------------------------------------------*/

#portName {
	text-align: center;
	margin: 0 auto;
	color: #666;
	font-family: 'Comfortaa', cursive;
	font-weight: normal;
}

.portText h5 {

	margin-bottom: 10px;
	margin-top: 10px;
	color: #83afbc;
	font-family: 'Comfortaa', cursive;
	font-weight : normal;
}
.portText {
	padding-top: 20px;
	text-align: left;
	width: 70%;
	margin: 0 auto; 
}
.portimg {
	margin-top: 24px;
	margin-left: 40px;
	padding: 0 10px;
	text-align: left;
	float: left;
	width: 200px;
}
.portText a:hover, a:active {
	text-decoration: underline;
}
#port dl{
	text-align: left;
	width: 100%;
	margin: 0 auto;
}
#port dl dt{
    clear:left;
    float:left;
    padding: 0.2em;
    width: 5em;
}
 
#port dl dd{
    margin:0;
    padding: 0.2em;
    border-bottom:1px dotted #CCC;
}
#port a {
	color: #83afbc;
	text-decoration: none;
	
}
#port a:hover, a:visited {
	color: #83afbc;
	text-decoration: none;
}




/* gallery
------------------------------------------------------------*/
#galleryContent {
	max-width: 800px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 100px;
	margin-left: auto;
}
#tabSelector {
	width: 330px;
	margin: 0 auto;
}

#tabSelector a:link {
	color: #000;
	text-decoration: none;
	margin-right: 5px;
	margin-left: 5px;
	display: block;
	width: 100px;
	float: left;
	line-height: 10em;
	border-radius: 3px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
}
#tabSelector a:visited {
	color: #000;
	text-decoration: none;
}
#tabSelector a:hover {
	background-color: #83afbc;
	color: #fff;
	text-decoration: none;
}
#tabSelector a.active {
	background-color: #83afbc;
	color: #fff;
	text-decoration: none;
}
.motion {
	width: 100%;
	display: none;
	margin-top: 24px;
}
#motion_area1 {
	display: block;
}

.glbox {
	margin-bottom: 15px;
	}
	
.glboxBIG {
	
	margin-top: 80px;
	}
	
	
.glTextBox {
	line-height: 20px;
	color: #666;
	font-size: 12px;
	letter-spacing: 2px;
	font-weight : normal;
	margin-bottom: 20px;
}





/* profile
------------------------------------------------------------*/
#proName {
	text-align: center;
	margin: 0 auto;
	color: #666;
	font-family: 'Comfortaa', cursive;
	font-weight : normal;
}
#proName h3 {
	font-size: 20px;
	font-weight : normal;
	
}
#proImage {
	margin: 20px 0 20px 0;
	display: inline-block;
	border-radius: 50%;
	width: 300px;
	height: 300px;
}
.proText h5 {

	margin-bottom: 10px;
	margin-top: 10px;
	color: #83afbc;
	font-family: 'Comfortaa', cursive;
	font-weight : normal;
}
.proText {
	padding-top: 20px;
	text-align: left;
	width: 70%;
	margin: 0 auto; 
}
.proimg {
	margin-top: 24px;
	margin-left: 40px;
	padding: 0 10px;
	text-align: left;
	float: left;
	width: 200px;
}
.proText a:hover, a:active {
	text-decoration: underline;
}
#pro dl{
	text-align: left;
	width: 100%;
	margin: 0 auto;
}
#pro dl dt{
    clear:left;
    float:left;
    padding: 0.2em;
    width: 5em;
}
 
#pro dl dd{
    margin:0;
    padding: 0.2em;
    border-bottom:1px dotted #CCC;
}
#pro a {
	color: #83afbc;
	text-decoration: none;
	
}
#pro a:hover, a:visited {
	color: #83afbc;
	text-decoration: none;
}





/* contact
------------------------------------------------------------*/


#contactTextBox {
	padding-top: 20px;
	float: none;
	text-align: center;
	width: 60%;
	margin: 0 auto; 
	
}
#contactTextJa {
	margin-bottom: 20px;
}

#contactTextBox a:link {
	color: #83afbc;
	text-decoration: none;
}
#contact a:hover {
	color: #83afbc;
	text-decoration: none;
}
form {
	 padding-top: 30px;
	 padding-bottom: 10px;
	 width: 60%;
	 max-width: 100%;
	 margin: auto;
	 display: block;
	 float: left;

}
form ol li {
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
	background: none;
	border: none;
	float: left;
}

form label {
	float: left;
	font-size: 13px;
	width: 110px;
}

form input,
form textarea {
	background: #83afbc;
	border: none;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	-khtml-border-radius: 3px;
	border-radius: 3px;
	outline: none;
	padding: 5px;
	width: 800px;
}

form input:not([type=submit]):focus,
form textarea:focus {
	background: #ecf0f1;
}

form .button {
	background: #83afbc;
	width: 70px;
	height: 70px;
	border: none;
	-moz-border-radius: 35px;
	-webkit-border-radius: 35px;
	-khtml-border-radius: 35px;
	border-radius: 35px;
	color: #ffffff;
	display: block;
	font: 15px;
	letter-spacing: 1px;
	margin: auto;
	text-transform: uppercase;
	margin-top:20px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	-webkit-appearance: none;
}
form .button:hover {
	background:#333;
	cursor: pointer;
}

.comments-open-content p {
	margin-bottom: 12px;
}
#tempForm form {
	 padding-top: 20px;
	 padding-bottom: 20px;
	 width: 800px;
	 max-width: 100%;
	 margin: auto;
	 display: block;
	 float: none !important;
}

::-webkit-input-placeholder {
    color:    #fff;
}
:-moz-placeholder {
    color:    #fff;
}

/*@contact end*/

footer{
	color: #999999;
	padding : 24px 0;
	margin-top: 100px;
	font-family: helvetica;
}

a.scrollDown {
	display: block;
	height: 50px;
	margin: 0 auto 100px;
	width: 100%;
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../img/scrollDown.png);
	background-repeat: no-repeat;
	background-position:center;
	opacity: 1;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	-ms-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	
}

/* pagetop
------------------------------------------------------------*/
a.scrollDown:hover {
	opacity: 0.5;
}



#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	z-index: 8000;
}
#page-top a {
	display: block;
	height: 50px;
	width: 50px;
	background-attachment: scroll;
	background-color: transparent;
	background-image: url(../img/scrollUp.png);
	background-repeat: no-repeat;
	background-position: 0 0;
	text-decoration: none;
	font-family: 'Comfortaa', cursive;
	font-size: 14px;
	color: #83afbc;
	opacity: 1;
	-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;
	

}
#page-top a:hover {
	opacity: 1;
	color: #83afbc;
	font-family: 'Comfortaa', cursive;
	font-size: 14px;
}


::-moz-selection  { background:#83afbc; color:#FFF;}

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

@media screen and (max-width: 1024px) {
		section .content {
		width: 90%;
		margin-top: 0;
		margin-right: auto;
		margin-bottom: 100px;
		margin-left: auto;
		}
}

@media screen and (max-width: 768px) {
		
		/*nav*/
		#navWrap {
			height: 3.25em;
		}
		#nav {
			width: 100%;
			height: 3.25em;
			margin: 0;
			top: auto;
			left: auto;
		}
		#nav a{
			font-size: 1.1em;
			line-height: 3.25em;
		}
		
		
		/*gallery*/
		#tabSelector {
			width: 100%;
		}
		
		#tabSelector a:link {
			margin: 0;
			width: 33.3333%;
			line-height: 2.5em;
			
		}
		.ch-grid li {
			width: 160px;
			height: 160px;
			margin: 5px;
		}
		.ch-item {
			box-shadow: none;
		}

		.ch-info h3 {
			font-size: 1em;
			margin: 0 14px;
			padding: 29px 0 0 0;
			height: 132px;
			font-weight : normal;
		}
		
		.ch-info p {
			display: none;
		}

		/*pro*/
		.proText {
			float: none;
			width: 100%;
		}
		
		/*Blog*/
		.blogArticle {
			width: 50%;
		}
		
		/*Contact*/
		#contactTextBox {
			width: 100%;
			float: none;
			line-height: 1.4em;
		}
		form {
			width: 100%;
			float: none;
		}

		#page-top {
		}
			
		
}

@media screen and (max-width: 640px) {
		body {
			font-size: 0.8em;
			line-height: 1.4em;
		}
		section {
			min-height: 960px;
		}
		#nav a{
			font-size: 0.8em; 
		}
		#header {
			padding-top: 3.25em;
		}
		
		
		

		/*Contact*/
		form ol li {
			padding: 0;
			margin-bottom: 2px;
			float: none;
		}
		form label {
			float: none;
			width: 100%;
		}
		form input, form textarea {
			width: 100%;
		}
		form .button {
			float: left;
			margin-right: 0px;
		}
}
@media screen and (max-width: 480px) {
		section {
			min-height: 480px;
		}
		

		
		
/* inline seat
------------------------------------------------------------*/		
.fancybox-margin{
	margin-right:15px;}
	
.style1 {color: #83afbc;}