@charset "UTF-8";



@font-face {
	font-family: 'mplus-2p-regular';
	src: url(./font/mplus-2p-regular.woff) format("woff"),
       url(./font/mplus-2p-regular.ttf) format("truetype");
}


@font-face {
	font-family: 'mplus-2p-medium';
	src: url(./font/mplus-2p-medium.woff) format("woff"),
       url(./font/mplus-2p-medium.ttf) format("truetype");
}

@font-face {
	font-family: 'mplus-2p-bold';
	src: url(./font/mplus-2p-bold.woff) format("woff"),
       url(./font/mplus-2p-bold.ttf) format("truetype");
}

.f_mplus-2p-regular{font-family: 'mplus-2p-regular';}
.f_mplus-2p-bold{font-family: 'mplus-2p-bold';}



a,
img,
input,
svg,
*:before,
*:after {
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}


#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;
	position: relative;
}
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: 16px;
}
body {
	font-family: 'mplus-2p-medium',"Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    font-style: normal;
    font-weight: 500;
	line-height: 1.8;
    -webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	color:#000;
	width: 100%;
	background: #f3e9d8;
	text-align: center;
    overflow-y: scroll;
}



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


body.fixed #container{ position: fixed; top: 0; left: 0; width: 100%; height: 100vh; overflow: hidden; z-index: 1;}

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


 #container{ position:relative; opacity: 0;}


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

a.noline, aa.noline:link {
	text-decoration: none !important;
}



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: 5000px;
	height: 102%;
	position: fixed;
	top: 0;
	left: 50%;
	transform: translate(-50%,0);
	z-index:50000;
	
	background: url(./img/parts/loading.gif) center center no-repeat #f3e9d8;


}

#loadingAnim{
	position: fixed;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	text-align: center;
	transform: translate(-50%,-50%);
	display:block;
	color: #ccc;
		display:none;
	 

}


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

	text-align: center;
	transform: translate(-50%,-50%);
	display:none;
	
	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;
	color: #708ed5;
	font-size: 0.8rem;
}



#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: 700;
	display: block;
	line-height: 1;
}

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

section{ position: relative;width: 100%; padding:0; margin:0 auto 0px auto; }


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) 	{/* 偶数*/}


th,td {
    border: solid 2px;  /* 枠線指定 */
    padding: 20px 10px;      /* 余白指定 */
}
 
table {
    border-collapse:  collapse; /* セルの線を重ねる */
	background-color: #fff;
}




/* class
----------------------------------------------- */
.text{ text-align:left;}


.tLeft{ text-align:left;}


.grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: auto;
	grid-gap: 50px;
	padding: 0;
	margin: 0;
}

.grid.col_3{
	grid-template-columns: 1fr 1fr 1fr;
}

.grid.col_2{
	grid-template-columns: 1fr 1fr;
}

.grid.col_1{
	grid-template-columns: 1fr;
}




.grid .center {
	display: grid;
	align-items: center;
}

.gridItem {

}

img.full{width:100%; height: auto;}


ul.kome{ text-align: left !important;}
ul.kome li{ padding-left: 1.5em; margin-bottom: 10px; position: relative; line-height: 1.3;}
ul.kome li:before{ content: '※'; display: inline-block; position: absolute; top: 0; left: 0;}





.animeOff *{transition: all 0ms cubic-bezier(.50, .0, .50, 1) 0ms !important;}

.bgBtn{ display: inline-block; height: 50px; line-height: 50px; background: #000; border-radius: 10px; padding:0 40px 0 56px; color: #fff !important; text-decoration: none !important;}
.bgBtn:before{ content:''; display: block; width: 13px; height: 16px; position: absolute; top: 50%; left: 20px; transform: translate(0,-50%);background:url(./img/icon_arrow_white.svg) center center no-repeat; background-size:contain}

	.bgBtn.iconMail{ padding-left: 80px; padding-right: 50px;}
	.bgBtn.iconMail:before {width: 34px; height: 24px;background:url(./img/icon_mail.svg) center center no-repeat; }

.bgBtn.iconList{ padding:0 40px 0 66px;}
.bgBtn.iconList:before{ width: 32px; height: 28px; background:url(./img/icon_list.svg) center center no-repeat; background-size:contain}


.newsList{ text-align: left; }
.newsList dl{
		display: grid;
	grid-template-columns: 160px 1fr;
	grid-auto-rows: auto;
	grid-gap: 5px;
	padding: 0px 0 20px 0;
    margin-bottom: 20px;
	border-bottom: solid 3px #000;
}
.newsList dl dt{ font-size: 0.8em; padding-left: 30px; line-height: 26px;}
.newsList dl dt:before{ content:''; display: block; width: 20px; height: 26px; background: url(./img/icon_arrow.svg) left top no-repeat; background-size:contain; position: absolute; top: 0px; left: 0;}

.newsList dl dd{ font-size: 0.9em; line-height: 1.5; padding-top: 0.2em;}

.newsList dl dd a{ text-decoration:none;}


.newsList .bgBtn{ margin-top:40px;}

.btnItem{transition: all 200ms cubic-bezier(.50, .0, .50, 1);}
.pcDevice .btnItem:hover{ background-color:#333 !important;}


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

header.globalHeader{ position: fixed; width: 100%; height: 0px; z-index: 100;transition: all 500ms cubic-bezier(.50, .0, .50, 1);}


header.globalHeader .logo{width: 312px; height: 80px; position: absolute; top: 0px; left: 100px;  background:url(./img/logo.svg) left center no-repeat; background-size:contain; opacity: 0;transition: opacity 300ms cubic-bezier(.50, .0, .50, 1);}
header.globalHeader .logo.in{ opacity: 1;}


header.globalHeader #langChange{width: 80px; height: 80px; position: absolute; top: 0px; left: 0px; overflow: hidden; background:url(./img/lang_change.svg) center center no-repeat #000; background-size:50% auto;}
header.globalHeader #langChange a{ display:block; height:100px; line-height: 1000px; overflow: hidden;}


header.globalHeader #menuBtn{width: 80px; height: 80px; position: absolute; top: 0px; right: 0px; cursor: pointer; background: #000;}
header.globalHeader #menuBtn hr{transition: all 250ms cubic-bezier(.50, .0, .50, 1);}

header.globalHeader #menuBtn hr:nth-of-type(1),
header.globalHeader #menuBtn hr:nth-of-type(2),
header.globalHeader #menuBtn hr:nth-of-type(3){ width: 34px; height: 4px; background: #fff; position: absolute; position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%);}

header.globalHeader #menuBtn hr:nth-of-type(1){ margin-top: -15px; }
header.globalHeader #menuBtn hr:nth-of-type(2){ }
header.globalHeader #menuBtn hr:nth-of-type(3){ margin-top: 15px;}

header.globalHeader.menuOpen{}
header.globalHeader.menuOpen #menuBtn hr:nth-of-type(1){ transform: translate(-50%,-50%) rotate(-45deg);margin-top: 0px; }
header.globalHeader.menuOpen #menuBtn hr:nth-of-type(2){ opacity: 0;}
header.globalHeader.menuOpen #menuBtn hr:nth-of-type(3){transform: translate(-50%,-50%) rotate(45deg);margin-top: 0px; }

header.globalHeader ul.share{position: absolute; top: 15px; right: 120px; padding-left: 85px;}
header.globalHeader ul.share:before{ content:''; display: block; width: 67px; height: 15px;background:url(./img/share.svg) left center no-repeat; background-size:contain; position: absolute; top: 50%; left: 0; transform: translate(0,-50%);}
header.globalHeader ul.share li{ width: 50px; height: 50px; display: inline-block; float: left;}
header.globalHeader ul.share li a{ display: block; height: 0px; padding-top: 50px; border-radius:  50%;  background: #000; overflow: hidden;}

header.globalHeader ul.share li:nth-of-type(1){ margin-right: 20px;}

header.globalHeader ul.share li:nth-of-type(1) a{ background:url(./img/icon_facebook.svg) center center no-repeat #000; background-size:auto 25px;}
header.globalHeader ul.share li:nth-of-type(2) a{ background:url(./img/icon_twitter.svg) center center no-repeat #000; background-size: auto 20px;}



#spMenu{ width: 300px; border: solid 6px #000; border-right:0;  padding: 40px; background: #fff; position: fixed; top: 80px; right: 0px; text-align: left;  pointer-events: none; transition: all 250ms cubic-bezier(.50, .0, .50, 1); transform: translate(100%,0);}
header.globalHeader.menuOpen #spMenu{ pointer-events: all; transform: translate(0,0);}

#spMenu ul{ padding: 0; margin: 0;}
#spMenu ul li{ line-height: 50px;}
#spMenu ul li#narrow{ line-height: 25px;}
#spMenu ul li a:before{ content:'-'; display: inline-block; padding-right: 10px;}
#spMenu ul li a{ display: block; text-decoration: none; }





#globalFooter{ padding:100px 0 50px 0; background: #000; color: #fff; text-align: left; font-size: 0.9em;}
.copyright{ padding:20px 0 100px 0; color: #fff; font-size: 0.8em;}






/* layout
----------------------------------------------- */
.innerWrap{ position: relative;width: 75%; height: 100%; max-width: 900px; margin: auto;  border: solid 0px #000;}

section.area{ padding: 120px 0; border: solid 0px #f30;}
section.area h2.title{ font-size:3em; margin-bottom: 50px; line-height: 1.2; }
section.area h3.line{  font-size:1.5em; display: inline-block;  line-height: 1.8;  margin-bottom: 50px; }
section.area h3.line hr{ content:''; display: block; width: 100%; height: 4px; border-radius:  2px; background: #000; position: absolute; bottom:0; left: 0;}
section.area h3.line.in{}


.contentsWrap{ position: relative;overflow: hidden; }



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

section#topContents{  padding: 0px; height: 100vh; max-height: 800px; min-height: 600px;}
section#topContents .innerWrap{ max-width: 1200px; width: 80%;} 

section#topContents .grid { width: 100%;	grid-template-columns: minmax(350px, 42%) 1fr; grid-auto-rows: 1fr;  grid-gap: 40px; position: absolute; top: 50%; left: 50%;
}



section#topContents .grid .gridItem:nth-of-type(1){grid-column: 2 / 3; grid-row-start: 1;
  grid-row-end: 2;

}
section#topContents .grid .gridItem:nth-of-type(2){grid-column: 1 / 2; grid-row-start: 1;
  grid-row-end: 2;

	display: grid;
	align-items: center;
}

section#topContents .grid .gridItem.image img.illust{ width: 100%; height: auto; opacity: 0;}

section#topContents h1{line-height: 1; margin-bottom: 50px;width: 100%;}
section#topContents h2.title{ height: 0; padding-top: 14.86%; overflow: hidden; background: url(./img/top/title.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}
section#topContents .read{ margin-bottom: 0 !important;}

section#topContents .illustArea{}
section#topContents .textArea{}

section#topContents.step2 .illustArea{ transition: all 1000ms cubic-bezier(.50, .0, .50, 1); transform: translate(0,0) !important;}

section#topContents .illustArea .illustWrap{ width:100%;}

section#topContents .illustArea .obj{ border:solid 0px #f30;}
section#topContents .illustArea .obj img{ width:100%; height: auto;}

section#topContents .mountLeft{ width: 37%;  position: absolute; top: 0%; left: 0%; z-index: 5;}
section#topContents .mountRight{ width: 37%;  position: absolute; top: 0%; right: 0%; z-index: 5;}

section#topContents .animal{ width: 74%;  position: absolute; top: 0%;  left: 50%; z-index: 6;}

section#topContents .forestLeft{ width: 32%;  position: absolute; top: 44%; left: 10%; z-index: 7;}
section#topContents .forestRight{ width: 32%;  position: absolute; top: 44%; right: 10.5%; z-index: 7;}

section#topContents .human{ width: 25.2%;  position: absolute; top: 47.5%; left: 50%; transform: translate(-50%,0); z-index: 8;}

section#topContents .cloudLeft{width: 22%; position: absolute; top: 9%; left: 11%;  z-index: 8;}
section#topContents .cloudRight{width: 14%;  position: absolute; top: 22%; right: 12%; z-index: 8;}





#scrollArrow{width: 52px; height: 123px;  position: absolute; bottom:20px; left: 50%; background:url(./img/arrow_scroll_text.svg) center top no-repeat; background-size: contain;transition: all 500ms cubic-bezier(.50, .0, .50, 1);}
#scrollArrow hr{ border: 0; width: 44px; height: 123px;  position: absolute; bottom:0px; left: 50%; transform: translate(-50%,0); opacity: 0;}


#scrollArrow hr:nth-of-type(1){ background:url(./img/arrow_scroll.svg) center bottom no-repeat; background-size: contain; opacity: 1;}
#scrollArrow hr:nth-of-type(2){ background:url(./img/arrow_scroll_1.svg) center bottom no-repeat; background-size: contain;
	animation: scrolltenmetsu 2000ms infinite;
	animation-delay: 200ms;
	-webkit-animation-delay: 200ms;
}
#scrollArrow hr:nth-of-type(3){ background:url(./img/arrow_scroll_2.svg) center bottom no-repeat; background-size: contain;
	animation: scrolltenmetsu 2000ms infinite;
	animation-delay: 400ms;
	-webkit-animation-delay: 400ms;
}
#scrollArrow hr:nth-of-type(4){ background:url(./img/arrow_scroll_3.svg) center bottom no-repeat; background-size: contain;
	animation: scrolltenmetsu 2000ms infinite;
	animation-delay: 600ms;
	-webkit-animation-delay: 600ms;
}
#scrollArrow hr:nth-of-type(5){ background:url(./img/arrow_scroll_4.svg) center bottom no-repeat; background-size: contain;
	animation: scrolltenmetsu2 2000ms infinite;
	animation-delay: 800ms;
	-webkit-animation-delay: 800ms;
}

#scrollArrow.count_1 hr:nth-of-type(2){ opacity: 1;}
#scrollArrow.count_2 hr:nth-of-type(3){ opacity: 1;}
#scrollArrow.count_3 hr:nth-of-type(4){ opacity: 1;}
#scrollArrow.count_4 hr:nth-of-type(5){ opacity: 1;}



   





/* about
----------------------------------------------- */
section#about{padding: 440px 0 100px 0 }
section#about:before{ 
	background: #5190cc; 
	content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 90%;
	margin: 5% 0 0 0;
    transform-origin: center center;
    transform: translate(-50%,-50%) rotate(-10deg);
    z-index: -1;
}

section#about h2.title{ height: 0; padding-top: 54px; overflow: hidden; background: url(./img/about/title.svg) center top no-repeat; background-size:contain; margin-bottom: 60px;}

section#about h3.line{width:470px; height: 0; padding-top: 42px; overflow: hidden; background: url(./img/about/midashi.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}

section#about .image{ width: 460px; margin: 0 auto 50px auto;transform:scale(0,0);}
section#about .text{ width: 100%; max-width: 900px; margin:0 auto 50px auto;}
section#about .lineBox{ font-size:0.7em; border:solid 1px #000; padding: 40px; margin-top: 50px;}






/* zero
----------------------------------------------- */
section#zero{ padding-top: 300px;padding-bottom: 0; margin-bottom: -320px;}

section#zero h3.line{ height: 0; padding-top: 102px; overflow: hidden; background: url(./img/zero/midashi.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}

section#zero  h3.line hr:nth-of-type(1){ width: 100%;  bottom:61px; left: 0;}
section#zero  h3.line hr:nth-of-type(2){ width: 300px;  bottom:0; left: 100px;}


section#zero article{ bposition: relative; min-height: 400px;}
section#zero article .image{ width: 297px;}
section#zero article .content{ width:400px; height: 400px; border-radius:  200px; border: solid 5px #000; color: #fff; position: absolute; left: 50%;}
section#zero article .content .centerBox{ display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: left; white-space: nowrap;}
section#zero article .content h3{ font-size:0px;  width:100%; height: 0; padding-top: 20%; overflow: hidden; margin-bottom: 20px;}

section#zero article.challenge{  width: 500px;  top: 0%; left: 0%; text-align: center; margin-bottom: 30px;}
section#zero article.challenge .image{ margin: auto; width: 362px; transform: scale(0,0); opacity: 0;}
section#zero article.challenge h2{width: 375px; margin:0 auto 50px auto; }
section#zero article.challenge h3{width:500px; }

   
    section#zero article.challenge.in .image{ transform: scale(1,1); opacity: 1;}
    section#zero article.challenge.in h2{ transform: scale(1,1); opacity: 1;}
    section#zero article.challenge.in h3{ transform: scale(1,1); opacity: 1;}

section#zero article.chrome{}
section#zero article.chrome .content{  background-color: #00a6d9; }
section#zero article.chrome .image{ position:absolute; top: -220px; right: -120px;}
section#zero article.chrome .centerBox{ width:190px;}
section#zero article.chrome h3{ padding-top:62px; background: url(./img/zero/chrome_title.svg) left top no-repeat; background-size:contain; }



section#zero article.works{}
section#zero article.works .content{background-color: #970b31;}
section#zero article.works .image{ position:absolute; top: -230px; left: -110px;}
section#zero article.works .centerBox{ width:300px;}
section#zero article.works h3{ padding-top:28px; background: url(./img/zero/works_title.svg) left top no-repeat; background-size:contain; }

  

section#zero article.animal{}
section#zero article.animal .content{ background-color: #00973b;}
section#zero article.animal .image{ position:absolute; top: -220px; right: -120px;}
section#zero article.animal .centerBox{ width:300px;}
section#zero article.animal h3{ padding-top:28px; background: url(./img/zero/animal_title.svg) left top no-repeat; background-size:contain; }

   

section#zero article.deal{}
section#zero article.deal .content{ background-color: #004c88;}
section#zero article.deal .image{ position:absolute; top: -230px; left: -110px;}
section#zero article.deal .centerBox{ width:240px;}
section#zero article.deal h3{ padding-top:62px; background: url(./img/zero/deal_title.svg) left top no-repeat; background-size:contain; }

  



/* news
----------------------------------------------- */

section#news{ padding-top: 400px;  padding-bottom: 100px;}
section#news:before{ 
	background: #00a6d9; 
	content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 90%;
	margin: 10% 0 0 0;
    transform-origin: center center;
    transform: translate(-50%,-50%) rotate(-10deg);
    z-index: -1;
}

section#news .image{ margin-bottom:50px;}
section#news h2.title{ height: 0; padding-top: 38px; overflow: hidden; background: url(./img/news/title.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}

section#news h3.line{ width: 325px;  height: 0; padding-top: 42px; overflow: hidden; background: url(./img/news/midashi.svg) center top no-repeat; background-size:contain; margin-bottom: 0px;}


section#news .grid {grid-template-columns: minmax(350px, 60%) 1fr; grid-auto-rows: 1fr;  grid-gap: 30px;}
section#news .grid .gridItem:nth-of-type(1){grid-column: 2 / 3; grid-row-start: 1;
  grid-row-end: 2;}
section#news .grid .gridItem:nth-of-type(2){grid-column: 1 / 2; grid-row-start: 1;
  grid-row-end: 2;
display: grid;
	align-items: center;
}

section#news .grid .gridItem img.illust{ width:100%; height: auto;}




section#news .grid.in .gridItem:nth-of-type(1) .image{transform: scale(1,1); opacity: 1;}
section#news .grid.in .gridItem:nth-of-type(1) h2{transform: translate(0,0); opacity: 1;}
section#news .grid.in .gridItem:nth-of-type(1) h3{transform: translate(0,0); opacity: 1;}

section#news .grid.in .gridItem:nth-of-type(2) .newsList{transform: translate(0,0); opacity: 1;}


section#news .noneEntry{ border:dashed 2px #000; text-align: center; padding: 100px 0;}

/* project
----------------------------------------------- */

section#project{ padding-top: 400px;  padding-bottom: 100px; margin-bottom: -150px; z-index:3;}

section#project .image.title{ width:300px; margin: 0 auto 20px auto;}

section#project h2.title{ height: 0; padding-top: 53px; overflow: hidden; background: url(./img/project/title.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}

section#project h3.line{ width:455px;; height: 0; padding-top: 102px; overflow: hidden; background: url(./img/project/midashi.svg) center top no-repeat; background-size:contain; margin-bottom: 20px;}

section#project  h3.line hr:nth-of-type(1){ width: 326px;  bottom:61px; left: 66px;}
section#project  h3.line hr:nth-of-type(2){ width: 100%;  bottom:0; left: 0;}

section#project  .read{ margin-bottom:80px;}

section#project article{ border: solid 6px #000; border-radius: 20px; background: #fff; overflow: hidden;

	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-rows: auto;
	grid-gap: 0px;
	padding: 0;
	margin: 0 0 50px 0;

}
section#project article .image{ grid-column: 1 / 2; grid-row-start: 1;  grid-row-end: 2; padding:30px 20px 30px 60px;display: grid;
	align-items: center;}

section#project article .text{ grid-column: 2 / 3; grid-row-start: 1;  grid-row-end: 2; padding: 0px 60px 0px 0px; font-size:0.8em; 	display: grid;
	align-items: center;}

section#project article .text .inBox{ padding: 40px 0;}

section#project article .image img { width: 265px; height: auto;}

section#project article h3{ height: 0; padding-top: 46px; overflow: hidden; margin-bottom: 20px;}

section#project article .more{ grid-column: 1 / 3; grid-row-start: 2;  grid-row-end: 3; background-color: #666; height: 70px; line-height: 60px; color: #fff !important; text-decoration: none !important; border-top:solid 6px #000; }

section#project article .more:after{ content:''; display: block; width: 45px; height: 28px; background: url(./img/icon_go_detail.svg) center top no-repeat; background-size:contain; position: absolute; top: 50%; right: 40px; transform: translate(0,-50%);}

section#project article .more.nolink{ pointer-events:none; cursor: default;}
section#project article .more.nolink:after{ display:none;}


section#project article.mony h3{ background: url(./img/project/mony_title.svg) left top no-repeat; background-size:contain;}
section#project article.matagi h3{ background: url(./img/project/matagi_title.svg) left top no-repeat; background-size:contain;}
section#project article.pig h3{ background: url(./img/project/pig_title.svg) left top no-repeat; background-size:contain;}

section#project article.mony .more{ background-color: #fabd00;  }
section#project article.matagi .more{ background-color: #427935;  }
section#project article.pig .more{ background-color: #d39200;  }


section#project article a{ transition: all 200ms cubic-bezier(.50, .0, .50, 1);}
section#project article.mony a:hover{ background-color: #fdd200 !important;  }
section#project article.matagi a:hover{ background-color: #4b893c !important;  }
section#project article.pig a:hover{ background-color: #e5a500 !important;  }


section#project article .more.moreGrid{ grid-gap:6px; background-color: #000}
section#project article .more.moreGrid:after{ display: none; }
section#project article .more.moreGrid a{ display:block;color: #fff !important; text-decoration: none !important;}
section#project article .more.moreGrid a:after{ content:''; display: block; width: 45px; height: 28px; background: url(./img/icon_go_detail.svg) center top no-repeat; background-size:contain; position: absolute; top: 50%; right: 40px; transform: translate(0,-50%);}

section#project article .more.moreGrid a.icon{ text-align: left; padding-left: 100px;}
section#project article .more.moreGrid a.icon:before{ content:''; display: block; width: 40px; height: 40px;  position: absolute; top: 50%; left: 40px; transform: translate(0,-50%);}


section#project article .more.moreGrid a.icon.facebook:before{background: url(./img/icon_sns_facebook.svg) center center no-repeat; background-size:contain;}
section#project article .more.moreGrid a.icon.twitter:before{background: url(./img/icon_sns_twitter.svg) center center no-repeat; background-size:contain;}

section#project article.pig .more.moreGrid a{ background-color: #d39200; }



/* supporter
----------------------------------------------- */

section#supporter{ color: #fff; padding-top: 470px;z-index: 2;}
section#supporter:before{ 
	background: #023067; 
	content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 90%;
	margin: 10% 0 0 0;
    transform-origin: center center;
    transform: translate(-50%,-50%) rotate(-10deg);
    z-index: -1;
}

section#supporter .innerWrap{    max-width: 1000px;}

section#supporter h2.title{ height: 0; padding-top: 58px; overflow: hidden; background: url(./img/supporter/title.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}

section#supporter h3.line{ width:400px; height: 0; padding-top: 42px; overflow: hidden; background: url(./img/supporter/midashi.svg) center top no-repeat; background-size:contain; margin-bottom: 40px;}

section#supporter  h3.line hr{ background:#fff;}

section#supporter .image.title{ width:300px; margin: 0 auto 20px auto;}

section#supporter ul.banner{ opacity: 0; padding-top: 60px; margin-bottom: 40px; line-height: 0; font-size:0;}
section#supporter ul.banner li { display: inline-block; width: 33.3%; margin: 0 0 30px 0; padding: 0 15px;}
section#supporter ul.banner li a{ display: block; height: auto; position: relative;}
section#supporter ul.banner li a:after{content:''; display: block; position: absolute; top: 0; left: 0;  z-index: 2;width: 100%; height: 100%; background: #fff; opacity: 0;transition: all 200ms cubic-bezier(.50, .0, .50, 1); }
section#supporter ul.banner li img{ width: 100%; height: auto; position: relative; z-index: 1;}

section#supporter ul.banner li a:hover:after{ opacity: 0.2;}

/* message
----------------------------------------------- */

section#message{ z-index: 1; padding-top: 470px;}

section#message:before {
    FONT-VARIANT: JIS90;
    background: #28a838;
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 100%;
    margin: 10% 0 0 0;
    transform-origin: center center;
    transform: translate(-50%,-50%) rotate(-10deg);
    z-index: -1;
}

section#message.flatSection{background: #28a838; }
section#message.flatSection:before{ display: none;}

section#message h3.line{ width:310px; height: 0; padding-top:52px; overflow: hidden; background: url(./img/message/midashi.svg) center top no-repeat; background-size:contain; margin-bottom: 40px;}


section#message .image.title{ width:374px; margin: 0 auto 50px auto;}

section#message .text{ width:100%; height: 0; padding-top:220px; overflow: hidden; background: url(./img/message/text.svg) center top no-repeat; background-size:contain; margin-bottom: 100px;}

section#message .copy{}


/* archives
----------------------------------------------- */

section#archiveArea{}

section#archiveArea .contentsHeader{ padding-bottom: 50px;}
section#archiveArea .contentsHeader .image{ width: 240px; margin: 0 auto 50px;}

.moreread{ padding-top:50px;}
.moreread a.bgBtn{}
.moreread a.bgBtn:before{    transform: translate(0,-50%) rotate(90deg);  left: 22px;}

 .contentsHeader h2.title{ height: 0; padding-top: 38px; overflow: hidden; margin-bottom: 50px;}
 .contentsHeader h3.line{ width: 100%;  height: 0; padding-top: 42px; overflow: hidden; margin-bottom: 50px;}




.post-type-archive-news .contentsHeader h2.title{ padding-top: 38px; background: url(./img/news/title.svg) center top no-repeat; background-size:contain;}
.post-type-archive-news .contentsHeader h3.line{ width: 325px;   padding-top: 42px; background: url(./img/news/midashi.svg) center top no-repeat; background-size:contain; }



	.contentsHeader.single{ width:280px; margin:0 auto 50px;}
	.contentsHeader.single .grid{
			grid-template-columns: 110px 1fr;
		grid-gap: 20px;

	}
.contentsHeader.single .image{ width: 110px; margin: 0 auto 0px;}

.single-news .contentsHeader h2.title{ padding-top: 20px; background: url(./img/news/title.svg) left top no-repeat; background-size:contain; margin-bottom: 5px;}
.single-news .contentsHeader h3.line{ width: 100%;   padding-top: 13px; background: url(./img/news/midashi.svg) left top no-repeat; background-size:contain; margin-bottom: 0px;}
.single-news .contentsHeader h3.line hr{ display:none;}

.titleArea{	display: grid;	align-items: center;}
.titleArea .inBox{ padding-top:10px;}



article.hentry{width: 100%; text-align: left; background: #fff; padding: 0px; grid-gap:  0;border: solid 6px #000; border-radius: 20px; overflow: hidden;}
article.hentry .gridItem.content{ display: block; position: relative;padding: 60px 0px; box-sizing: border-box; width: 100%;}
article.hentry footer.gridItem{  }

article.hentry .entry-header{ padding: 0 60px;width: 100%;}
article.hentry .entry-header .date{ margin-bottom: 50px; line-height: 1; font-size:0.8em;}
article.hentry .entry-header h2{margin-bottom: 50px; }

article.hentry .entry-content{ line-height: 1.4;padding: 0 60px;width: 100%;}

article.hentry .entry-content h1,
article.hentry .entry-content h2,
article.hentry .entry-content h3,
article.hentry .entry-content h4,
article.hentry .entry-content h5,
article.hentry .entry-content h6{ font-weight: normal;}

article.hentry .entry-content article{  margin-bottom: 2em;}

article.hentry .entry-content p:last-child{ margin-bottom: 0px; }

article.hentry .entry-content img.size-full{ max-width: 100%; height: auto;}

article.hentry .entry-content hr{ border: 0; width: 100%; height: 1px; background: #000; margin-bottom: 1em; margin-top: 1em;}

article.hentry .entry-content blockquote{ border: solid 1px #ccc;  padding: 30px; margin: 30px;}

article.hentry .entry-content ul{list-style: disc; padding-left: 1.5em; margin-bottom: 2em;}
article.hentry .entry-content ul{}

article.hentry .entry-content ol{ list-style: decimal; padding-left: 1.5em; margin-bottom: 2em;}
article.hentry .entry-content ol li{}

article.hentry .entry-content dl{ margin-bottom: 2em;}
article.hentry .entry-content dl dt{ padding-left: 1em; font-size: 1.2em;}
article.hentry .entry-content dl dd{ padding-left: 1em; margin-bottom: 1em;}
article.hentry .entry-content dl dt:before{ content:'●'; display: inline-block; position: absolute; top: 0; left: 0;}

article.hentry .entry-content table.entry{ margin-bottom: 2em;
	border: 0;
	 border-collapse:  collapse;   
}
article.hentry .entry-content table.entry th{ padding: 5px;  border: 0; font-weight: normal; vertical-align: top; margin:0; white-space: nowrap; text-align: right}
article.hentry .entry-content table.entry th:after{ content:'：'; display: inline-block;}
article.hentry .entry-content table.entry td{  padding: 5px;  border: 0; margin-bottom: 0;}

article.hentry .entry-content small{ font-size:0.8em;}





article.hentry .entry-footer{ border-top:solid 6px #000; height: 110px; background: #00a6d9;}
article.hentry .entry-footer:before{ content:'この記事をシェア';  display: block; position: absolute;  top: 50%; left: 60px; transform: translate(0,-50%);}
article.hentry .entry-footer ul.share{position: absolute; top: 50%; right: 60px; transform: translate(0,-50%);}
article.hentry .entry-footer ul.share li{ width: 50px; height: 50px; display: inline-block; float: left;}
article.hentry .entry-footer ul.share li a{ display: block; height: 0px; padding-top: 50px; border-radius:  50%;  background: #000; overflow: hidden;}
article.hentry .entry-footer ul.share li:nth-of-type(1){ margin-right: 20px;}
article.hentry .entry-footer ul.share li:nth-of-type(1) a{ background:url(./img/icon_facebook.svg) center center no-repeat #000; background-size:auto 25px;}
article.hentry .entry-footer ul.share li:nth-of-type(2) a{ background:url(./img/icon_twitter.svg) center center no-repeat #000; background-size: auto 20px;}


nav.toArchiveTop{ padding-top: 60px;}
nav.toArchiveTop a{}


.pagination{ overflow: hidden; padding-top: 50px;}
.pagination .page-numbers{
	display: none;
	height: 50px; line-height: 50px; background: #000; border-radius: 10px; padding:0 40px 0 40px; color: #fff !important; text-decoration: none !important;
}

.pagination a.prev2:before{ content:''; display: block; width: 13px; height: 16px; position: absolute; top: 50%; left: 20px; transform: translate(0,-50%);background:url(./img/icon_arrow_white.svg) center center no-repeat; background-size:contain}

.pagination a.prev,
.pagination a.next{display: inline-block; }

.pagination a.prev{ float: left;}
.pagination a.next{ float: right;}


.pagination span.current{}











/* PC用アニメーション */

.anim{ transition: all 500ms cubic-bezier(.175,.885,.32,1.275); }


.inview{}
.inview.in{opacity:1 !important;}


header.globalHeader{transform: translate(0,-100px); transition-delay: 4500ms;}
body:not(.home) header.globalHeader{ transition: all 1ms;transform: translate(0,0px);  transition-delay: 0ms;}
body.loadingFinish header.globalHeader{transform: translate(0,0px);}

section#topContents .grid {transform: translate(-50%,-50%) scale(1,1); opacity: 0; transition-delay: 0ms;}
body.loadingFinish section#topContents .grid{transform: translate(-50%,-50%) scale(1,1);opacity: 1; }

section#topContents .mountLeft    { transition: all 300ms ease-out; transition-delay: 0ms; opacity: 0;transform: translate(-30px,0px);}
section#topContents .mountRight   { transition: all 300ms ease-out; transition-delay: 0ms; opacity: 0;transform: translate(30px,0px);}
section#topContents .animal       { transition: all 800ms ease-out; transition-delay: 600ms;transform: translate(-50%,30px) scale(0.97,0.97); opacity: 0;}
section#topContents .forestLeft   { transition: all 300ms ease-out; transition-delay: 100ms; opacity: 0;transform: translate(-30px,0px);}
section#topContents .forestRight  { transition: all 300ms ease-out; transition-delay: 100ms; opacity: 0;transform: translate(30px,0px);}
section#topContents .human        { transition: all 500ms ease-out; transition-delay: 200ms; opacity: 0;transform: translate(-50%,20px);}
section#topContents .cloudLeft    { transition: all 1000ms ease-out; transition-delay: 600ms; opacity: 0;transform: translate(20px,0px);}
section#topContents .cloudRight   { transition: all 1000ms ease-out; transition-delay: 600ms; opacity: 0;transform: translate(-20px,0px);}

    body.loadingFinish section#topContents .mountLeft{ transform: translate(0,0); opacity: 1;}
    body.loadingFinish section#topContents .mountRight{ transform: translate(0,0); opacity: 1;}
    body.loadingFinish section#topContents .animal{  transform: translate(-50%,0) scale(1,1);  opacity: 1;}
    body.loadingFinish section#topContents .forestLeft{ transform: translate(0,0); opacity: 1;}
    body.loadingFinish section#topContents .forestRight{ transform: translate(0,0); opacity: 1;}
    body.loadingFinish section#topContents .human{ transform: translate(-50%,0); opacity: 1;}
    body.loadingFinish section#topContents .cloudLeft{ transform: translate(0,0); opacity: 1;}
    body.loadingFinish section#topContents .cloudRight{ transform: translate(0,0); opacity: 1;}

  


section#topContents .textArea{}
section#topContents .textArea .text{}
section#topContents .textArea .text h1{transform: translate(0,20px); opacity: 0;
    transition: transform 1000ms ease-out,opacity 1000ms ease-out;
    transition-delay: 600ms; }
section#topContents .textArea .text h2{transform: translate(0,10px); opacity: 0;
    transition: transform 800ms ease-out,opacity 800ms ease-out; 
    transition-delay: 1500ms;}
section#topContents .textArea .text .read{transform: translate(0,10px); opacity: 0;
    transition: all 800ms ease-out;
    transition-delay: 1700ms; }

    section#topContents.step2 .textArea .text{}
    section#topContents.step2 .textArea .text h1{transform: translate(0,0px); opacity: 1;}
    section#topContents.step2 .textArea .text h2{transform: translate(0,0px); opacity: 1;}
    section#topContents.step2 .textArea .text .read{transform: translate(0,0px); opacity: 1;}




#scrollArrow{transform: translate(-50%,0); opacity: 0; transition-delay: 3000ms;}
section#topContents.step2 #scrollArrow{ opacity: 1;}


        section#about h2.title{transform:scale(0,0); opacity: 0;}
        section#about h3.line{transform:translate(0,50px); opacity: 0; transition-delay: 300ms;}
        section#about .image{ transform: scale(0,0); opacity: 0; transition-delay: 200ms;}
        section#about .text{ transform:translate(0,50px); opacity: 0;transition-delay: 200ms;}

        section#about .in h2.title{transform:scale(1,1); opacity: 1;}
        section#about .in h3.line{transform:translate(0,0px); opacity: 1;}
        section#about .image.in{ transform: scale(1,1); opacity: 1;}
        section#about .text.in{ transform:translate(0,0px); opacity: 1;}


section#zero article .image{ }
section#zero article .content{ }

section#zero article.challenge .image{ transform: scale(0,0); opacity: 0;}
section#zero article.challenge h2{ transform:translate(0,50px); opacity: 0;transition-delay: 300ms; }
section#zero article.challenge h3{ transform:translate(0,50px); opacity: 0;transition-delay: 600ms; }
    section#zero article.challenge.in .image{ transform: scale(1,1); opacity: 1;}
    section#zero article.challenge.in h2{ transform:translate(0,0px); opacity: 1;}
    section#zero article.challenge.in h3{ transform:translate(0,0px); opacity: 1;}


section#zero article.chrome .content{ transform: translate(-15%,0) scale(0,0); opacity: 0; }
section#zero article.chrome .image{ transition-delay: 150ms; opacity: 0;transform:translate(-10%,10%) scale(0,0); transform-origin: left bottom;}
    section#zero article.chrome.in .content{ transform: translate(-15%,0) scale(1,1); opacity: 1;}
    section#zero article.chrome.in .image{ transform: translate(0%,0%) scale(1,1); opacity: 1;}

section#zero article.works .content{ transform: translate(-86%,0) scale(0,0); opacity: 0;}
section#zero article.works .image{ transition-delay: 150ms; transform: scale(0,0);opacity: 0;transform-origin: right bottom;}
    section#zero article.works.in .content{ transform: translate(-86%,0) scale(1,1); opacity: 1;}
    section#zero article.works.in .image{ transform: scale(1,1); opacity: 1;}

section#zero article.animal .content{ transform: translate(-15%,0) scale(0,0); opacity: 0;}
section#zero article.animal .image{ transition-delay: 150ms; transform: scale(0,0);opacity: 0;transform-origin: left bottom;}
    section#zero article.animal.in .content{ transform: translate(-15%,0) scale(1,1); opacity: 1;}
    section#zero article.animal.in .image{ transform: scale(1,1); opacity: 1;}

section#zero article.deal .content{ transform: translate(-86%,0) scale(0,0); opacity: 0;}
section#zero article.deal .image{ transition-delay: 150ms; transform: scale(0,0);opacity: 0;transform-origin: right bottom;}
    section#zero article.deal.in .content{ transform: translate(-86%,0) scale(1,1); opacity: 1;}
    section#zero article.deal.in .image{ transform: scale(1,1); opacity: 1;}


section#news .image{ transform: scale(0,0); opacity: 1;}
section#news h2.title{ transform: translate(0,50px); opacity: 0;transition-delay: 300ms;}
section#news h3.line{ transform: translate(0,50px); opacity: 0;transition-delay: 600ms;}
section#news .newsList{transform: translate(0,50px); opacity: 0;transition-delay: 900ms;}
    section#news .in .image{ transform: scale(1,1); opacity: 1;}
    section#news .in h2.title{ transform: translate(0,0px); opacity: 1;}
    section#news .in h3.line{ transform: translate(0,0px); opacity: 1;}
    section#news .in .newsList{transform: translate(0,0px); opacity: 1;}


section#project h2.title{transform: scale(0,0); opacity: 0;}
section#project h3.line{transform: translate(0,50px); opacity: 0;transition-delay: 300ms;}
section#project .image.title{transform: scale(0,0); opacity: 0;transition-delay: 600ms;}
section#project  .read{transform: translate(0,50px); opacity: 0;transition-delay: 900ms;}
    section#project .in h2.title{transform: scale(1,1); opacity: 1;}
    section#project .in h3.line{transform: translate(0,0px); opacity: 1;}
    section#project .in .image.title{transform: scale(1,1); opacity: 1;}
    section#project .in .read{transform: translate(0,0px); opacity: 1;}


section#project article{transform: translate(0,50px); opacity: 0;}
    section#project article.in{transform: translate(0,0px); opacity: 1;}



section#supporter h2.title{ transform: scale(0,0); opacity: 0;}
section#supporter h3.line{ transform: translate(0,50px); opacity: 0;transition-delay: 300ms;}
section#supporter .image.title{ transform: scale(0,0); opacity: 0;transition-delay: 600ms;}
section#supporter .comingsoon{transform: translate(0,50px); opacity: 0;transition-delay: 900ms;}
section#supporter ul.banner{transform: translate(0,50px); opacity: 0;transition-delay: 900ms;}

    section#supporter .in h2.title{ transform: scale(2.5,2.5); opacity: 1;}
    
    @media screen and (min-width: 768px) {
    section#supporter .in h2.title{ transform: scale(5,5); opacity: 1;}
    }
    section#supporter .in h3.line{ transform: translate(0,0px); opacity: 1;}
    section#supporter .in .image.title{  transform: scale(1,1); opacity: 1;}
    section#supporter .in .comingsoon{transform: translate(0,0px); opacity: 1;}
    section#supporter .in ul.banner{transform: translate(0,0px); opacity: 1;}



section#message h3.line{ transform: translate(0,50px); opacity: 0;}
section#message .image.title{ transform: scale(0,0); opacity: 0;transition-delay: 300ms;}
section#message .text{  transform: translate(0,50px); opacity: 0;transition-delay: 600ms;}
section#message .contactBox{ opacity: 0; transition-delay: 1000ms; margin-bottom: 50px;}
section#message .copy{ opacity: 0; transition-delay: 1000ms;}

    section#message .in h3.line{ transform: translate(0,0px); opacity: 1;}
    section#message .in .image.title{ transform: scale(1,1); opacity: 1;}
    section#message .in .text{  transform: translate(0,0px); opacity: 1;}
    section#message .in .contactBox{ opacity: 1;}
    section#message .in .copy{ opacity: 1;}





@media screen and (max-width:750px) {
	
    .grid.sp_col_2{
        grid-template-columns: 1fr 1fr !important;
    }
    
    header.globalHeader .logo{width: 312px; height: 100px; position: absolute; top: 0px; left: 120px; cursor: pointer; background:url(./img/logo.svg) left center no-repeat; background-size:contain; opacity: 0;transition: opacity 300ms cubic-bezier(.50, .0, .50, 1);}
    header.globalHeader .logo.in{ opacity: 1;}
    header.globalHeader #langChange{width: 100px; height: 100px; }
	header.globalHeader #menuBtn{width: 100px; height: 100px; }

    header.globalHeader #menuBtn hr:nth-of-type(1),
    header.globalHeader #menuBtn hr:nth-of-type(2),
    header.globalHeader #menuBtn hr:nth-of-type(3){ width: 42px;}

    header.globalHeader #menuBtn hr:nth-of-type(1){ margin-top: -15px; }
    header.globalHeader #menuBtn hr:nth-of-type(2){ }
    header.globalHeader #menuBtn hr:nth-of-type(3){ margin-top: 15px;}

	
	header.globalHeader ul.share{ padding-top: 36px; width: 146px;
	    position: absolute;
    top: 0px;
    right: 140px;
    padding-left: 0px;
	
	}
	header.globalHeader ul.share:before{ content:''; display: block; width: 67px; height: 15px;background:url(./img/share.svg) left center no-repeat; background-size:contain; position: absolute; top: 10px; left: 50%; transform: translate(-50%,0);}
	header.globalHeader ul.share li{ width: 63px; height: 63px; }
	header.globalHeader ul.share li a{ padding-top: 63px;}

	header.globalHeader ul.share li:nth-of-type(1){ margin-right: 0px; }
	header.globalHeader ul.share li:nth-of-type(2){ float: right;}

	
	#spMenu {
		top: 100px;
		width: 430px;
		right: 0px;
	}
	#spMenu ul li {
		line-height: 100px;
	}
	
	#spMenu ul li#narrow {
		line-height: 50px;
	}	

	.bgBtn{
		width: 100%;
		    height: 100px;
    line-height: 100px;
    background: #000;
    border-radius: 10px;
    padding: 0 0px 0 0px;
		text-align: center;
		
	}
	.bgBtn:before {
    width: 23px;
    height: 28px;
    position: absolute;
    top: 50%;
    left: 40px !important;
	}
	
	

	
	
	.newsList dl{ display:block;}
	.newsList dl dd{  padding-left: 30px;}
	
	
	.innerWrap {
    position: relative;
    width: 630px;
	}
	
	
	
	
	section#topContents .grid { display: block;}
	section#topContents .grid .gridItem:nth-of-type(1){ display: block;}
	section#topContents .grid .gridItem:nth-of-type(2){ display: block;}

	section#topContents h1{ width: 100%;}
	section#topContents h1 .logo{  }
	section#topContents h2.title{ white-space: normal; display: block; overflow: hidden;}
	
		
	
	section#topContents{ padding-top:120px; padding-bottom: 200px; height: auto;  max-height: none;}
	section#topContents .grid{ position: relative; top: 0; left: 0; transform: translate(0,0);}
	
	section#topContents .illust,
	section#topContents h1.title,
	section#topContents h2.title{ margin-bottom:80px;}
	
	section#topContents h2.title{ width:100%; height: 0; padding-top:190px; overflow: hidden; background: url(./img/top/title_sp.svg) center top no-repeat; background-size:contain; }
	
	
	section#about:before{    width: 200%; height: 100%;}
	section#about h3.line{width: 500px;
    padding-top: 130px;
    background: url(./img/about/midashi_sp.svg) center top no-repeat;}
	section#about h3.line hr:nth-of-type(1) {
		width: 100%;
		bottom: 71px;
		left: 0;
	}
	
	section#about h3.line hr:nth-of-type(2) {
		width: 230px;
		bottom: 0px;
		left: 135px;
	}
	
	
	section#zero{margin-bottom: 0px; }
	
	
	
	section#zero article .content{    width: 550px;
    height: 550px;
    border-radius: 275px;
	}
	
	section#zero article{ width:100%; margin: auto; padding-top:	250px; padding-bottom: 100px;}
	section#zero article .content{  transform: translate(0,0) !important;    position: relative;   left: 0%;}
	section#zero article .image{
		    width: 345px !important;
	    top: -280px !important;
    left: auto !important;
		right: -100px !important;
	}
	
	section#zero article .content .centerBox {
		white-space:normal !important; 
	}
	
	
	section#zero article.challenge { padding-top: 0; padding-bottom: 0;}
	section#zero article.challenge .image{ margin: 0 !important; top:0 !important; left:50% !important; right: auto !important;  transform: translate(-50%,0) !important; }
	section#zero article.challenge h3{ width:476px; height: 0; padding-top:200px; overflow: hidden; background: url(./img/zero/midashi_sp.svg) center top no-repeat; background-size:contain; }
	
	section#zero h3.line hr:nth-of-type(1) {
		width: 346px;
		bottom: 144px;
		left: 65px;
	}
	
	section#zero h3.line hr:nth-of-type(2) {
		width: 432px;
		bottom: 74px;
		left: 20px;
	}
	
	section#zero h3.line hr:nth-of-type(3) {
		width: 100%;
		bottom: 0px;
		left: 0;
	}
	
	
	section#zero article.chrome{ }
	section#zero article.chrome .content{    }
	section#zero article.chrome .centerBox{ width:360px; }
	section#zero article.chrome h3{  padding-top: 100px;}
	
	section#zero article.works .centerBox{ width:315px; }
	section#zero article.works h3{  padding-top: 100px;background: url(./img/zero/works_title_sp.svg) left top no-repeat; background-size:contain; }

	section#zero article.animal .centerBox{ width:422px; }
	section#zero article.animal h3{  padding-top: 100px;background: url(./img/zero/animal_title_sp.svg) left top no-repeat; background-size:contain; }

	section#zero article.deal .centerBox{ width:420px;     transform: translate(-48%,-50%);}
	section#zero article.deal h3{  padding-top: 100px;background: url(./img/zero/deal_title_sp.svg) left top no-repeat; background-size:contain; }

	
	section#news{padding-bottom: 300px;}
	section#news .grid{ display:block;}
    
    section#news .grid .newsList{ padding-top: 120px;}
	section#news .image{ width: 360px; margin: 0 auto 30px;}
	section#news h2.title{    padding-top: 46px;}
	section#news h3.line{    padding-top: 63px; width:514px;}
	
	
	
	
	

	section#project .image.title{ width: 330px; margin: 0 auto 50px;}
	section#project h2.title{    padding-top: 62px;}
	section#project h3.line{    padding-top: 210px; width:530px;background: url(./img/project/midashi_sp.svg) center top no-repeat; background-size:contain; margin-bottom: 50px;}
	
	
	section#project h3.line hr:nth-of-type(1) {
		width: 530px;
		bottom: 149px;
		left: 0px;
	}
	
	section#project h3.line hr:nth-of-type(2) {
		width: 450px;
		bottom: 79px;
		left: 35px;
	}
	
	section#project h3.line hr:nth-of-type(3) {
		width: 284px;
		bottom: 0px;
		left: 118px;
	}
	
	
	section#project article{ display:block; padding: 40px 0 0 0;}
	section#project article .image{ padding:0; text-align: center;display:block; }
	section#project article .image img{    width: 320px; margin: 0;}
	section#project article .text{ padding:0 40px 40px 40px;}
	section#project article .more{ display: block;
	    height: 88px;
	    line-height: 78px;
	}
	
	
	
	section#project article .more.moreGrid{  display: grid; grid-template-columns: 1fr 1fr;}
	section#project article .more.moreGrid a.icon{ }
	
	section#project article.mony h3{ padding-top: 150px; width:320px;background: url(./img/project/mony_title_sp.svg) center top no-repeat; background-size:contain; margin-bottom: 70px;}
	
	section#project article.matagi h3{ padding-top: 150px; width:320px;background: url(./img/project/matagi_title_sp.svg) center top no-repeat; background-size:contain; margin-bottom: 70px;}
	
	section#project article.pig h3{ padding-top: 150px; width:320px;background: url(./img/project/pig_title_sp.svg) center top no-repeat; background-size:contain; margin-bottom: 70px;}
	
	section#project article .more.moreGrid {  height: 188px;grid-template-columns: 1fr;}
	section#project article .more.moreGrid a.icon{line-height:88px;}
	
	section#supporter{padding-bottom: 300px;}
	section#supporter .image{ width: 374px; margin: 0 auto 30px;}
	section#supporter h2.title{    padding-top: 170px; width:410px;   background: url(./img/supporter/title_sp.svg) center top no-repeat;
    background-size: contain;}
	section#supporter h3.line{    padding-top: 57px; width:620px;}
	
    section#supporter ul.banner li { width: 49%; margin: 0 0 30px 0; padding: 0 15px;}
	
	
	section#message .image.title{ width: 374px; margin: 0 auto 100px;}
	section#message h3.line{    padding-top: 56px; width:480px; margin-bottom: 80px; }
	section#message .text{    padding-top: 400px; width:630px;  background: url(./img/message/text_sp.svg) center top no-repeat;
    background-size: contain;}
	
	section#message .copy{ font-size:0.8em;}
	
	
	
	article.hentry{ display: block;}
	
	article.hentry .entry-header h2{ font-size:1.3em;}
	
	article.hentry h4 {
    	font-size: 1.2rem;
	}
	
	
	
	
	article.hentry .entry-content dl dt{ }
	article.hentry .entry-content dl dd{  margin-bottom: 2em;}
	article.hentry .entry-content dl dt:before{ }

	
	
	article.hentry .entry-content table.entry{display: block;}
	article.hentry .entry-content table.entry th{ display: block; width: 100%; background-color: #ddd; border-radius:  5px;padding: 10px; text-align: left;}
	article.hentry .entry-content table.entry td{ display: block; width: 100%; margin-bottom: 1em;}
	article.hentry .entry-content table.entry th:after{ display: none;}
	
	article.hentry .entry-content small{ display: block; margin-bottom: 5px;}
	
    
    
    
    
    
    
    
    /* SP用アニメーション */
    
    section#topContents .grid{transform: translate(0%,50px) scale(1,1); opacity: 0;}
        body.loadingFinish section#topContents .grid{ transform: translate(0%,0%) scale(1,1);opacity: 1;}
    
    section#zero article .content{ 
        transform: translate(0,0) scale(0,0) !important;
        position: relative;
        left: 0%;
    }
    section#zero article.works .image{ transform-origin: left bottom;}
    section#zero article.deal .image{ transform-origin: left bottom;}
    
    section#zero article.in .content{ 
        transform: translate(0,0) scale(1,1) !important;
    }
    
    
    section#project article{ transform: translate(0,50px); opacity: 0;}
    
    
    
}

/* ▲ max-width:750px  */



/* media
----------------------------------------------- */
.onlyPC{ display:inline-block !important;}
.onlySP{ display:none !important;}
		
@media screen and (max-width: 1000px) {	

}


@media screen and (max-width: 750px) {	

	
	.onlyPC{ display:none !important;}
	.onlySP{ display:inline-block !important;}
	
	
	
	
}



/* 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)}
}




.scrollAnim {
    animation: scrolltenmetsu 3000ms ;
}

@keyframes scrolltenmetsu {
    0% { opacity: 0;}
	20% { opacity: 1;}
	40% { opacity: 0;}
	60% { opacity: 0;}
	70% { opacity: 0;}
	80% { opacity: 0;}
	90% { opacity: 0;}
	100% { opacity: 0;}
}

@keyframes scrolltenmetsu2 {
    0% { opacity: 0;}
	50% { opacity: 1;}
	60% { opacity: 1;}
	100% { opacity: 0;}
}

section#supporter {
    display: none;
}