/*@media screen and (min-width:1200px){
	
	.nav-wrapper{
		margin-top:-125px;
	}
}*/
@media screen and (min-width:1420px){
.ccc {
	display:none;
}
}
@media screen and (max-width:1345px){
.story01 .features-slider {
    position: relative;
    padding: 11% 10% 0 10%;
    height: auto;
}
}
@media screen and (min-width:1335px) {
.eee {
	display:none;
}
}
@media screen and (max-width:1300px){
	.features-list .col-md-4 {
		height: 250px;
	}
}
@media screen and (max-width:1217px){
.story01 .features-slider h3,
.story02 .features-slider h3 {
    font-size: 20px;
}
.story01 .features-slider h3 span,
.story02 .features-slider h3 span {
    font-size: 30px;
}
}



@media screen and (max-width:1200px){
	
.grnv ul {
    width: 95%;
	max-width: none;
}

.hero h1 {
	margin: 22% 50px 50px 50px;
}

	/*.nav-wrapper{
		margin-top:-150px;
	}*/
	
	.device{left:0;top:60px;}
	.features-list .cast002 {
		height: 300px;
	}
	#staff .col-md-4 {
		height: 220px;
	}
	
	/*--------*/
	/*コメント*/
	
	#comment .row{
		margin:0;
	}
	
	#comment .col-md-4 {
		height: 387px;
	}
	/*1203更新*/
	
	footer li{margin-right:10%;}
	.feature-content{width:55%;}
	.hero h1 span.date {font-size:16px;}
	.grnv ul li {
		height: auto;
		overflow: hidden;
		margin: 0 0.7% 0.7% 0;
		list-style: none;
		float: left;
	}
	.overlay ul li {
		width: 31.333%;
		margin: 0 2% 2% 0 !important;
	}
	.overlay ul li:nth-child(3), .overlay ul li:nth-child(6), .overlay ul li:nth-child(9) {
		margin: 0 0 2% 0;
	}
	.story01 .features-slider {
    position: relative;
    padding: 8% 10% 0 10%;
    height: auto;
}

}


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

.eee {
	display:none;
}
	
#story h3{
    margin-top: 30px;
}

#story p{
    margin-top: 30px;
	padding: 0 5%;
}

#story .comment{
    width: 60%;
	max-width:600px;
}

#story .com02 {
    right: -18%;
    top: -35px;
}

#story .com03 {
    left: -18%;
    top: 35px;
}

#story .com04 {
    right: -13%;
    top: 60px;
}

#story .com05 {
    right: -18%;
    top: 65px;
}

#story .com06{
	left:-15%;
	top:105px;
}

#story .com07{
    left: -18%;
	top:35px;
	min-width:0px;
	margin-bottom:35px;
}




#cast .row {
    width: 100%;
    float: right;
    padding:10%;
    background:url(../img/cast02_bg.jpg) left top no-repeat;
    background-size: cover;
}

#staff .row {
    width: 100%;
    float: right;
    padding:10%;
    background:url(../img/staff02_bg.jpg) left top no-repeat;
    background-size: cover;
}

	
#recipe02,
#recipe01 {
     height: auto;
}	
.showcase h3 {
	    padding-top: 20px;
}

#recipe h3 {
	width:80%;
	margin:0 auto;
}

#story .col-md-6 {
	width: 90%;
    padding: 0;
	margin:0 auto;
}


/* ==========================================================================
note
========================================================================== */

.note {
    background: url(../img/note_bg.jpg) no-repeat center;
	background-attachment: inherit;	
    background-size: cover;
}

.note_conts01,
.note_conts02{
	float:none;
	margin:0;
	padding:0;
	width:100%;
}

.note ul{
	width:100%;
	margin:0;
	padding:0;
}

.note li{
	width:50%;
	margin:0;
	padding:0;
	float:left;
	list-style:none;
	border:1px solid #ff0000;
}

.note li:last-child{
	width:100%;
}

.note h2,
.note h3{
	width:100%;
	margin:0;
	padding:0;
}

.note h2 img{
	width:100%;
	margin:0;
	padding:0;
	max-width:none;
	height:auto !important;
}




#recipe01 .features-slider {
    padding: 10% 0;
	width:80%;
	margin:0 auto;
	float:none;
	
}
.recipe01img{
    background-size: cover;
	width:100%;
	float:none;
	height:600px;
}
#recipe02 .features-slider {
    padding: 10% 0;
	width:80%;
	margin:0 auto;
	float:none;
	
}
.recipe02img{
    background-size: cover;
	width:100%;
	float:none;
	height:600px;
}



	
.story01 .features-img {
    width: 100%;
    height: auto;
    text-align:center;
	margin:0;
	padding:0 0 0 0 ;
}

.story02 .features-img {
    width: 100%;
    height: auto;
    text-align:center;
	margin:0;
	padding:0 0 0 0 ;
}
	
	.hero, #intro, #story, #note, #about {
		background-attachment: scroll;
	}
	#about {
		background-size: cover;
	}
	.container {
		width: 100%;
	}
	.hero {
		padding: 0;
		/*height:750px;*/
	}
	.hero h1 {
		width: 80%;
		height: auto;
		margin: 0 auto 20px auto;
	}
	.grnv ul {
		width: 90%;
		margin: 0 auto;
		padding:30px 0;
	}
	.grnv ul li, .grnv ul li {
		width: 32.33333%;
		height: auto;
		overflow: hidden;
		list-style: none;
		display: block;
		float: left;
		max-width:999px;
	}
	
	.learn-btn, .use-btn {
		font-size: 12px;
	}
	.grnv i {
		width: 50%;
		margin: 5px 25% 0 25%;
		float: none;
		clear: both;
		display: block;
		font-size: 18px !important;
	}
	.hero h1 span.copy {
		padding: 0 0 20px 0;
	}
	.hero h1 span.date {
		font-size: 15px;
		margin: 20px 0 0 0;
	}
	
	/*.nav-wrapper{
		margin-top:-150px;
	}*/
	
	#intro {
		height: auto;
	}
	#story .features-slider {
		padding: 10%;
	}
	#note .showcase-wrap {
		padding: 80px 10%;
	}
	#about .showcase-wrap {
		padding: 80px 10% 0 10%;
	}
	#about p {
		width: 100%;
	}
	.story01{
		height: auto;
	}
	.storyimg{
		width:98%;
		padding:8% 5% 0 5%;
		max-height:9999px;
		max-width:9999px;

	}

	.storyimg02{
		width:98%;
		padding:5%;
		max-height:9999px;
		max-width:9999px;
		margin:0;

	}
.story02{
	height:auto;
	padding: 0;
}

	
	#cast .col-md-4 {
		width: 100%;
		height: auto;
		overflow: hidden;
		float: left;
	}
	#cast .feature-content {
		width: 60%;
	}
	.showcase img.chronology {
		width: 100%;
		float: none;
	}
	#staff .row {
		margin: 0;
	}
	#staff .col-md-4 {
		width: 50%;
		height: 200px;
		overflow: hidden;
		float: left;
		border-left: none;
	}
	#staff .col-md-12 {
		border-left: #000 solid 2px;
		overflow: hidden;
	}
	#staff .director, #staff .director_img {
		height: auto;
		border-bottom: none;
		margin: 0 0 0 -2px;
	}
	
	/*------------*/
	/*コメント*/
	
	#comment .row {
		margin: 0;
	}
	
	#comment .col-md-12 {
		border-left:#000 solid 2px;
		overflow: hidden;
	}
	
	#comment .director, #comment .director_img {
		height: auto;
		border-right: #000 solid 2px;
		margin: 0 0 0 -2px;
	}
	/*1203更新*/
	
	.feature-1,.feature-2{margin-bottom:50px;}
	.device{display:none;}
	.screenshots ul li{width:50%;}
	.screenshots-intro{padding:110px 0 100px 0;}
	.feature-content{width:80%;}
	.features-slider{
		height:100%;
   		padding: 0 10% 10% 10%;
	}
	footer ul.snsnavi {
		width: 90%;
		height: auto;
		overflow: hidden;
		margin: 30px 5% 0 5%;
	}
	footer ul.snsnavi li {
		width: 25%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	footer ul.snsnavi li a img {
		width: 100%;
	}
	
	
	footer ul.bannernav {
		width: 90%;
		height: auto;
		overflow: hidden;
		margin: 30px 5% 0 5%;
	}
	footer ul.bannernav li {
		width: 25%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	footer ul.bannernav li a img {
		width: 100%;
	}
	
	footer ul.corpnavi {
		width: 90%;
		margin: 30px 5% 0 5%;
		overflow: hidden;
	}
	.overlay ul li a {
		font-size: 13px;
	}
	
.story01 .features-slider {
    position: relative;
    padding: 10% 10% 10% 10%;
    height: auto;
}	

.li_img02 a,
.li_img a{
	padding:30px 0;
}

/*.epilogue {
    padding: 5%;
}*/

}

@media screen and (max-width:980px){
	#comment .row {
		margin: 0;
	}
	
	#comment .col-md-4{
		height:auto;
	}
	
.story01 .features-slider {
    position: relative;
    padding: 0 10% 10% 10%;
    height: auto;
}	

.story02 .features-slider {
    position: relative;
    padding: 8% 10% 0 10%;
    height: auto;
}	
}

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

}

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

.story01 .features-slider {
    position: relative;
    padding: 10% 10% 10% 10%;
    height: auto;
}	
#story p{
	text-align:left;
}

	.grnv ul li, .grnv ul li:nth-child(even) {
		width: 48%;
		margin: 0 0 2% 2%;
		max-width:999px;
	}
	.grnv ul li, .grnv ul li:nth-child(odd) {
		width: 48%;
		margin: 0 0 2% 0;
	}
.grnv ul {
    width: 90%;
    margin: 0 auto;
    padding: 30px 0;
}

.ccc {
	display:none;
}
.grnv i {
    width: auto;
    margin: 0 0 0 8px;
    float: none;
    clear: both;
    display: inline-block;
    font-size: 18px !important;
}

}

@media screen and (max-width:775px){
.epilogue h3{
	font-size:1.5em;
}
}


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

/*#cast h3,
#staff h3{
	font-size:20px !important;
}

#cast h3 span,
#staff h3 span{
	font-size:14px !important;
}

#cast p,
#staff p{
	font-size:10px !important;
}*/

}


@media screen and (max-width:680px){
	.feature-content{width:60%;}
}
@media screen and (min-width:641px){
.intro_sp,
.story_sp{
	display:none;
}


.sp{
	display:none !important;
}

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

.pc{
	display:none !important;
}

.hero .dezi_banner {
    position: relative;
    top: auto;
    left: auto;
    height: auto;
    width: 100%;
    z-index: inherit;
    margin: 10px auto;
}

#cast h2 img{
	width:33%;
}

#intro {
    background: none;
	background-color:#7ecbf3;
    min-height: 1px;
    position: relative;
    z-index: 1;
}

#intro h2,
#intro h3 {
    margin: 0 0 0 0;
    width: 100%;
    padding: 5% 5% 40px 5%;
    background: #e60013;}
	
#intro h4 {
    font-size: 20px;
}	
#intro .features-slider {
    background: rgba(0,0,0,0);
	    padding: 15% 10% 0 10%;
}
#intro .flickity-page-dots .dot.is-selected {
    background: #fff;
}
#intro .flickity-page-dots .dot {
    border: 2px solid #fff;
}
#intro .flickity-page-dots li:before {
    color: #fff;
}
#intro .flickity-page-dots li.is-selected:before {
    color: #7ecbf3;
}
#story {
	background-size: cover;
	padding:0;
	background:none;
	background-color:#b3c8ba;
}
#staff h2 img{
	width:40%;
}

#story h2 img {
    width: 40%;
}

#story h3 img {
    width: 88%;
}

#story .comment {
    max-width: none;
    margin: 10px auto;
	width: 90%;
}

#story h4{
	text-align:center;
	margin:10% 0;
}

#story h4 img{
	width:85%;
}

#story .com01{
	left:0;
}

#story .com02{
	right:0;
	top:0;
}

#story .com03{
	left:0;
	top:0;
}
#story .com04{
	left:0;
	top:0;
}

#story .com05{
	left:0;
	top:0;
}
#story .com06{
	left:0;
	top:0;
}

#story .com07{
	left:0;
	top:0;
}



#staff .director .feature-icon{
	width:100%;
	float:none;
	margin:0;
	padding:0;
}

#staff .director .feature-content{
	width:100%;
	float:none;
	margin:0;
	padding:5% 0 0 0;
}
	
.relationship img{
	padding:1.5%;
	width:100%;
}

.relationship .container{
	height:100vh;
}


.relationship .col-md-12{
	padding-left: 0;
    padding-right: 0;
}
	
.container-fluid {
    padding-left: 0;
    padding-right: 0;
}
#intro .features-slider h3 {
    font-size: 15px;
}

#intro .features-slider h3 span {
    font-size: 20px;
}

#note h3 {
    font-size: 20px;
}

.showcase h3 {
    font-size: 15px;
}


	nav{margin-top:0;}
	.overlay ul{margin-left:0px;}
	.overlay ul li {
		width: 48%;
		margin: 0 4% 4% 0;
	}
	.overlay ul li:nth-child(even) {
		margin: 0 0 5% 0;
	}
	.overlay ul li a{padding:10px 0;min-width:100%;font-size:11px; display: block;}
	.overlay ul.icon li {
		width: 52%;
		margin: 0 !important;
	}
	.overlay ul.icon li:nth-child(even) {
		width: 48%;
		margin: 0;
	}
	.overlay ul li a i {
		width: 20%;
	}
	.overlay ul.icon li a{padding:0;min-width:100%;font-size:12px; display: block;}
	.news dl {height:auto;}
	.news dl dt span {
		float: none;
		clear: both;
	}
	h3 br {
		display: none;
	}
	.news dl dt br {
		display: none;
	}
	.hero h1 span br.sp {
		display: inline;
	}
	.features-slider {
		padding: 80px 5% 40px 5%;
	}
	.features-img, .features-bg {
		height: auto;
		/*min-height: 300px;*/
	}
	#intro .features-img, #intro .features-bg {
		height: 0;
		min-height: 0;
	}
	.showcase-wrap {
		padding: 80px 0;
	}
	#story .showcase-wrap {
		min-height:0;
	}
	#story .features-slider {
		padding: 80px 5% 40px 5%;
	}
	#note .showcase-wrap {
		padding: 80px 5% 40px 5%;
	}
	#about .showcase-wrap {
		padding: 80px 5% 0 5%;
	}
	
	#about p, .features-slider li p {
		font-size: 15px;
		line-height: 1.8em;
	}
	
	/* ==========================================================================
	popup
	========================================================================== */
	body.staff .container {
		padding: 0 5% 30px 5%;
	}
	body.staff h1 {
		margin: 30px 0 10px 0;
	}
	body.cast .container {
		padding: 0 5% 30px 5%;
	}
	body.cast h1 {
		margin: 30px 0 10px 0;
	}
	body.cast .col-md-12 img {
		display: none;
	}
	body.news dd, body.cast p.conts, body.staff p.conts, #staff p.conts {
		margin: 0;
		font-size: 11px;
		line-height: 1.3em;
	}
	
	footer {
		padding: 10px 0px;
	}
	footer ul.snsnavi li {
		width: 50%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	
	footer ul.bannernav li {
		width: 50%;
		height:auto;
		float: left;
		margin: 0;
		padding:  0 5px 10px 5px;	
	}
	
	footer ul.corpnavi {
		margin: 20px 5%;
	}
	footer ul.corpnavi li {
		width: 50%;
		display: block;
		text-align: left;
		float: left;
	}
	
	
	/*-----------------------------------------------------*/
	/*コメント*/
	#comment{
		padding-left:25px;
		padding-right:25px;
	}
	
	#comment .col-md-4{
		height:auto;
	}
	
	#comment .director, #comment .director_img {
		height: auto;
		border-bottom: none;
		border-right: #000 solid 2px;
		margin: 0 0 0 -2px;
		padding: -15px 30px 0 30px;
	}
	/*1204更新*/
	/*-----------------------------------------------------*/
	
	.story01 .features-slider li p,
	.story02 .features-slider li p{
		padding:5% 0 10% 0;
	}
	
.story01 .features-slider, 
.story02 .features-slider {
    position: relative;
    padding: 15% 10% 0 10%;
    height: auto;
}	

	.am{
	text-align:center;
	padding:0 0 40px 0;
}

/*
.btn01 {
	text-align:center;
     border: none;
     font-family: inherit;
     font-size: inherit;
     color: inherit;
     background: none;
     cursor: pointer;
     display: inline-block;
		margin:15px 8px;
     letter-spacing: 1px;
     font-weight: 700;
     outline: none;
	 width:40%;
	 height:70px;
}
*/

.btn01 {
	text-align:center;
     border: none;
     font-family: inherit;
     font-size: inherit;
     color: inherit;
     background: none;
     cursor: pointer;
     display: inline-block;
     margin: 15px 5px;
     letter-spacing: 1px;
     font-weight: 700;
     outline: none;
	 width:80% !important;
	 height:70px !important;
}

 
/* Button 1 */
.btn-1 {
  border: 2px solid #856423;
  color: #856423;
  background: #f4f3ec;
}

.btn-1:hover {
  color: #f4f3ec;
  border: 2px solid #856423;
}

.button_cg{
	display:block;
}

.grnv img{
	max-width:280px;
	padding:0 0 30px 0;
}



}
@media screen and (max-width:628px){
	
.story01 .features-slider {
    position: relative;
    padding: 30% 10% 10% 10%;
    height: auto;
}	
}
@media screen and (max-width:490px){
.epilogue h3{
	font-size:1.5em;
}
}

@media screen and (max-width:465px){
	
.epilogue h3{
	font-size:1.2em;
}

.story01 .features-slider {
    position: relative;
    padding: 10% 10% 10% 10%;
    height: auto;
}	
	
	.hero h1 {
		width: 100%;
		min-width: 280px;
		height: auto;
		margin: 0 auto 0 auto;
	}
	.hero h1 span.copy {
		padding: 0;
	}
	.hero h1 span.date {
		font-size: 13px;
		margin: 10px 0 20px 0;
	}
	.learn-btn, .use-btn {
		font-size: 11px;
	}
	/*
	.hero ul li, .hero ul li:nth-child(even) {
		width: 20%;
		margin: 0 0 0 2%;
	}
	*/
	
	.li_img,
	.li_img02{
		width: 31% !important;
		margin: 2% 0 2% 2% !important;
	}
	.learn-btn {
		padding: 8px 0;
	}
	.use-btn {
		padding: 10px 0;
	}

	#cast .col-md-4 {
		width: 100%;
		height: auto;
	}
	#cast .feature-content {
		width: 100%;
	}
	.showcase img.chronology {
		width: 100%;
		float: none;
	}
	.feature-icon {
		float: none;
		clear: both;
	}
	
	#staff .row {
		margin: 0;
	}
	#staff .col-md-4 {
		width: 100%;
		height: auto;
		padding: 10px 30px 30px 30px;
	}
	#staff .col-md-12 {
		border-left: #000 solid 2px;
		overflow: hidden;
	}
	
	/*---------------------------------------*/
	/*コメント*/
	#comment{
		padding-left:18px;
		padding-right:18px;
	}

	#comment .row {
		margin: 0;
	}
	#comment .col-md-4 {
		width: 100%;
		height: auto;
		padding: 10px 30px 30px 30px;
	}
	#comment .col-md-12 {
		border-left: #000 solid 2px;
		overflow: hidden;
	}
	/*1204更新*/
	/*---------------------------------------*/
	
	
	#cast .feature-icon {
		width: 50%;
		float: none;
		clear: both;
		margin: 0 25%;
	}
	#staff .feature-icon {
		width: 70%;
		float: none;
		clear: both;
		margin: 0 15%;
	}
	#staff .director, #staff .director_img {
		height: auto;
		border: #000 solid 2px;
		margin: 0 0 0 -2px;
		padding: 30px 30px 0 30px;
	}
	#staff .director {
		padding: 30px
	}
	
	/*--------------------------*/
	/*コメント*/
	#comment .feature-icon {
		width: 70%;
		float: none;
		clear: both;
		margin: 0 15%;
	}
	#comment .director, #comment .director_img {
		height: auto;
		border-bottom: none;
		border-right: #000 solid 2px;
		margin: 0 0 0 -2px;
		padding: -15px 30px 0 30px;
	}
	#comment .director {
		border-top: none;
		padding: 0 30px 30px 30px
	}
	/*1203更新*/
	
	.screenshots figcaption .caption-content a {
		display: none;
	}
	.screenshots ul li{width:100%;min-height:100%;float:none;}
	section.video i{font-size:30px;}
	section.video h1{font-size:15px;font-weight:400;}
	section.video{padding:40px;}
	.feature-content{width:100%;text-align:center;margin-top:20px;}
	.feature-icon{display:block;margin:0 auto;}
	blockquote p{width:60%;}
	footer ul.corpnavi li {width: 100%;}
	
	.li_img{
	background:url(../img/button01.png) no-repeat;
	background-size:cover;
	margin-top:2px;
}

.li_img02{
	background:url(../img/button02.png) no-repeat;
	background-size:cover;
	margin-top:2px;
}

	
}
@media screen and (max-width:320px){
	
	
	.grnv ul {
		width: 90%;
	}
	.hero {
		height:auto;
		/*background: url(../img/main_sp.png) 80% -100px no-repeat #000;*/
		background-size:cover;
	}
	.hero h1 {
		margin: 20vh auto 5vh auto;
	
	}
	
	.hero h1 img{
		margin:0;
	}
	

}