@charset "UTF-8";
@import "reset5.css";

body { color:#333; line-height:1; padding: 0; margin: 0; position: relative; overflow-x:hidden; background-color: #e7e8eb; color: #333333 }
html { overflow-y: scroll; padding: 0; margin: 0; }

* html body { font-family: "Granjon","Times New Roman", Times, serif }
*:first-child+html body { font-family: "Granjon","Times New Roman", Times, serif }
html:not(:target) body { font-family: serif　}

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic;vertical-align:bottom }

/* !font-size 12px default setting */
body { font-size: 12px; line-height: 2em; letter-spacing: 0.08em }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

/* !clearfix */
hr { display: none; }

.cfix { zoom:1; }
.cfix:after{
    content:"";
    clear:both;
    display:block;
    height:0;
}


/* margin-bottom
=========================================*/
.mb0 { margin-bottom:0 !important; }
.mb3 { margin-bottom:3px !important; }
.mb4 { margin-bottom:4px !important; }
.mb5 { margin-bottom:5px !important; }
.mb7 { margin-bottom:7px !important; }
.mb10 { margin-bottom:10px !important; }
.mb12 { margin-bottom:12px !important; }
.mb15 { margin-bottom:15px !important; }
.mb20 { margin-bottom:20px !important; }
.mb25 { margin-bottom:25px !important; }
.mb30 { margin-bottom:30px !important; }
.mb40 { margin-bottom:40px !important; }
.mb50 { margin-bottom:50px !important; }

.tx10 { font-size: 10px }
.tx11 { font-size: 11px }
.tx12 { font-size: 12px }
.tx13 { font-size: 13px }
.tx14 { font-size: 14px }
.tx15 { font-size: 15px }
.tx16 { font-size: 16px }
.tx18 { font-size: 18px }
.tx24 { font-size: 24px }

.fltR { float: right; }
.fltL { float: left; }

.txtR { text-align: right; }
.txtL { text-align: left; }
.txtC { text-align: center; }

/* !Links */
a:link { color: #333; text-decoration: none; }
a:visited { color: #333; text-decoration: none; }
a:hover { color: #ccc; text-decoration: none; }
a:active { color: #ec0f2e; text-decoration: none; }

#wrapper { width: 100%; padding: 0; margin: 0; text-align: left; }
#wrapper_inner { padding: 0; margin: 0; overflow: hidden }

#intro { position: relative; width: 100%; height: 100vh; }
#intro .vis { position: absolute; left: 50%; top: 230px; margin: 0 0 0 -33.33%; display: none }
#intro h1 { position: fixed; left: 50%; top: 40px; margin-left: -27px }

#title { min-height: 240px; position: relative; }
#title h1 { position: fixed; left: 62px; top: 40px; z-index: 10 }
#title h2 { position: relative; padding: 120px 240px; text-align: left; font-size: 22px; font-weight: normal; letter-spacing: 0.32em; opacity: 0 }
#nav { position: absolute; width: 120px; right: 80px; top: 60px; z-index: 10 }
#nav li { }
#nav li { }
#nav li a { padding: 6px }


#worksWrap { overflow: hidden; }

#works { margin: 0 0 110px; padding-left: 180px }
#works li { margin-bottom: 55px; position: relative; }
#works li h3 { margin-top: 20px; font-family: "Granjon","Times New Roman", Times, serif; font-weight: normal; letter-spacing: 0.1em; }
#works li .thumsWrap { overflow: hidden; position: relative; height: 150px; opacity: 0 }
#works li .thumsWrap ul { position: absolute; left: 0; top: 0; height: 150px; width: 10000px }
#works li .thumsWrap li { position:relative; display:block; margin: 0; float: left; cursor: pointer; }
#works li .thumsWrap li img { width: auto; height: 150px }
#works li span { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: #e7e8eb }
#works li .thumsWrap .scBtn { width: 73px; position: absolute; right: -73px; top: 57px; /*display: none*/ }
#works li .thumsWrap .scBtn .prev { float: left; width: 36px; height: 36px; background: url(../img/btn_prev_s.png) no-repeat 0 0; cursor: pointer }
#works li .thumsWrap .scBtn .prev img { display: none }
#works li .thumsWrap .scBtn .next { float: right; width: 36px; height: 36px; background: url(../img/btn_next_s.png) no-repeat 0 0; cursor: pointer }
#works li .thumsWrap .scBtn .next img { display: none }

#contents { padding: 0 240px }
.contents { position: relative }
.sec { padding: 0 240px; position: absolute; left: 0; top: 0; opacity: 0; text-align: center !important }
.wh { text-align: center }
.ph { }

#about { padding: 0 240px; opacity: 0 }
#about .inner { padding: 0 }
#about h2 { font-size: 13px }
#about p { letter-spacing: 0.1em; margin-bottom: 20px }
#about .ja { margin: 0 0 55px; font-size: 11px; font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; line-height: 2em }
#about .en { font-size: 12px; font-family: "Granjon","Times New Roman", Times, serif, serif; line-height: 2em }
#about .closeBtn { position: absolute; right: 60px; top: 0; width: 36px; height: 36px; background: url(../img/closeBtn.png) no-repeat 0 0; cursor: pointer  }
#about .closeBtn img { display: none }

#gal { width: 100%; height: 100%; /*position: fixed; left: 0; top: 0; background-color: #e7e8eb;*/ }
#gal h3 { /*margin: 80px 0 0;*/ position: absolute; top: 30px; width: 100%; text-align: center; font-size: 16px; font-family: "Granjon","Times New Roman", Times, serif; font-weight: normal; letter-spacing: 0.1em; }
#gal p.num { position: absolute; right: 40px; bottom: 36px; text-align: right; font-family: "Granjon","Times New Roman", Times, serif; font-size: 14px; font-style: italic; letter-spacing: 0.1em }
#gal span.cap { position: absolute; right: 40px; bottom: 16px; text-align: right; font-size: 12px; font-style: normal; line-height: 2em }
#gal .galWrap { position: relative; min-height: 500px; padding: 40px 0; text-align: center } 
#gal .prevBtn { position: fixed; left: 20px; top: 50%; width: 36px; height: 36px; margin-top: -18px; background: url(../img/btn_prev_s.png) no-repeat 0 0; cursor: pointer }
#gal .prevBtn img { display: none }
#gal .nextBtn { position: fixed; right: 20px; top: 50%; width: 36px; height: 36px; margin-top: -18px; background: url(../img/btn_next_s.png) no-repeat 0 0; cursor: pointer }
#gal .nextBtn img { display: none }
#gal .closeBtn { position: fixed; right: 20px; top: 20px; width: 36px; height: 36px; background: url(../img/closeBtn.png) no-repeat 0 0; cursor: pointer }
#gal .closeBtn img { display: none }

#titles { position: fixed; left: 0; top: 0; width: 100%; height: 100%; text-align: center; background-color: #e7e8eb; display: none; }
#titles img { display: none; margin: 280px 0 0 }

#footer { padding: 80px 0; }
.copyrihgt { padding: 0 0 0 240px }
.top-ft .copyrihgt { padding: 0 0 0 180px }

.loading { position:fixed; left: 50%; top: 50%; margin: -9px 0 0 -9px }
#pagetop { position: fixed; width: 36px; height: 36px; right: 10px; bottom: 10px; background: url(../img/pagetop.png) transparent no-repeat 0 0; cursor: pointer; display: none }
#pagetop img { opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity:0; -khtml-opacity: 0; }

/*===============================================
●smart.css  画面の横幅が780pxまで
===============================================*/
@media screen and (max-width:780px){
	
	#intro {  }
	#intro h1 { position: absolute; left: 50%; top: 40px; margin-left: -27px; }
	#intro .vis { width: 100%; margin: 0 0 0 -50%; }
	
	#top .tp { width: 100% }
	
	#title { height: auto; min-height: inherit; text-align: left; padding: 0 20px 40px }
	#title h1 { position: relative; left: inherit; top: inherit; margin: 0; padding: 20px 0 0; width: 100%; text-align: center; }
	#title h2 { position: relative; padding: 0 20px; text-align: center; font-size: 18px; font-weight: normal; letter-spacing: 0.32em; opacity: 0 }
	#nav { position: relative; width: 100%; right: inherit; top: inherit; padding: 60px 0; text-align: center }
	#nav li { display: inline-block }

	#works { padding-left: 20px }
	#works li { margin-bottom: 40px }
	#works li h3 { margin-top: 10px; font-family: "Granjon","Times New Roman", Times, serif; font-weight: normal; letter-spacing: 0.1em; }
	
	#contents { padding: 0 }
	.contents { position: relative }
	.sec { padding: 0 0 160px; position: relative; left: inherit; top: inherit; opacity: 1; text-align: center !important }
	
	#gal { width: 100%; height: auto; /*position: fixed; left: 0; top: 0; background-color: #e7e8eb;*/ }
	#gal h3 { /*margin: 80px 0 0;*/ position: absolute; top: 30px; width: 100%; text-align: center; font-size: 16px; font-family: "Granjon","Times New Roman", Times, serif; font-weight: normal; letter-spacing: 0.1em; }
	#gal p.num { display: none }
	#gal p.num .wk { font-size: 12px; font-style: normal; line-height: 2em }
	#gal span.cap { position: relative; left: inherit; right: inherit; bottom: inherit; font-size: 12px; padding-top: 1em; display: inline-block }
	#gal .galWrap { position: relative; min-height: 500px; padding: 40px 0; text-align: center } 
	#gal .prevBtn { display: none }
	#gal .nextBtn { display: none }
	
	#about { padding: 0 20px 120px }
	#about .inner { padding: 0 20px }
	#about .pic { text-align: center }
	
	#gal .closeBtn { right: 0; top 0 }
	#gal .prevBtn { left: 0; }
	#gal .nextBtn { right: 0; }
	
	#footer { padding: 40px 0; margin-bottom: 0 }
	.copyrihgt { padding: 0 20px; text-align: left; line-height: 0; vertical-align: bottom }
	.top-ft .copyrihgt { padding: 0 20px  }
	
	img { vertical-align: bottom; /* 下揃え */}

}