@charset "UTF-8";
/*初期設定*/
body{
	min-width: 320px;
	background:#fff;
	line-height:1.5;
	color:#000;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	height:100%;
	text-align:center;
	margin:0;
	padding:0;
	positiion: relative;
	}
.ie8 img{
	width:auto;
	}
a,a:link,a:visited,a:hover{
	max-width:100%;
	height:auto;
	color:#000;
	text-decoration:none;
	}
a{
	width:auto;
	}
.clearfix{
	zoom:1;
	}
.clearfix:after{
	content:"";
	display:block;
	clear:both;
	}
	
img{
	max-width:100%;
	}

.ico-svg-03 path {
	fill: #fff;
	stroke: transparent;
}

.ico-svg-03 path {
	-webkit-animation: stroke 2s ease-in-out forwards; 
	animation: stroke 2s ease-in-out forwards; 
	stroke: rgba(205, 92, 92, 0.5);
	stroke-dasharray: 1800;
	stroke-dashoffset: 0;
	stroke-width: 1;
}

@-webkit-keyframes stroke {
	0% {
		fill: #fff;
		stroke-dashoffset: 1800;
	}
	10% {
		fill: transparent;
	}
	80% {
		fill: transparent;
	}
	100% {
		fill: indianred;
		stroke-dashoffset: 0;
	}
}

@keyframes stroke {
	0% {
		fill: #fff;
		stroke-dashoffset: 1800;
	}
	10% {
		fill: transparent;
	}
	80% {
		fill: transparent;
	}
	100% {
		fill: indianred;
		stroke-dashoffset: 0;
	}
}

	
/*///////////////////////////////////////////base///////////////////////////////////////////*/
	
/*///////////////////////////////////////////media Queries///////////////////////////////////////////*/
@media only screen and (min-width:320px){

	.pc{
		display:none;
		}
	.sp{
		display:block;
		}
	div.all_wrapper{
		width:90%;
		margin:0 auto;
	}
	div.header_wrapper{
		margin:150px auto 50px;
	}
	
	div.header_wrapper svg{
		width:300px;
		margin:0 auto;
	}
	
	.zoomin.is-animated{
		animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	}
	
	@keyframes zoomIn {
		0% {
			transform: scale(0.8);
			opacity: 0;
		}
		100% {
			opacity: 1;
			transform: scale(1);
		}
	}
	
	.slidein{
		transform: translateX(180px);
		opacity: 0;
	}
	/* スライドイン */
	.slidein.is-animated {
		animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
		
	}
	
	@keyframes slideIn {
		0% {
			transform: translateX(180px);
			opacity: 0;
		}
		100% {
			transform: translateX(0);
		}
		40%,100% {
			opacity: 1;
		}
	}

	h1 img{
		width:80%;

	}
	p.header_txt{
		text-align:center;
		
		font-size:4.2vw;
	}
	
	p.header_txt　span{

	}
	
	.smooth {
		clip-path: inset(0 100% 0 0);
		display: inline-block;
		font-weight: bold;
		transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
		transition-property: clip-path;
		line-height: 1;
		height: 40px;
		margin-top: 15px;
		padding:0 5px;
		font-family: 'Yellowtail', cursive;
	}
	.smooth.is-animated {
		clip-path: inset(0);
	}
	
	
	
	/*///////////////////////////////////////////works///////////////////////////////////////////*/
	
	ul.works_list{
		list-style-type:none;
		width:90%;
		margin:0 auto;
		padding:0;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	h2.m_title{
		font-family: 'Oswald', sans-serif;
		font-size:3.5vw;
		display:inline-block;
	}
	ul.works_list li{
		width:45%;
		margin:0 0 4%;
		transform: translateY(30px);
		opacity: 0;
	}
	
	.fadeup.is-animated {
		animation: fadeup 1s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
	}
	
	@keyframes fadeup {
		0% {
			transform: translateY(30px);
			opacity: 0;
		}
		40% {
			opacity: 1;
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	
	ul.works_list li a{
		display:block;
		width:100%;
		height:auto;
		border-radius:30px;
		position:relative;
		overflow:hidden;
		z-index:1;
	}
	ul.works_list li a img{
		vertical-align:bottom;
	}
	
	.item {
		border-radius:30px;
	}
	.w_item {
		border:1px solid #ccc;
		box-sizing:border-box;
	}
	ul.works_list li h3{
		font-family: 'Oswald', sans-serif;
		font-size:3.0vw;
		display:inline-block!important;
	}

	
	/*///////////////////////////////////////////footer///////////////////////////////////////////*/
	
	small{
		display:block;
		margin:100px auto 50px;
		font-family: 'Yellowtail', cursive;
	}

}
/*///////////////////////////////////////////media Queries///////////////////////////////////////////*/
@media only screen and (min-width:768px){
	.pc{
	display:block;
		}
	.sp{
		display:none;
		}
	div.all_wrapper{
		width:90%;
		margin:0 auto;
	}
	div.header_wrapper{
		margin:100px auto;
	}
	div.header_wrapper svg{
		width:550px;
		margin:100px auto 50px;
		}

	div.header_txt{
		padding:0 40px;
		margin:60px 0 0;
		text-align:center;
		font-family: 'Yellowtail', cursive;
		font-size:2.4vw;
		}
	
/*///////////////////////////////////////////works///////////////////////////////////////////*/
	
	ul.works_list{
		list-style-type:none;
		width:60%;
		margin:0 auto;
		padding:0;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.m_title{
		font-family: 'Oswald', sans-serif;
		font-size:1.2vw!important;
	}
	ul.works_list li{
		width:30%;
		margin:0 0 4%;
		opacity:100%;
		
	}
	ul.works_list li a{
		display:block;
		width:100%;
		height:auto;
		border-radius:30px;
		position:relative;
		overflow:hidden;
		z-index:1;
		}
	img.item{
		width:100%;
		height:auto;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition:all .2s ease;
		transition:all .2s ease;
		vertical-align:top;
		opacity:100%;
		}
	ul.works_list li a:hover img.item{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
		}
	.item {
		border-radius:30px;
		}
	.w_item {
		border:1px solid #ccc;
		box-sizing:border-box;
	}
	ul.works_list li h3{
	font-family: 'Oswald', sans-serif;
	font-size:1.0vw;
	}

/*///////////////////////////////////////////mix///////////////////////////////////////////*/
	
	ul.mix_list{
		list-style-type:none;
		width:60%;
		margin:0 auto;
		padding:0;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	
	.m_title{
		font-family: 'Oswald', sans-serif;
		font-size:1.0vw;
	}
	ul.mix_list li{
		width:23%;
		margin:0 0 2.5%;
		
	}
	ul.mix_list li a{
		display:block;
		width:100%;
		height:auto;
		border-radius:20px;
		position:relative;
		overflow:hidden;
		z-index:1;
	}
	img.m_item{
		width:100%;
		height:auto;
		-webkit-transform: scale(1);
		transform: scale(1);
		-webkit-transition:all .2s ease;
		transition:all .2s ease;
		vertical-align:top;
	}
	ul.mix_list li a:hover img.m_item{
		-webkit-transform:scale(1.1);
		transform:scale(1.1);
	}
	/*.item {
		border-radius:20px;
	}*/
	.w_item {
		border:1px solid #ccc;
		box-sizing:border-box;
	}
	
/*///////////////////////////////////////////footer///////////////////////////////////////////*/
	
	small{
		display:block;
		font-size:1.2vw;
		margin:100px auto 50px;
		font-family: 'Yellowtail', cursive;
	}
}

/*///////////////////////////////////////////media Queries///////////////////////////////////////////*/
@media only screen and (min-width:1400px){

	div.all_wrapper,ul.works_list,ul.mix_list{
	width:1200px;
		margin:0 auto;
	}
}