@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';}



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

header.globalHeader .logo{background:url(./img/logo_left.svg) left center no-repeat; background-size:contain;}

#spMenu {
    width: 370px;
	right: 0px;
}

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


/* top
----------------------------------------------- */
section#topContents h2.title{  padding-top: 26.3%; background: url(./img/top/title.svg) center top no-repeat; }


/* about
----------------------------------------------- */
section#about h2.title{  padding-top: 50px;  background: url(./img/about/title.svg) center top no-repeat; }
section#about h3.line{ width:512px; padding-top: 42px;  background: url(./img/about/midashi.svg) center top no-repeat; background-size:contain; }


/* zero
----------------------------------------------- */
section#zero h3.line{ padding-top: 102px; background: url(./img/zero/midashi.svg) center top no-repeat; background-size:contain; }
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: 214px;  bottom:0; left: 158px;}


section#zero article .content{}
section#zero article .content .centerBox{ white-space: normal;}

section#zero article.challenge {width: 530px;}
section#zero article.challenge h2{width: 100%; }
section#zero article.challenge h3{width: 100%;}

section#zero article.chrome{}
section#zero article.chrome .image{ position:absolute; top: -240px; right: -120px;}
section#zero article.chrome .centerBox{ width:245px;}
section#zero article.chrome h3{ padding-top:60px; background: url(./img/zero/chrome_title.svg) left top no-repeat; background-size:contain; }

section#zero article.works{}
section#zero article.works .image{ position:absolute; top: -240px; left: -110px;}
section#zero article.works .centerBox{ width:316px;}
section#zero article.works h3{ padding-top:26px; background: url(./img/zero/works_title.svg) left top no-repeat; background-size:contain; }

section#zero article.animal{}
section#zero article.animal .image{ position:absolute; top: -240px; right: -120px;}
section#zero article.animal .centerBox{ width:290px;}
section#zero article.animal h3{ padding-top:60px; background: url(./img/zero/animal_title.svg) left top no-repeat; background-size:contain; }

section#zero article.deal{}
section#zero article.deal .image{ position:absolute; top: -250px; left: -110px;}
section#zero article.deal .centerBox{ width:260px;}
section#zero article.deal h3{ padding-top:60px; background: url(./img/zero/deal_title.svg) left top no-repeat; background-size:contain; }



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

section#news h2.title{  padding-top: 50px; background: url(./img/news/title.svg) center top no-repeat; background-size:contain; }


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




/* project
----------------------------------------------- */
section#project h2.title{ padding-top: 53px; background: url(./img/project/title.svg) center top no-repeat; background-size:contain;}
section#project h3.line{ width:500px;padding-top: 98px;  background: url(./img/project/midashi.svg) center top no-repeat; background-size:contain; }
section#project  h3.line hr:nth-of-type(1){ width: 493px;  bottom:61px; left: 5px;}
section#project  h3.line hr:nth-of-type(2){ width: 100%;  bottom:0; left: 0;}
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;}


/* supporter
----------------------------------------------- */
section#supporter h2.title{ padding-top: 61px; background: url(./img/supporter/title.svg) center top no-repeat; background-size:contain; }
section#supporter h3.line{ width:430px; padding-top: 100px; background: url(./img/supporter/midashi.svg) center top no-repeat; background-size:contain; }
section#supporter  h3.line hr:nth-of-type(1){ width: 430px;  bottom:61px; left: 0px;}
section#supporter  h3.line hr:nth-of-type(2){ width: 390px;  bottom:0; left: 20px;}


/* message
----------------------------------------------- */
section#message h3.line{ width:330px; padding-top:37px; background: url(./img/message/midashi.svg) center top no-repeat; background-size:contain; }
section#message .text{ width:100%;padding-top:220px; margin-bottom: 50px; background: url(./img/message/text.svg) center top no-repeat; background-size:contain; }




section#message .contactBox{ margin-bottom: 50px;}
section#message .contactBox .contactInfo{}








/* archives
----------------------------------------------- */
.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; }


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

article.hentry .entry-footer:before{ content:'Share'; }



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

	#spMenu {
		width: 570px;
		right: 0px;
	}
	
	section#topContents h2.title{ width:100%; padding-top:340px; background: url(./img/top/title_sp.svg) center top no-repeat; background-size:contain; }
	section#about h2.title{	width: 100%;   padding-top: 166px;  background: url(./img/about/title_sp.svg) center top no-repeat;}
	section#about h3.line{width: 470px;   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: 325px;bottom: 0px;left: 75px;}
	
	section#zero article .content {
		width: 100%;
		height: auto;
		border-radius: 20px;
		position: absolute;
		left: 50%;
		transform: translate(-50%,0) !important;
	}
	
	section#zero article{ width:100%; margin: auto; padding-top:	250px; padding-bottom: 50px;}
	section#zero article .content{  transform: translate(0,0) !important;    position: relative;   left: 0%;}
	section#zero article .image{width: 345px !important;   top: -250px !important;   left: 50% !important;right: auto !important; transform: translate(-50%,0) !important; 	}
	
	section#zero article .content .centerBox {
	   display: block;
		position: relative;
		top: 0;
		left: 0;
		transform: translate(0,0);
		text-align: left;
		white-space:normal;
		padding: 160px 40px 80px 40px;
		width:100% !important;
	}
	
	
	section#zero article.challenge h3{ width:485px; padding-top:200px;  background: url(./img/zero/midashi_sp.svg) center top no-repeat; background-size:contain; }
	
	section#zero h3.line hr:nth-of-type(1) {
		width: 485px;
		bottom: 144px;
		left: 0px;
	}
	
	section#zero h3.line hr:nth-of-type(2) {
		width: 335px;
		bottom: 74px;
		left: 80px;
	}
	
	section#zero h3.line hr:nth-of-type(3) {
		width: 335px;
		bottom: 0px;
		left: 80px;
	}
	
	
	section#zero article.chrome .centerBox{ width:360px; }
	section#zero article.chrome h3{  padding-top: 100px; background: url(./img/zero/chrome_title_sp.svg) center top no-repeat; background-size:contain; margin-bottom: 75px;}
	
	section#zero article.works .centerBox{ width:315px; }
	section#zero article.works h3{  padding-top: 52px;background: url(./img/zero/works_title_sp.svg) center top no-repeat; background-size:contain;margin-bottom: 75px; }

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

	section#zero article.deal .centerBox{ width:420px; }
	section#zero article.deal h3{  padding-top: 52px;background: url(./img/zero/deal_title_sp.svg) center top no-repeat; background-size:contain;margin-bottom: 75px; }

	
	section#news .newsList{padding-top: 50px;}
	section#news h3.line {
		padding-top: 53px;
		width: 100%;
	}
	
	section#project h2.title{    padding-top: 76px;}
	section#project h3.line{    padding-top: 200px; width:610px;;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: 610px;
		bottom: 149px;
		left: 0px;
	}
	
	section#project h3.line hr:nth-of-type(2) {
		width: 465px;
		bottom: 79px;
		left: 75px;
	}
	
	section#project h3.line hr:nth-of-type(3) {
		width: 480px;
		bottom: 0px;
		left: 60px;
	}
	
	
	section#project article.mony h3{ padding-top: 62px; width:100%; background-position:  center top; margin-bottom: 60px;}
	section#project article.matagi h3{ padding-top: 62px; width:100%; background-position:  center top; margin-bottom: 60px;}
	section#project article.pig h3{ padding-top: 62px; width:100%; background-position:  center top; margin-bottom: 60px;}
	
	section#supporter h2.title{    padding-top: 188px; width:100%;   background: url(./img/supporter/title_sp.svg) center top no-repeat;  background-size: contain;}
	section#supporter h3.line{    padding-top: 200px; width:100%;background: url(./img/supporter/midashi_sp.svg) center top no-repeat;}
	
	section#supporter h3.line hr:nth-of-type(1) {
		width: 610px;
		bottom: 149px;
		left: 10px;
	}
	
	section#supporter h3.line hr:nth-of-type(2) {
		width: 405px;
		bottom: 73px;
		left: 110px;
	}
	
	section#supporter h3.line hr:nth-of-type(3) {
		width: 320px;
		bottom: 0px;
		left: 150px;
	}
	
	
	
	section#message h3.line{    padding-top: 56px; width:100%; margin-bottom: 80px; }
	section#message .text{    padding-top: 510px; width:100%;  background: url(./img/message/text_sp.svg) center top no-repeat;
    background-size: contain;}
    
    
    
    
    
    
    
    
    
    /* SP用アニメーション */
    
    section#topContents .grid{
        transform: translate(0%,50px) scale(1,1) !important; 
        opacity: 0;
    }
    body.loadingFinish section#topContents .grid{
        transform: translate(0%,0%) scale(1,1) !important; 
        opacity: 1;
    }
    
    section#zero article .content {
        transform: translate(0,50px) scale(1,1) !important;
        opacity: 0;
    }
	
        section#zero article.in .content {
            transform: translate(0,0px) scale(1,1) !important;
            opacity: 1;
        }
    
    section#zero article .image{
        transform: translate(-50%,50px) scale(1,1) !important;
        opacity: 0;
        transition-delay: 400ms;
    }

        section#zero article.in .image{
            transform: translate(-50%,0px) scale(1,1) !important;
            opacity: 1;
        }
	
}

/* ▲ max-width:750px  */



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

}


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

	
	.onlyPC{ display:none;}
	.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)}
}