@charset "utf-8";

.header {
	z-index:99999 !important;
}

.header .wrapper .gnav .menu-lv2 {
	z-index:99999 !important;
}


svg {
	max-width:100%;
}

img[src$=".svg"] {
    width: 100%;
}




/* clearfix
--------------------------------------------------------------------*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}/*IE7用*/

/* Hides from IE-mac \*/
* html .clearfix { height:1%;}
.clearfix { display:block;}
/* End hide from IE-mac */


.mb150 {
	margin-bottom:300px !important;
}


/*-------------------------------------------------------------------
	クリエイション2019
-------------------------------------------------------------------*/

#cleation2019 {
	background:url(../images/bg_icon.png) center top repeat-y;
	background-size:100% auto;
}

#cleation2019 #mtitle {
	position:relative;
	margin:0 0 150px;
}

#cleation2019 #mtitle .bg img {
	width:100% !important;
}


#cleation2019 #mtitle .title {
	position:absolute;
	bottom:20px;
	left:20%;
}

#cleation2019 .inner {
	width:1240px;
	margin:0 auto 200px;
	position:relative;
}



#cleation2019 .inner .relabox {
	position:relative;
	min-height:2000px;
	margin-bottom:400px;
}

#cleation2019 .inner .relabox02 {
	position:relative;
	padding:0 90px;
	margin-bottom:400px;
}

#cleation2019 .inner .relabox03 {
	position:relative;
	padding-bottom:900px;
}

#cleation2019 .inner .relabox04 {
	position:relative;
	padding-top:500px;
	height:2500px;
	margin-bottom:400px;
}


#cleation2019 .inner .case01 {
	text-align:center;
	margin:0 0 300px;
}

#cleation2019 .inner .case01 .title {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	text-align: center;
	display: block !important;
	pointer-events: none;

}

#cleation2019 .inner .colorbox {
	z-index:10;
}

#cleation2019 .inner .colorbox li {
	display:none;
}

#cleation2019 .inner .colorbox li:first-child {
	display:block;
}

#cleation2019 .inner .case02 {
	position:absolute;
	top:350px;
	right:0;
}

#cleation2019 .inner .case03 {
	position:absolute;
	bottom:0;
	left:0;
	z-index: 99;
}

#cleation2019 .inner .case04 {
	text-align:right;
	position:relative;
	z-index:99 !important;
}


#cleation2019 .inner .case05 {
	position:absolute;
	top:0;
	left:60px;
	z-index: 99 !important; 
}

#cleation2019 .inner .case06 {
	text-align:right;
  position:relative;
	z-index:99 !important;
}

#cleation2019 .inner .case07 {
	position:absolute;
	bottom:0;
	left:0;
}

#cleation2019 .inner .case08 {
	text-align:center;
}

#cleation2019 .inner .case08 .title {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	text-align: center;
	display: block !important;
	pointer-events: none;

}


.lpfixed {
	position:fixed;
	top:50%;
	left:0;
	width:100%;
	text-align:center;
	transition:1s;
	z-index:2;
	transform:translateY(-50%);
	opacity: 1.0;
}

.none {
	opacity:0;
	transition:1s;
}


#cleation2019 .lastbox img {
	width:100%;
}


#cleation2019 .endlogo {
	max-width:90%;
	margin:0 auto;
	text-align:center;
	padding:150px 0 200px;
	background:#FFF;
}

#cleation2019 .endlogo img {
	max-width:350px;
}

#cleation2018 .anime{
	stroke-dasharray:2400 2402;
	stroke-dashoffset:2401;
	animation:animeation_draw /*4000ms*/2000ms linear 0ms forwards;
}


@keyframes animeation_draw{
	100%{
		stroke-dashoffset:0;
		}
}
@keyframes animeation_fade{
	0%{
		stroke-opacity:1;
	}
	94.44444444444444%{
		stroke-opacity:1;
	}
	100%{
		stroke-opacity:0;
	}
}


/*-------------------------------------------------------------------
	fadeの設定
-------------------------------------------------------------------*/

.fadeInDown {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:2s;
	-ms-animation-duration:2s;
	animation-duration:2s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
	0% { opacity: 0; -webkit-transform: translateY(50px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 	0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fade2 {
	-webkit-animation-fill-mode:both;
	-ms-animation-fill-mode:both;
	animation-fill-mode:both;
	-webkit-animation-duration:1s;
	-ms-animation-duration:1s;
	animation-duration:1s;
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
	visibility: visible !important;
}

@-webkit-keyframes fade2 {
	0% { opacity: 0; }
 	100% { opacity: 1; }
}
@keyframes fade2 {
 	0% { opacity: 0; }
 	100% { opacity: 1; }
}



/* -------------------------------- ここからレスポンシブ設定 -------------------------------- */

/*===============================================
  画面の横幅が1024px以下に適用
===============================================*/
@media screen and (max-width: 1024px){
	
	
	
	
	/* クリエイション2019 */

	#cleation2019 {
		/*background:none;*/
	}

	#cleation2019 #mtitle {
		position:relative;
		margin:0 0 100px;
	}

	#cleation2019 #mtitle .title {
		position:absolute;
		bottom:5%;
		left:5%;
	}
	
	#cleation2019 #mtitle .title img {
		max-width:50%;
	}

	#cleation2019 .inner {
		width:94%;
		margin:0 auto 100px;
		/*
		background:url(../images/bg_icon.png) center top repeat-y;
		background-size:100% auto;
		*/
	}

	#cleation2019 .inner .bgicon {
		display:none;
	}

	#cleation2019 .inner .relabox {
		min-height:inherit;
		margin-bottom:100px;
		overflow:hidden;
		zoom:1;
	}

	#cleation2019 .inner .relabox02 {
		position:relative;
		padding:0;
		margin-bottom:100px;
		overflow:hidden;
		zoom:1;
	}

	#cleation2019 .inner .relabox03 {
		position:relative;
		padding-bottom:0;
		overflow:hidden;
		zoom:1;
	}

	#cleation2019 .inner .relabox04 {
		padding:0;
		height:auto;
		margin-bottom:100px;
		overflow:hidden;
		zoom:1;
	}


	#cleation2019 .inner .case01 {
		text-align:center;
		margin:0 0 100px;
	}

	#cleation2019 .inner .colorbox {
		z-index:99999 !important;
	}


	#cleation2019 .inner .colorbox li {
		display:none;
	}

	#cleation2019 .inner .colorbox li:first-child {
		display:block;
	}
	

	#cleation2019 .inner .case02 {
		position:static;
		margin:0 auto 100px;
		width:70%;
	}

	#cleation2019 .inner .case03 {
		position:static;
		width:70%;
		bottom:auto;
		left:auto;
		margin: 0 auto;
		z-index: 1;
		
	}

	#cleation2019 .inner .case04 {
		text-align:center;
		width:70%;
		margin:0 auto;
		position: static;
	}

	#cleation2019 .inner .case05 {
		position:static;
		width:70%;
		margin: 0 auto;
	}

	#cleation2019 .inner .case06 {
		text-align:center;
		width:70%;
		margin:0 auto 100px;
		z-index: 1;
		position: static;
	}

	#cleation2019 .inner .case07 {
		position:static;
		width:70%;
		bottom:auto;
		left:auto;
		margin: 0 auto;
	}

	#cleation2019 .inner .case08 {
		text-align:center;
		padding:100px 0 0;
		float: none;
		margin: 0 auto;
	}


	.lpfixed {
		position:fixed;
		top:50%;
		left:0;
		width:100%;
		text-align:center;
		transform:translateY(-50%);
	}
	
	#cleation2019 .endlogo {
		padding:50px 0;
	}
	
	#cleation2019 .endlogo img {
		max-width:60%;
	}

	.mb150 {
		margin-bottom:100px !important;
	}

}

/*===============================================
  画面の横幅が640px以下に適用
===============================================*/
@media screen and (max-width: 640px){
	
	#cleation2019 #mtitle .title {
		display: none;
	}
}