@charset "UTF-8";

#status {
  opacity: 0;
  position: fixed;
  right: 20px;
  top: 20px;
  background: hsla( 0, 0%, 0%, 0.8);
  padding: 20px;
  border-radius: 10px;
  z-index: 2; /* over other stuff */
}

:root {


}

.use_root{
	
}



.noto {
    
}

.thin {
    font-weight: 100;
}

.light {
    font-weight: 200;
}

.demi-light {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.bold {
    font-weight: 700;
}

.black {
    font-weight: 900;
}


* {
	-webkit-tap-highlight-color: transparent;
	-webkit-overflow-scrolling: touch;
	outline: 0;
	box-sizing: border-box;
	max-height: 999999px;
}
body, div, p, ul, ol, li, dl, dt, dd, table, th, td, img, figure, h1, h2, h3, h4, h5, h6, form, select {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none;
}
img {
	border: 0;
	vertical-align: bottom;
}
svg, input, select, textarea, label {
	vertical-align: middle;
}
table {
	border-collapse: collapse;
}
strong {
	font-weight: 700;
}

iframe {
	border: none;
}
:focus {
	outline: 0;
}

/*/////////////////////////
base layout　
//////////////////////////*/
html,body {
	width: 100%;
	font-size: 14px;
}
body {
	
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    font-style: normal;
    font-weight: 500;
	
	line-height: 1.8;
    letter-spacing: 0.05em;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	color:#708ed5;
	width: 100%;
	background: url(./img/bg.png) center top #fff;
	
	text-align: left;
	    overflow-y: scroll;

}


body.fixed{ overflow-x:hidden; overflow-y: scroll;}


body.fixed #container{height: 100vh; overflow: hidden;}

html.touchDevice,
.touchDevice body{font-size: 26px;}



a, a:link {
	color: #708ed5;
	text-decoration: underline;
	outline: 0;
}
a:hover, a:active {
	color: #708ed5;
	text-decoration: none;
}
a:visited {
	color: #708ed5;
	text-decoration: none;
}





hr {
	border: 0;
	padding: 0;
	margin: 0;
	height: 1px;
}

select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* 各ベンダープレフィックスが取れた標準版！！(http://caniuse.com/#search=placeholder-shown) */
:placeholder-shown {
 color: #666;
 opacity: 1;
}

/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {
 color: #666;
 opacity: 1;
}

/* Firefox 18- */
:-moz-placeholder {
 color: #666;
 opacity: 1;
}

/* Firefox 19+ */
::-moz-placeholder {
 color: #666;
 opacity: 1;
}

/* IE 10+ */
:-ms-input-placeholder {
 color: #666;
 opacity: 1;
}
.placeholder {
	color: #666;
	opacity: 1;
}
:disabled {
	color: #fff !important;
	opacity: 1 !important;
}
textarea[disabled][readonly], input[disabled][readonly] {
	color: #fff !important;
	opacity: 1 !important;
}

/* IE Only
----------------------------------------------- */
#dp_swf_engine {
	display: none;
}




/* loading cover
----------------------------------------------- */

#loader{
	width: 102%;
	height: 102%;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
	z-index:50000;
	background: #fff;

}

#loadingAnim{
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	text-align: center;
	transform: translate(-50%,-50%);
	display:block;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	color: #708ed5;

}


#loading_count{
	position: fixed;
	top: 53%;
	left: 50%;
	width: 200px;
	height: 5px;

	text-align: center;
	transform: translate(-50%,-50%);
	display:block;
	
	background: #e2e8f7;
	
}

#loading_count .bar{ 
 position: absolute; 
	top: 0; left: 0;
	width: 0%;
	height: 5px;
	background: #708ed5;
	

	
}

#loading_count .per{ 
 position: absolute; 
	top: 20px; left: 50%;
	transform: translate(-50%,0);
	width: auto;
	height: auto;
	
}



#loading_count .bar.harf{ width: 50%;}
#loading_count .bar.up{ transition-duration:300ms !important;}




/* content tags
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	padding: 0;
	margin: 0 auto 20px auto;
	font-weight: 500;
	display: block;
	line-height: 1;
}

h1{	font-size: 2.5rem;font-weight: 900;}
h2{	font-size: 2rem;font-weight: 700;}
h3{	font-size: 1.75rem;font-weight: 700;}
h4{	font-size: 1.5rem;}
h5{	font-size: 1.25rem;}
h6{	font-size: 1.1rem;}

section{ position: relative;width: 100%; padding:40px; margin:0 auto 40px auto; background: #fff;}
section *{position: relative;}

}

p {
	margin-bottom: 2em;
}

p:last-child{}
p:nth-of-type(1){}


ul{ margin-bottom: 2em;}
ul li{}

li:first-child 		{/* 親の最初にあったら*/}
li:last-child 		{/* 親の最後にあったら*/}
li:nth-of-type(1) 	{/* n番目*/}
li:nth-child(odd) 	{/* 奇数*/}
li:nth-child(even) 	{/* 偶数*/}







/* layout
----------------------------------------------- */


.inview .contentsWrap{opacity: 0;}

.inview.show .contentsWrap{
transition-property: all;
transition-duration:300ms;
transition-timing-function:ease-in-out;
transition-delay:300ms;
	opacity: 1;
	
}






/* header
----------------------------------------------- */

header.header{ display: none;}


header.header ul{}
header.header ul li{ display: inline-block}




#globalFooter{ height:210px; background: #708ed5;}


#globalFooter .inner{ width: 90%; max-width:1010px; margin: auto; color: #fff; padding-top: 40px;}

#globalFooter .reg{ display: inline-block; float: right;}

/* top
----------------------------------------------- */

#top.entrance{
	position: relative;
	height: 100vh;
	background: url(./img/bg_main_visual.jpg) center center no-repeat;
	background-size:cover;
}


#top.entrance h1{width: 442px; height:442px;overflow: hidden;background: none; background-size:contain; position: absolute; top: 46%; left: 50%; transform: translate(-50%,-50%);}

#top.entrance h1 hr{ border: 0; margin: 0; padding: 0; width: 0; height: 0; background: #fff; position: absolute;}

#top.entrance h1 hr:nth-of-type(1){ width: 10px; height: 0px; top: 0; left: 0;			}
#top.entrance h1 hr:nth-of-type(2){ width: 0px; height: 10px; bottom: 0; left: 0;		}
#top.entrance h1 hr:nth-of-type(3){ width: 10px; height: 0px; bottom: 0; right: 0;		}
#top.entrance h1 hr:nth-of-type(4){ width: 0px; height: 10px; top: 0; right: 0;		}

	#top.entrance.show h1 hr:nth-of-type(1){ width: 10px; height: 442px; transition: all 100ms linear 50ms;}
	#top.entrance.show h1 hr:nth-of-type(2){ width: 442px; height: 10px; transition: all 100ms linear 150ms;}
	#top.entrance.show h1 hr:nth-of-type(3){ width: 10px; height: 442px; transition: all 100ms linear 250ms ;}
	#top.entrance.show h1 hr:nth-of-type(4){ width: 442px; height: 10px; transition: all 100ms linear 350ms;}

#top.entrance .typo{ width: 0px; height: 40px; position: absolute; top: 246px; left: 50%; margin-left:-123px; opacity: 0; overflow: hidden;}
#top.entrance .typo img{width: 246px;}
#top.entrance .read{width: 0px; height: 77px; position: absolute; top: 316px; left: 50%; margin-left:-173px; opacity: 0; overflow: hidden;}
#top.entrance .read img{width: 346px;}

	#top.entrance.show h1 .typo{opacity: 1; top: 246px; transition: all 400ms ease-in-out 2600ms; width: 246px; height: 60px;}
	#top.entrance.show h1 .read{opacity: 1; top: 316px;transition: all 400ms ease-in-out 2700ms; width: 346px; height: 77px;}


#top.entrance h1 .logoWrap{width:169px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 14px),-50%);}

	#top.entrance.show h1 .logoWrap{top: 79px; left: 50%; transform: translate(calc(-50% - 14px),0);transition: all 1000ms ease-in-out 2000ms; }

.logoWrap svg{ width: 100%; height: auto; position: absolute; top: 0; left: 0;}
.st0{fill:none;stroke:#1E120D;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st0_object{fill:#1E120D; opacity:0;}

.st0_object.show{ opacity:1;}




.line01,
.line02,
.line03,
.line04{    
	stroke:#fff;
	fill:#fff;
	fill-opacity: 0;
	stroke-width:1;
	stroke-dasharray: 3000;
	stroke-dashoffset:3000;
	
}

#top.entrance.show h1 #logoOutline .line01,
#top.entrance.show h1 #logoOutline .line02,
#top.entrance.show h1 #logoOutline .line03,
#top.entrance.show h1 #logoOutline .line04{
	-webkit-animation: LINE 2000ms linear 600ms forwards;
	animation: LINE 2000ms linear 600ms forwards;
}

@keyframes LINE{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	30% {fill-opacity: 0;}
	35% {fill-opacity: 1;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}
@-webkit-keyframes LINE{
	0%{stroke-dashoffset:3000;fill-opacity: 0;}
	30% {fill-opacity: 0;}
	35% {fill-opacity: 1;}
	100%{stroke-dashoffset:0;fill-opacity: 1;}
}




#top.entrance nav.gnav{ position: absolute; width: 100%; left: 0; bottom: 30px; opacity: 0; }
#top.entrance nav.gnav ul{ text-align: center; margin: 0;}
#top.entrance nav.gnav ul li{ display: inline-block;color:#fff !important;}
#top.entrance nav.gnav ul li:after{ content:'/'; display: inline-block; padding: 0 10px;}
#top.entrance nav.gnav ul li:last-child:after{ display: none;}
#top.entrance nav.gnav ul li a{ color:#fff !important;font-weight: 700; font-size: 1.2em; letter-spacing: 0.1em;transition: all 200ms ease-in-out; text-decoration: none;}
#top.entrance nav.gnav ul li a:hover,
#top.entrance nav.gnav ul li a:link:hover,
#top.entrance nav.gnav ul li a:visited:hover,
#top.entrance nav.gnav ul li a:active:hover{ color:#000 !important;}
#top.entrance.show nav.gnav{ opacity: 1;transition: all 800ms ease-in-out 2400ms;}

/* content
----------------------------------------------- */

.content{ padding: 150px 0;}
.content.works{ padding-top: 300px;}

.content .inner{ width: 90%; max-width: 1010px; margin: auto; }

.content_title{ height: 52px; margin-bottom: 80px;}
.content_title img.title{ height:52px; width: auto;}



/* content
----------------------------------------------- */


div.filter{ margin-bottom: 10px;}
div.filter a{ background-color: #708ed5; color: #fff; display: inline-block; padding: 5px 20px; margin: 0 10px 10px 0;font-weight: 700;transition: all 200ms ease-in-out; }
div.filter a:hover,
div.filter a.current{background-color: #000;}

	
div.filter a, div.filter a:link {
	text-decoration: none;
	outline: 0;
}


.grid {
width:calc(100% + 10px);
text-align:center;
clear:both;
display:block;
position:relative;
padding:0; margin:0 0 20px -5px;
}

.item {
float:left;
display:block;
padding:5px;
margin:0;
overflow:hidden;
position:relative;
line-height:0;
	cursor: pointer;
}
/*
.item {
float:left;
display:block;
background:#f8f8f8;
	background:-webkit-gradient(linear, left top, right top, from(#f8f8f8), to(#f0f0f0));
	background:-moz-linear-gradient(top left, #F8F8F8, #F0F0F0);
	background:-ms-linear-gradient(top left, #F8F8F8, #F0F0F0);
	background:-o-linear-gradient(top left, #F8F8F8, #F0F0F0);
	background:linear-gradient(to bottom right, #F8F8F8, #F0F0F0);
padding:5px;
margin:0;
overflow:hidden;
position:relative;
line-height:0;
}*/

.isotope .item {
	-webkit-transition-property:-webkit-transform, opacity;
	-moz-transition-property:-moz-transform, opacity;
	-ms-transition-property:-moz-transform, opacity;
	-o-transition-property:-moz-transform, opacity;
	transition-property:transform, opacity;
margin:0;
padding:0;
    -webkit-transition-duration:0.8s;
    -moz-transition-duration:0.8s;
    -ms-transition-duration:0.8s;
    -o-transition-duration:0.8s;
    transition-duration:0.8s;
}

.item img {display:block; line-height:0; width:100%; max-width:100%; height:auto;}

.item,
.grid-sizer {width:16.666666%;}

@media screen and (max-width:1200px) {
	.item,
	.grid-sizer {width:20%;}
}

@media screen and (max-width:800px) {
	.item,
	.grid-sizer {width:25%;}
}

@media screen and (max-width:600px) {
	.item,
	.grid-sizer {width:33.3333%;}
}





/* about
----------------------------------------------- */
#about .read{ font-size: 1.12rem;}

#about .logo{ margin-bottom:80px;}
#about dl.data{
	display: grid;
	grid-template-columns: 100px 1fr;
    
    grid-auto-rows: 1fr;
    grid-gap: 0px;
    

    margin: 60px 0 40px;
}

#about dl.data dt,
#about dl.data dd{
	position: relative;

	text-align: left;
    min-width: 0;
	padding: 20px 0;
	border-bottom: 1px solid #708ed5;

	
}
#about dl.data dt{ font-weight: 700;}

#about dl.data dd:last-child{ padding-left: 25px;}
#about dl.data dd:last-child:before{content: ''; display: inline-block; width: 20px; height: 30px; position:absolute; top: 50%; left: 0; transform: translate(0,-50%); background:url(./img/icon_map.svg) center center no-repeat; background-size:contain;}



@media screen and (max-width:750px) {
	#about dl.data{ display: flex;flex-wrap: wrap;}
	#about dl.data dt{flex-basis: 100px;}
	#about dl.data dd{ width: calc(100% - 100px);}
	
	

	
	
	
}



/* about
----------------------------------------------- */







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

#contact .read{ font-size: 1.12rem;}

#contact dl.data{
	width: 50%;
	display: grid;
	grid-template-columns: 32px 1fr 32px 1fr;
    
    grid-auto-rows: 1fr;
    grid-gap: 0px;
    font-size: 1.12rem;
	font-weight: bold;

    margin: 60px 0 40px;
}
#contact dl.data dt{ width: 32px;}
#contact dl.data dt,
#contact dl.data dd{
	position: relative;
	text-align: left;
    min-width: 0;
	padding: 20px 0;


	
}

#contact dl.data dd{ padding-left: 20px;}

#contact dl.data dd.mail{grid-column: 2 / 5}

#contact dl.data .icon{ width: 32px; position: absolute; top: 50%; transform: translate(0,-50%);}



@media screen and (max-width:750px) {
	#contact dl.data{
	width: 100%;
	grid-template-columns: 32px 1fr;
    grid-auto-rows: auto auto auto;

	}


	#contact dl.data dd.mail{grid-column:auto}
}


/* coverFloat
----------------------------------------------- */
#coverFloat{ display: none; position:fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; background: #000; opacity: .6;}

#coverWrap{ display: none; position:fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);width: 600px; height: 600px; z-index: 2000; border: solid 0px #f30;}


#coverWrap .prev,
#coverWrap .next{ cursor: pointer;width: 100px; height: 290px; position: absolute; top: 50%; transform: translate(0,-50%);z-index: 3000; border: solid 0px #f30;}
#coverWrap .prev{ left:-100px;}
#coverWrap .next{ right: -100px;}


#coverWrap .prev:after,
#coverWrap .next:after{ content: ''; display: block; width: 60px; height: 60px; position: absolute; top: 50%;  border-bottom: solid 2px #708ed5; border-right: solid 2px #708ed5;}

#coverWrap .prev:after{ transform: translate(-50%,-50%) rotate(135deg);right: -20%;}
#coverWrap .next:after{ transform: translate(-50%,-50%) rotate(-45deg);left: 40%;}

#coverWrap .prev:hover:after,
#coverWrap .next:hover:after{ opacity: .5;}


#coverWrap .close{ cursor: pointer; width: 100px; height: 100px; position: absolute; top: -100px; right: -100px;z-index: 3000; border: solid 0px #f30;}

#coverWrap .close:before,
#coverWrap .close:after{ content: ''; display: block; width: 60px; height: 0px; position: absolute; top: 50%; left: 50%;  border-bottom: solid 2px #708ed5;}

#coverWrap .close:before{ transform: translate(-50%,-50%) rotate(-45deg);}
#coverWrap .close:after{ transform: translate(-50%,-50%) rotate(45deg);}

#coverWrap .close:hover{  opacity: .5;}

#coverWrap .image{ position:absolute; top: 0; left: 0;width: 600px; height: 600px; z-index: 2500; background-size:contain !important;
 display: flex;
  justify-content: center;
  align-items: center;

}

#coverWrap .image.yoko img{ width: 100%; height: auto;}
#coverWrap .image.tate img{ width: auto; height: 100%;}

#coverWrap .contents{ position:absolute; top: 50%; left: 70%; transform: translate(-50%,-50%);  opacity: 0;width: 600px; height: 600px; z-index: 2500; transition: all 200ms ease-in-out 50ms;background-size:contain !important; }

#coverWrap .contents.show{transform: translate(-50%,-50%); opacity: 1; left: 50%; }
#coverWrap .contents.show.hide{transform: translate(-50%,-50%) !important; opacity:0 !important; left: 50%; transition: all 100ms ease-in-out;}


/* media
----------------------------------------------- */
.onlyPC{ display:inline-block;}
.onlySP{ display:none;}
		
@media screen and (max-width: 1000px) {	
	#naviWrap{  width: 100%; height: 80px; }
	#mainWrap{ padding: 120px 40px 0 40px;}
}


@media screen and (min-width: 751px) {	
}


@media screen and (max-width: 800px) {
	.onlyPC{ display:none;}
	.onlySP{ display:inline-block;}
	
	#top.entrance h1{ transform: translate(-50%,-50%) scale(1.3,1.3) !important;}
	
	#about dl.data { grid-template-columns: auto 1fr; grid-auto-rows:auto;}
	#about dl.data dt{ white-space:nowrap; padding-right: 1em;}	
	
	#about dl.data dd:last-child:before {
    	top: 0%;
    	transform: translate(0,100%);
	}
	
	#contact dl.data {
		width: 50%;
		display: grid;
		grid-template-columns: 48px 1fr;
		grid-auto-rows: auto;
		grid-gap: 0px;
		margin: 60px 0 40px;
	}
	
	#contact dl.data dd.mail {
    	grid-column:auto;
	}
	
	#contact dl.data .icon {
    width: 48px;
	}
#globalFooter .reg{ display: block; float: none; padding-top: 10px;}

	
}


@media screen and (max-height: 800px) {
   /* 高さ900px以下の場合 */

	
}


/* keyframes
----------------------------------------------- */

@keyframes shake-horse1 {
  from, to {
    transform: scale(1, 1);
  }

  25% {
    transform: scale(0.9, 1.1);
  }

  50% {
    transform: scale(1.1, 0.9);
  }

  75% {
    transform: scale(0.95, 1.05);
  }
}



.buruburu {
    display: inline-block;
    animation: hurueru .2s ;
}

@keyframes hurueru {
    0% {transform: translate(0px, 0px) rotateZ(0deg)}
    25% {transform: translate(2px, 2px) rotateZ(1deg)}
    50% {transform: translate(0px, 2px) rotateZ(0deg)}
    75% {transform: translate(2px, 0px) rotateZ(-1deg)}
    100% {transform: translate(0px, 0px) rotateZ(0deg)}
}



#contentsPC .nisetamago,
#contentsPC .kamifubuki,
#contentsPC .illust,
#contentsPC .btnItem,
#contentsPC .logo,
#contentsPC .sns,
section.start .nisetamago,
section.start .kamifubuki,
section.start .illust,
section.start .btnItem,
section.start .logo{display:none;}