/*
html5doctor.com Reset Stylesheet
v1.4
2009-07-27
Author: Richard Clark - http://richclarkdesign.com
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	font-family: "游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" , "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , Avenir , "Open Sans" , "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto , "Meiryo UI" , "メイリオ" , Meiryo , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	color: #000000;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

nav ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}

/*===========common============*/
.content-wrap{
	width: 100%;
	height: auto;
}

.w896{width: 896px; margin: 0 auto;}
@media screen and (max-width: 640px) {
	.w896{
		width: 100%;
	}
}
@media screen and (max-width: 768px) {
	.w896{
		width: -webkit-calc(100% - 32px);
	}
}

.w1040{width: 1040px; margin: 0 auto;}
@media screen and (max-width: 640px) {
	.w1040{
		width: 100%;
	}
}
@media screen and (max-width: 768px) {
	.w1040{
		width: -webkit-calc(100% - 32px);
	}
	#about div.w1040 h1 img{
		width: 100%;
	}
}


.w100p{width: 100%; margin: 0 auto;}

.hidden{overflow: hidden;}

.f11{font-size: 0.688rem}
.f13{font-size: 0.813rem}
.f14{font-size: 0.875rem}
.f15{font-size: 0.938rem}
.f16{font-size: 1rem}
.f19{font-size: 1.188rem}

.mt30{margin-top: 30px;}
.mt45{margin-top: 45px;}
.mb20{margin-bottom: 20px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb45{margin-bottom: 45px;}
.mb52{margin-bottom: 52px;}
.mb64{margin-bottom: 64px;}

.bold{font-weight: bold}

.fRight{float: right;}
.fLeft{float: left;}
.center{margin: 0 auto;}

.tRight{text-align: right;}
.teft{text-align: left;}
.tCenter{text-align: center;}



a img.op:hover{
	opacity:0.5;
	filter: alpha(opacity=50);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=50)";  /* ie 8 */
	-moz-opacity:0.5;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.5;              /* Safari 1.x */
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
/*===========/common============*/


/*===========top============*/
.bg-index{
	background-color:  rgba(0,0,0,0.5);
	/*background-image:url(../images/misato_profile.png);*/
	background-size: cover;
	/*background-attachment: fixed;*/
	background-position: center center;
}

#top{
	margin: 216px 0 256px 0;
}
.bg-opblack{
	background-color: rgba(0,0,0,0.5);
	padding: 90px 84px 90px 170px;
}

.bg-opblack p.title{
	letter-spacing: 0.805rem;
	margin: 0 0 88px 0;
	padding: 0 0 0.3rem 0;
	color: #ffffff;
	border-bottom: 1px solid #ffffff;
}
.bg-opblack p.subtitle {
	margin: 0 0 34px 0;
	letter-spacing: 0.5rem;
}
.bg-opblack p.subtitle:last-child{
	margin: none!Important;
}

.bg-opblack a{
	color: #ffffff;
	text-decoration: none;
}

.bg-opblack a:hover{
	color: #ffffff;
	padding: 0 0 0.3rem 0;
	border-bottom: 1px solid #ffffff;
}

@media screen and (max-width: 640px) {
	#top{
		margin: 0px;
		width: 100%;
	}

	#top.f16{
		font-size: 1rem;/*f18*/
	}

	.bg-opblack{
		background-color: rgba(0,0,0,0.5);
		width: 100%;
		padding-top: 32px;
		padding-left: 8%;
		padding-bottom: 224px;
	}

	.bg-opblack p.title{
		width: 100%;
		letter-spacing: 0.875rem!Important;
		line-height: 1.75;
		margin: -0.875rem auto 115px auto!Important;
		color: #ffffff;
		border-bottom: none;
		font-size: 1.250rem;
		/*text-align: center;*/
		white-space: nowrap;
	}
	.bg-opblack p.subtitle {
		margin: 0 0 72px 0;
		letter-spacing: 0.775rem;
	}
	.bg-opblack p.subtitle:last-child{
		margin-bottom: 0px!Important;
	}

	.bg-opblack a{
		color: #ffffff;
		text-decoration: none;
	}

	.bg-opblack a:hover{
		color: #ffffff;
		padding: 0 0 0.3rem 0;
		border-bottom: 1px solid #ffffff;
	}
}

/*===========/top============*/

/*===========about============*/
#about .prof{
	line-height: 1.8;
	margin: 0 0 52px 0;
}
@media screen and (max-width: 640px) {
	#about div.w1040 img{
		width: 100%;
	}
	#about p{
		/* padding: 0px 16px; */
	}
	#about p.f15{
		font-size: 0.813rem!Important;
	}
	#about p.f13{
		font-size: 0.688rem!Important;
	}
}
/*===========/about============*/

/*===========contact============*/
#contact tr td.ttl{
	width: 20%;
	padding: 11px 11px 11px 0px;
}

#contact tr td a{text-decoration: none; color: #000000;}
#contact tr td a:hover{
 color: #000000;
 padding: 0 0 0.2rem 0;
 border-bottom: 1px solid #000000;
}
/*#contact tr td.txt{}*/
@media screen and (max-width: 640px) {
	#contact #map_canvas{
		display: none;
	}

	#contact #map_canvas_sp{
		text-align: center;
		margin: 48px auto 90px auto;
	}
	#contact #map_canvas_sp img{
		width: 180px;
	}

	#contact div.mt45.mb52{
		/* padding: 0px 16px 0px 16px; */
		line-height: 1.7;
	}

	#contact #sp-gmap-btn p a{
		width: 96px;
		margin: 0 auto;
		text-align: center;
		padding: 13px;
		margin: 0px auto 55px auto;
		border: 1px solid #000000;
		font-size: 0.750rem;
		display: block;
		color: #000000;
		text-decoration: none!Important;
	}

	#contact #sp-gmap-btn a:hover{
		color: #ffffff;
		background-color: #000000;
		text-decoration: none!Important;
	}
}
@media screen and (min-width: 641px) {
	#contact #map_canvas_sp{
		display: none;
	}

	#contact #sp-gmap-btn{
		display: none;
	}
}

/*===========/contact============*/

/*===========works============*/
#works ul{
	list-style: none;
	/*padding: 0!Important;*/
	margin: 0 auto!Important;
 }
#works ul li {
	display: inline-block;
	margin-bottom: 16px;
}
#works figure {
	position: relative;
	overflow: hidden;
	width: 288px;
	height: 100px;
}
#works figcaption {
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 2;
	width: 100%;
	height: 100px;
	background: rgba(0,0,0,.6);
	-webkit-transition: .2s;
	transition: .2s;
	opacity: 0;
	color: #ffffff;
}
#works figcaption h3{
	position: absolute;
	z-index: 3;
	width: 100%;
	top: 30%;
	text-align: center;
	line-height: 1.76;
	font-size: 0.813rem;
	color: #ffffff;
}

#works figure:hover figcaption {
	opacity: 1;
}

#works ul li img{
	width: 288px;
	height: 100px;
	vertical-align: middle;
}
#works ul li:nth-child(3n-1) {margin:0 16px 0 16px;}

/*works-child*/
#works-child a{
	 color: #000000;
}

#works-child a:hover{
	text-decoration: none;
}

#works-child .main-nav{
	display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
	line-height: 44px;
}

#works-child .main-nav div{
	line-height: 44px;
}

#works-child .main-nav div a.txt{
	color: #000000;
	text-decoration: none;
}
#works-child .main-nav div a.txt:hover{
	color: #000000;
	padding: 0 0 0.2rem 0;
	border-bottom: 2px solid #000000;
}

#works-child p.txtarea{
	line-height: 1.846;
}

#works-child figure {
	position: relative;
	overflow: hidden;
	width: 1040px;
	height: 590px;
	background-color: #000000;
}

#works-child figure div.sp-on{
	display: none;
}

#works-child figure img {
	opacity: 0.7;
}

#works-child figure img.absolute {
	position: absolute;
	opacity: 1;
	z-index: 3;
	width: 184px;
	top: 271px;
	left: 428px;
	text-align: center;
}

#works-child figcaption {
	position: absolute;
	top: 0%;
	left: 0%;
	z-index: 2;
	width: 1040px;
	height: 590px;
	background: rgba(255,255,255,0.6);
	-webkit-transition: .2s;
	transition: .2s;
	opacity: 0;
	color: #ffffff;
}

#works-child figcaption img{
	position: absolute;
	z-index: 3;
	width: 184px;
	top: 271px;
	left: 428px;
	text-align: center;
}

#works-child figure:hover figcaption {
	opacity: 1;
}

#video {
width: 1040px;
height: 590px;
margin: auto;
position: relative;
}
#play_button {
width: 1040px;
height: 590px;
background-color: rgba(0,0,0,1);
cursor: pointer;
}

@media screen and (max-width: 768px) {
	/*works*/
	#works.mb64{
		margin-bottom: 5px!Important;
	}
	#works ul{
		max-width: 640px;
		/* padding: 0px 16px; */
		text-align: center;
	}

	#works figure {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: auto;
	}

	#works figcaption {
		position: absolute;
		display: table;
		top: 0%;
		left: 0%;
		z-index: 2;
		width: 100%;
		height: 200px;
		background: rgba(0,0,0,.6);
		-webkit-transition: .2s;
		transition: .2s;
		opacity: 0;
		color: #ffffff;
	}
	#works figcaption h3{
		position: absolute;
		display: table-cell;
		z-index: 3;
		width: 100%;
		top: 50%;
  	left: 50%;
  	-webkit-transform: translate(-50%, -50%); /* Safari用 */
  	transform: translate(-50%, -50%);
		text-align: center;
		line-height: 1.76;
		font-size: 0.813rem;
		color: #ffffff;
	}

	#works figure figcaption {
		opacity: 1;
	}

	#works ul li img{
		width: 100%!Important;
		height: auto;
		vertical-align: middle;
	}
	#works ul li:nth-child(3n-1) {margin:0px 0px 16px 0px!Important;}

	#works div.pageup{
		margin: 57px auto 0px auto;
		text-align: center;
	}

	/*works-child*/
	#works-child #header-works{
		display: none;
	}
	#works-child.w1040.mb40{
		width: 100%;
		margin-bottom: 10px;
	}

	#works-child img{
		width: -webkit-calc(100% - 32px);
		width: calc(100% - 32px);
		padding-right: 16px;
		padding-left: 16px;
	}

	#works-child p{
		padding-right: 16px;
		padding-left: 16px;
	}

	#works-child p.mb30.bold.f15{
		font-size: 0.813rem!Important;
		line-height: 1.7;
		margin-bottom: 14px!Important;
	}
	#works-child p.txtarea{
		font-size: 0.688rem!Important;
	}

	#works-child div.main-nav{
		margin: 20px 16px 0px 16px;
	}

	#works-child #video {
	width: 100%;
	height: 270px!Important;
	margin: 0 auto;
	position: relative;
	/* padding-bottom: 56.25%; */
	/*padding-top: 30px;*/
	height: 0;
	overflow: hidden;
}

	#works-child #video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	}

	#works-child #video #play_button figure{
		width: 100%!Important;
		height: auto;
	}
	#works-child figure {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: auto;
		line-height: 0;
		background-color: #000000;
	}
	/*#works-child #video figure img{
		width: 100%!Important;
		padding: 0px!Important;
		top: 4px;
		}*/

	#works-child figure img.pc-on{
		display: none!Important;
	}

	#works-child #video figure img.absolute {
    position: absolute;
    opacity: 1;
    z-index: 3;
    width: 118px!Important;
    top: -webkit-calc(50% + 7px);
    left: -webkit-calc(50% - 75px);
    /* width: calc(50% - 59px); */
    text-align: center;
 }

	#works-child #video figcaption{
		display: none;
	}

	#works-child #play_button {
	width: 100%;
	height: auto;
	background-color: rgba(0,0,0,1);
	cursor: pointer;
	}
}
@media screen and (max-width: 640px) {
	#works figcaption h3{
		position: absolute;
		display: table-cell;
		z-index: 3;
		width: 100%;
		top: 30%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%); /* Safari用 */
		transform: translate(-50%, -50%);
		text-align: center;
		line-height: 1.76;
		font-size: 0.813rem;
		color: #ffffff;
	}
}
@media screen and (min-width: 641px) {
	#works div.pageup{
		display: none;
	}
}
@media screen and (max-width: 320px) {
	#works figcaption h3{
		position: absolute;
		display: table-cell;
		z-index: 3;
		width: 100%;
		top: 26%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%); /* Safari用 */
		transform: translate(-50%, -50%);
		text-align: center;
		line-height: 1.76;
		font-size: 0.813rem;
		color: #ffffff;
	}

	#works-child #video #play_button figure{
		width: 100%!Important;
		height: auto;
	}
}

/*===========/works============*/


/*===========loading-anime============*/
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #ffffff;
  z-index: 1;
}
#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 456px;
  height: 18px;
  margin-top: -9px;
  margin-left: -228px;
  text-align: center;
  color: #ffffff;
  z-index: 2;
}
@media screen and (max-width: 640px) {
	#loader img{
		width: 64%!Important;
		height: auto;
	}
	#loader {
	  display: none;
	  position: fixed;
	  top: 50%;
	  left: 50%;
	  width: 456px;
	  height: 18px;
	  margin-top: -9px;
	  margin-left: -228px;
	  text-align: center;
	  color: #ffffff;
	  z-index: 2;
	}
}

/*===========/loading-anime============*/

/*===========header============*/

#header{
	padding: 70px 0 50px 0;
}

#header ul{
	list-style: none;
	margin: 52px 0 38px 0;
}
#header ul li{
	display: inline;
	margin: 0 264px 0 0;
}

#header ul li a.now{
	padding: 0 0 0.2rem 0;
	border-bottom: 2px solid #000000;
}
#header ul li:last-child{
	margin-right: 0px!Important;
}

#header a{
	color: #000000;
	text-decoration: none;
}
#header a:hover{
	color: #000000;
	padding: 0 0 0.2rem 0;
	border-bottom: 2px solid #000000;
}

@media screen and (max-width: 640px) {
	#header{
		display: none;
	}

	#header-about,#header-contact{
		font-size: 0.813rem;
		padding: 66px 16px 16px 16px;
	}
	#header-works{
		font-size: 0.813rem;
		text-align: left;
		padding: 66px 22px 16px 16px;
	}
}

@media screen and (min-width: 641px) {
	#header-about,#header-works,#header-contact{
		display: none;
	}


}

/*===========/header============*/

/*===========footer============*/

#footer{
	padding: 50px 0 50px 0;
}

#footer img{
	width: 34px;
	height: auto;
}

.bg-gray{ background-color: #EEEEEE;}
.bg-gray ul{
	list-style: none;
	margin: 0 0 32px 0;
}
.bg-gray ul li{ display: inline;}
.bg-gray ul li a{	margin: 0 14px 0 0;}
.bg-gray ul li:last-child a{ margin-right: 0px!Important;}

@media screen and (max-width: 640px) {
	#footer{
		padding: 45px 0 45px 0;
	}
	#footer p.f11{
		font-size: 0.563rem!Important;
	}
	#footer img{
		width: 38px!Important;
		height: auto;
	}
	.bg-gray ul{
		list-style: none;
		margin: 0 0 58px 0;
	}
	.bg-gray ul li{ display: inline;}
	.bg-gray ul li a{	margin: 0 17px 0 0;}
	.bg-gray ul li:last-child a{ margin-right: 0px!Important;}
}

/*===========/footer============*/


/*===========sp-menu============*/
@media screen and (min-width: 641px){
	#sp-menu {
		display: none!Important;
	}
}

@media screen and (max-width: 640px){
	#sp-menu{
		position: fixed;
		/* width: 100%; */
		background-color: rgba(255,255,255,0.8);
		z-index: 9999;
		font-size: 0.813rem;
		/* top: 0; */
		/* left: 0; */
		/*-webkit-transition: 0.5s;
		-moz-transition: 0.5s;
	  -o-transition: 0.5s;
	  transition: 0.5s;*/
	}

	#sp-menu div.sp-menu-wrap{
		display: -webkit-flex;
  	display: flex;
  	-webkit-justify-content: space-between;
  	justify-content: space-between;
		line-height: 54px;
		padding: 10px 16px 10px 16px;
	}
	#sp-menu div.sp-menu-wrap div {
	  line-height: 34px;
	}

	#sp-menu div.button-toggle img{
		width: 25px;
	}

	#sp-menu a{
		color: #000000;
		text-decoration: none;
	}
	#sp-menu h1 a:hover{
		color: #000000;
		padding: 0 0 0.2rem 0;
		border-bottom: 2px solid #000000;
	}

	/*#sp-menu div.menu{
		background-color: rgba(255,255,255,0.1);
		height: 9999px;
	}*/
	#sp-menu div.menu li a{
		display: block;
		background-color: #EEEEEE;
		padding: 22px 28px 22px 28px;
		border-bottom: 2px solid #ffffff!Important;
	}
	#sp-menu div.menu li a.last{
		display: block;
		background-color: #EEEEEE;
		padding: 22px 28px 22px 28px;
		border-bottom: 0px!Important;
	}
	.headroom {position: fixed;top: 0;left: 0;right: 0;transition: all .2s linear;}
	.headroom--unpinned {top: -60px;}
	.headroom--pinned {top: 0;}
}
/*===========/sp-menu============*/