@charset "UTF-8";
/* CSS Document */


html,body {
	margin: 0;
	background: #000;
   font-size: 13px;
	color: #FFF;
	font-family:Arial, Helvetica, "sans-serif";
	font-weight: 300;
}

*{
	box-sizing: border-box;
}



/* SP */
@media screen and (max-width: 767px) {
	
	header{
		position: absolute;
		top:0;
		left: 50%;
		z-index: 9999;
		transform: translateX(-50%);
	}	
	header img{
		width: 80px;
	}	
	
	.hero_image{
		position: relative;
		width: 100%;
		overflow: hidden;
	}
	
	.hero_image .mask_bottom {
		position: absolute;
		bottom: 0;
		z-index: 20;
	}
	
	.kimetsu_no_yaiba_logo{
		position: absolute;
		bottom: 14%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 15;
		height: auto;
		width: 60%;
		opacity: 0;
		animation-name: kimetsu_no_yaiba_logo;
		animation-duration: 1.2s;
		animation-delay: 2s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	

	@keyframes kimetsu_no_yaiba_logo { 
	  0% {
			opacity: 0;
			margin-top:50px;
		} 
	  100% {
			opacity: 1;
			margin-top:0;
		} 
	}
	
	
	
	
	.kimetsu_no_yaiba_character{
		height: auto;
		width: 120%;
		position: absolute;
		top: 42%;
		left: calc(50% + 5%);
		transform: translate(-50%,-50%);
		z-index: 13;
		opacity: 0;
		animation-name: kimetsu_no_yaiba_character;
		animation-duration: 1.2s;
		animation-delay:  1s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes kimetsu_no_yaiba_character { 
	  0% {
			opacity: 0;
			margin-top:50px;
		} 
	  100% {
			opacity: 1;
			margin-top:0;
		} 
	}

	
	.hero_bg{
		width: 100%;
		height: auto;
		z-index: 10;
		opacity: 0;
		animation-name: hero_bg;
		animation-duration: 1.2s;
		animation-delay: 2.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes hero_bg { 
	  0% {
			opacity: 0;
		} 
	  100% {
			opacity: 1;
		} 
	}
	
	
	.contents_wrap{
		width: 100%;
		margin: 0;
	}
	
	.contents_wrap > div{
		margin-bottom: 100px;
	}
	
    .contents_wrap > div:last-child{
		margin-bottom: 0;
	}
	
    .description h1{
		font-size:2.4rem;
		text-align: center;
		color:#FFF;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		letter-spacing: 2px;
		text-shadow: 0 0 10px #b51212, 0 0 10px #b51212;
		margin: 40px 0;
		padding:0 8%;
        opacity: 0;
	}
	
	
	h1.effect {
		opacity: 0;
		animation-name: description_h1_effect;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_h1_effect { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	
	.description h1 span.title_jp{
		display: block;
		font-size: 1.6rem;
	}
	.description h1 span.title_jp:before{
		display: inline-block;
		content: "[";
		margin-right:0.5rem;
	}	
	.description h1 span.title_jp:after{
		display: inline-block;
		content: "]";
		margin-left:0.5rem;
	}		
	
	.description h1 span.cross{
		display: block;
	}	
	
	.description p{
		width: 100%;
		margin: 0 auto 100px;
        opacity: 0;
	}
	
	
	p{
		line-height: 2rem;
		display: block;
		padding:0 8%;
		margin: 0 auto;
		font-size: 1.2rem;
		letter-spacing: 0;
		text-align: left;
	}	
	
	 p.effect {
		opacity: 0;
		animation-name: description_p_effect;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_p_effect { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	
	
	.description h2{
		font-size: 1.5rem;
		text-align: center;
		color:#FFF;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		letter-spacing: 0;
		text-shadow: 0 0 10px #b51212, 0 0 10px #b51212;
		margin: 40px 0;
		line-height: 3rem;
        opacity: 0;
	}
	.description h2 span{
		display: block;
		font-size: 1.7rem;
	}	
	
	h2.effect {
		opacity: 0;
		animation-name: description_h2_effect;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_h2_effect { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	
	
	
	.products{
		text-align: center;
	}
	.products > div:first-child,
	.products > div:nth-child(2){
		margin-bottom: 50px;
	}
	.products > div {
		margin-bottom:200px;
	}
	
	.products > div:last-child {
		margin-bottom:0;
	}
	
	.product_title_wrap{
		margin-bottom: 120px;
        opacity: 0;
	}
	
	.product_title_wrap.effect {
		opacity: 0;
		animation-name: description_h1_effect;
		animation-duration: 2.4s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_h1_effect { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	
	.product_title {
		width: 40%;
		height: auto;
	}
	
	.product_title_wrap img{
		-webkit-animation-name: blink_title;
		-ms-animation-name: blink_title;
		animation-name: blink_title;
		-webkit-animation-duration: 1s;
		-ms-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		-ms-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-direction: alternate;
		-ms-animation-direction: alternate;
		animation-direction: alternate;
	}	
	@keyframes blink_title {
		0% {opacity: 0.9; }
		10% {opacity: 1.0; }
		20% {opacity: 0.7; }
		30% {opacity: 0.8; }
		40% {opacity: 0.6; }
		50% {opacity: 0.9; }
		60% {opacity: 1.0; }
		70% {opacity: 0.7; }
		80% {opacity: 0.9; }
		90% {opacity: 1.0; }
	  }
	
	.color_list{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 20px;
		margin: 0 auto 40px;
		width: 100%;
		padding: 0 8%;
	}
	
	.color_list > div:first-child{
		-ms-grid-column: 1/3;
		grid-column: 1/3;
		-ms-grid-row: 1;
		grid-row: 1;
	}
	.color_list > div:nth-child(2){
		-ms-grid-column: 3/5;
		grid-column: 3/5;
		-ms-grid-row: 1;
		grid-row: 1;
	}
	.color_list > div:nth-child(3){
		-ms-grid-column: 5/7;
		grid-column: 5/7;
		-ms-grid-row: 1;
		grid-row: 1;
	}
	.color_list > div:nth-child(4){
		-ms-grid-column: 2/4;
		grid-column: 2/4;
		-ms-grid-row: 2;
		grid-row: 2;
	}
	.color_list > div:nth-child(5){
		-ms-grid-column: 4/6;
		grid-column: 4/6;
		-ms-grid-row: 2;
		grid-row: 2;
	}
	
	
	
	
	.color_list img{
		width: 100%;
		height: auto;
        opacity: 0;
	}
	
	.color_list_tanjiro .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_nezuko .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_zenitsu .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_inosuke .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_kyojiro .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes color_list{ 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	.product_list p.effect {
		opacity: 0;
		animation-name: product_list_p;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes product_list_p { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	.products p{
		width: 100%;
		margin: 0 auto 100px;
		padding: 0 8%;
        opacity: 0;
	}

	
	.gwp{
		position: relative;
		background: #818181;
		padding: 80px 0 40px;
        opacity: 0;
	}
	
	.gwp.effect {
		opacity: 0;
		animation-name: gwp;
		animation-duration: 0.7s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes gwp { 
	  0% {     
		  opacity: 0;
		  transform: translateY(100px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	
	
	.gwp_bg{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image:url("../images/bg_furoshiki.png");
		background-size: 50px;
		opacity: 0.1;
		z-index: 10;
	}	
	.gwp_bg_old{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image:url("../images/clear_bg.png");
		background-size: cover;
		z-index: 11;
		mix-blend-mode: multiply;
	}
	
	.gwp .mask_top {
		position: absolute;
		top: -2px;
		left: 0;
		z-index: 20;
		width: 100%;
		height: auto;
	}
	.gwp .mask_bottom {
		position: absolute;
		bottom: -2px;
		left: 0;
		z-index: 20;
		width: 100%;
		height: auto;
	}
	
	.gwp_wrap {
		position: relative;
		display: grid;
		grid-template-columns: 100%;
		z-index: 20;
	}
	
	.gwp_img{
		padding: 8% 8% 0;
		order: 2;
	}
	.gwp_img img{
		width: 90%;
		height: auto;
        opacity: 0;
	}
	

	.gwp_img img.effect {
		opacity: 0;
		animation-name: gwp_img;
		animation-duration: 1s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

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

	
	.gwp_info{
		padding: 0 8%;
		order: 1;
	}
	.gwp_info_box{
	}
	
	.gwp_info img.furoshiki_title{
		width: 90%;
		height: auto;
		margin-bottom: 10px;
	}
	.gwp_info img.furoshiki_mark{
		width: 60%;
		height: auto;
	}
	
	.gwp_info h4{
		font-size: 1.3rem;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		margin: 0;
		letter-spacing: 2px;
		text-shadow: 0 0 10px #000;
	}
	.gwp_info p{
		width: 100%;
		margin: 20px 0;
		text-shadow: 0 0 10px #000;
		opacity: 1 !important;
		padding: 0;
	}
	
	.character_box{
		display: grid;
		grid-template-columns: 100%;
	}
	
	.character_img_box{
		position: relative;
        opacity: 0;
	}
	
	
	.character_img_box.effect {
		opacity: 0;
		animation-name: character_img_box;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes character_img_box { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	
	
	
	.character_bg_old{
		position: absolute;
		top:0;
		left: 0;
		mix-blend-mode: multiply;
		z-index: 2;
		vertical-align: bottom;
		width: 100%;
		height: 100%;
	}
	.character_pattern{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
	
	
	.character_gradient-sp{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		background: -moz-linear-gradient(90deg, #000 0%, #FFF 30%);
		background: -webkit-linear-gradient(90deg, #000 0%, #FFF 30%);
		background: linear-gradient(0deg, #000 0%, #FFF 30%);
		mix-blend-mode: multiply;
	}

	.character_gradient{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		mix-blend-mode: multiply;
		opacity: 0.8;
	}
	
	.tanjiro .character_gradient,
	.zenitsu .character_gradient,
	.kyojuro .character_gradient{
		background: -moz-linear-gradient(-30deg, #000 30%, #FFF);
		background: -webkit-linear-gradient(-30deg, #000 30%, #FFF) ;
		background: linear-gradient(120deg, #000 30%, #FFF);
	}
	
	.nezuko .character_gradient,
	.inosuke .character_gradient{
		background: -moz-linear-gradient(-120deg, #000 30%, #FFF);
		background: -webkit-linear-gradient(-120deg, #000 30%, #FFF) ;
		background: linear-gradient(-120deg, #000 30%, #FFF);
	}
	
	
	.watch_img_box {
		width: 100%;
        opacity: 0;
	}
	
	.watch_img_box.effect {
		opacity: 0;
		animation-name: watch_img_box;
		animation-duration: 1s;
		animation-delay: 1.0s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes watch_img_box { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}
	
	
	
	
	
	.product_description {
		padding: 10px 0;
	}
	
	.product_description h3{
		font-size: 1.2rem;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		margin: 0;
		letter-spacing: 0;
		margin-bottom: 10px;
		line-height: 2.4rem;
        opacity: 0;
	}
	
	
	.product_description h3.effect {
		opacity: 0;
		animation-name: product_description_h3;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes product_description_h3 { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	
	
	.product_description h3 span{
		display: block;
		font-size: 3rem;
		letter-spacing: 2px;
		line-height: 3.8rem;
	}
	.product_description p {
		margin-bottom: 10px;
        opacity: 0;
	}
    
    .product_button{
        width: 100%;
        overflow: hidden;
    }

	.product_button img{
		width:  100%;
		height: auto;
	}
    .product_button a{
        opacity: 0;
        display: inline-block;
    }	
	.product_button a.effect {
		opacity: 0;
		animation-name: product_button;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes product_button { 
	  0% {     
		  opacity: 0;
		  transform: translateX(30px);
		} 
	  100% {
			opacity: 1;
			  transform: translateX(0px);
		}
	}
	

	.product_button img{
		-webkit-animation-name: product_button_blink;
		-ms-animation-name: product_button_blink;
		animation-name: product_button_blink;
		-webkit-animation-duration: 1s;
		-ms-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-out;
		-ms-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-animation-direction: alternate;
		-ms-animation-direction: alternate;
		animation-direction: alternate;
		-webkit-animation-delay: 0.5s;
		-ms-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}	
	
	@keyframes product_button_blink {
		0% {opacity: 1.0; }
		50% {opacity: 0.8; }
	  }

	

	
/* カラー・レイアウト　*/
	.tanjiro .character_img_box .character_name,
	.zenitsu .character_img_box .character_name,
	.kyojuro .character_img_box .character_name{
		position: absolute;
		top: 15%;
		right: 3%;
		z-index: 5;
		width: 22%;
		height: auto;
        opacity: 0;
	}
	.tanjiro .character_name.effect,
	.zenitsu .character_name.effect,
	.kyojuro .character_name.effect{
		opacity: 0;
		animation-name: character_name;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	.nezuko .character_img_box .character_name,
	.inosuke .character_img_box .character_name{
		position: absolute;
		top: 15%;
		left: 3%;
		z-index: 5;
		width: 22%;
		height: auto;
        opacity: 0;
	}
	.nezuko .character_name.effect,
	.inosuke .character_name.effect{
		opacity: 0;
		animation-name: character_name;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes character_name { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}

	
	.character_img{
		vertical-align: bottom;
		position: relative;
		z-index: 4;
		width: 80%;
		height: auto;
        opacity: 0;
	}
	.character_img.effect {
		opacity: 0;
		animation-name: character_img;
		animation-duration: 1s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	

	@keyframes character_img { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}

	
	
	.tanjiro .character_img_box .number,
	.zenitsu .character_img_box .number,
	.kyojuro .character_img_box .number{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 45%;
		height: auto;
        opacity: 0;
	}
	.tanjiro .number.effect,
	.zenitsu .number.effect,
	.kyojuro .number.effect{
		opacity: 0;
		animation-name: number;
		animation-duration: 1s;
		animation-delay: 0.9s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	.nezuko .character_img_box .number,
	.inosuke .character_img_box .number{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 45%;
		height: auto;
        opacity: 0;
	}
	.nezuko .number.effect,
	.inosuke .number.effect{
		opacity: 0;
		animation-name: number;
		animation-duration: 1s;
		animation-delay: 0.9s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes number { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	

	/* 竈門炭治郎　*/
	.tanjiro .character_img_box{
		background-color: #026046;
		order: 1;
	}
	.tanjiro .character_pattern{
		background-image: url("../images/bg_tanjiro.png");
		background-size: 50px;
	}
	.tanjiro .watch_img_box {
		order: 2;
	}
	.tanjiro .product_description h3 span{
		text-shadow: 0 0 15px #025a41, 0 0 15px #025a41, 0 0 15px #025a41, 0 0 15px #025a41;
	}

	/* 竈門 禰豆子　*/
	.nezuko .character_img_box{	
		background-color: #f7989e;
	}
	
	.nezuko .character_pattern{
		background-image: url("../images/bg_nezuko.png");
		background-size: 50px;
	}
	
	.nezuko .watch_img_box {
		order: 2;
	}
	.nezuko .product_description h3 span{
		text-shadow: 0 0 15px #f7989e, 0 0 15px #f7989e, 0 0 15px #f7989e, 0 0 15px #f7989e;
	}

	/* 我妻 善逸　*/
	.zenitsu .character_img_box{	
		background-color: #edbb0f;
		order: 1;
	}
	.zenitsu .character_pattern{
		background-image: url("../images/bg_zenitsu.png");
		background-size: 60px;
	}
	
	.zenitsu .watch_img_box {
		order: 2;
	}
	.zenitsu .product_description h3 span{
		text-shadow: 0 0 15px #edbb0f, 0 0 15px #edbb0f, 0 0 15px #edbb0f, 0 0 15px #edbb0f;
	}
	
	
	/* 嘴平伊之助　*/
	.inosuke .character_img_box{	
		background-color: #4d79a0;
		order: 1;
	}
	.inosuke .character_pattern{
		background-image: url("../images/bg_inosuke.png");
		background-size: 50px;
	}
	
	.inosuke .watch_img_box {
		order: 2;
	}
	.inosuke .product_description h3 span{
		text-shadow: 0 0 15px #4d79a0, 0 0 15px #4d79a0, 0 0 15px #4d79a0, 0 0 15px #4d79a0;
	}
	
	/* 煉獄杏寿郎　*/
	.kyojuro .character_img_box{	
		background-color: #c52736;
		order: 1;
	}
	.kyojuro .character_pattern{
		background-image: url("../images/bg_kyojuro.png");
		background-size: 160px;
	}
	
	.kyojuro .watch_img_box {
		order: 2;
	}
	.kyojuro .product_description h3 span{
		text-shadow: 0 0 15px #c52736, 0 0 15px #c52736, 0 0 15px #c52736, 0 0 15px #c52736;
	}
	
	
	
	
	
	
	
	footer{
		padding: 0;
		text-align: center;
        height: 100vh;
        position: relative;
	}	
	footer img{
		width: 60%;
		height: auto;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50% , -50%);
	}	
	
	footer p{
        position: absolute;
        bottom: 60px;
        width: 100%;
		text-align: center;
		font-size: 11px;
	}	
	
	
	.button{
		position: fixed;
		bottom: 5%;
		right: 5%;
	}
	
	.sns_share{
		position: fixed;
		z-index: 99;
		bottom: 1%;
		right: 1%;
		display: flex;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		opacity: 0;
	}
	
	.sns_share a{
		display: block;
		width: 40px;
		margin: 0;
	}	
	.sns_share img{
		width: 100%;
		height: auto;
	}
	
	.show{
		opacity: 1;
	}

}























/* PC */
@media screen and (min-width: 768px) {
	
	header{
		position: absolute;
		top:0;
		left: 0;
		text-align: left;
		z-index: 9999;
	}	
	header img{
		width: 120px;
	}	
	
	.hero_image{
		position: relative;
		width: 100%;
	}
	
	.hero_image .mask_bottom {
		position: absolute;
		bottom: 0;
		z-index: 20;
	}
	
	.kimetsu_no_yaiba_logo{
		position: absolute;
		bottom: 13%;
		left: 50%;
		transform: translateX(-50%);
		z-index: 15;
		height: 16%;
		width: auto;
		opacity: 0;
		animation-name: kimetsu_no_yaiba_logo;
		animation-duration: 1.2s;
		animation-delay: 1s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	

	@keyframes kimetsu_no_yaiba_logo { 
	  0% {
			opacity: 0;
			margin-top:50px;
		} 
	  100% {
			opacity: 1;
			margin-top:0;
		} 
	}
	
	
	
	
	.kimetsu_no_yaiba_character{
		height: 70%;
		width: auto;
		position: absolute;
		top:38%;
		left:calc(50% + 2%);
		transform: translate(-50%,-50%);
		z-index: 13;
		opacity: 0;
		animation-name: kimetsu_no_yaiba_character;
		animation-duration: 1.2s;
		animation-delay: 0;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes kimetsu_no_yaiba_character { 
	  0% {
			opacity: 0;
			margin-top:50px;
		} 
	  100% {
			opacity: 1;
			margin-top:0;
		} 
	}

	
	.hero_bg{
		width: 100%;
		height: auto;
		z-index: 10;
		opacity: 0;
		animation-name: hero_bg;
		animation-duration: 1.2s;
		animation-delay: 1.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
		
	}
	
	@keyframes hero_bg { 
	  0% {
			opacity: 0;
		} 
	  100% {
			opacity: 1;
		} 
	}
	
	
	.contents_wrap{
		width: 90%;
		max-width: 1500px;
		min-width: 1000px;
		margin: 0 auto;
	}
	
	.contents_wrap > div{
		margin-bottom: 260px;
	}
	
	.description h1{
		font-size: 60px;
		text-align: center;
		color:#FFF;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		letter-spacing: 2px;
		text-shadow: 0 0 10px #b51212, 0 0 10px #b51212;
		margin: 40px 0;
		opacity: 0;
	}
	
	
	h1.effect {
		opacity: 0;
		animation-name: description_h1_effect;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_h1_effect { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.description h1 span.title_jp{
		display: inline-block;
	}
	.description h1 span.title_jp:before{
		display: inline-block;
		content: ":";
		margin: 0 1rem;
	}	
	.description h1 span.cross{
		display: block;
	}	
	.description p{
		width: 1000px;
		margin: 0 auto 100px;
		opacity: 0;
	}
	
	
	p{
		line-height: 2.4rem;
		display: block;
		margin: 0 auto;
		font-size: 16px;
		letter-spacing: 3px;
		text-align: left;
	}	
	
	 p.effect {
		opacity: 0;
		animation-name: description_p_effect;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_p_effect { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	
	
	.description h2{
		font-size: 36px;
		text-align: center;
		color:#FFF;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		letter-spacing: 2px;
		text-shadow: 0 0 10px #b51212, 0 0 10px #b51212;
		margin: 40px 0;
		opacity: 0;
	}
	.description h2 span{
		display: block;
		font-size: 48px;
	}	
	
	h2.effect {
		opacity: 0;
		animation-name: description_h2_effect;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_h2_effect { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			transform: translateY(0);
		}
	}

	
	
	
	.products{
		text-align: center;
	}
	.products > div:first-child {
		margin-bottom: 150px;
	}
	.products > div {
		margin-bottom: 300px;
	}
	
	.product_title_wrap{
		margin-bottom: 120px;
		opacity: 0;
	}
	
	.product_title_wrap.effect {
		opacity: 0;
		animation-name: description_h1_effect;
		animation-duration: 2.4s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes description_h1_effect { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	
	.product_title {
		width: 240px;
		height: auto;
	}

	.product_title_wrap img{
		-webkit-animation-name: blink_title;
		-ms-animation-name: blink_title;
		animation-name: blink_title;
		-webkit-animation-duration: 1s;
		-ms-animation-duration: 0.5s;
		animation-duration: 0.5s;
		-webkit-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-in-out;
		-ms-animation-timing-function: ease-in-out;
		animation-timing-function: ease-in-out;
		-webkit-animation-direction: alternate;
		-ms-animation-direction: alternate;
		animation-direction: alternate;
	}	
	
	@keyframes blink_title {
		0% {opacity: 1.0; }
		10% {opacity: 1.0; }
		20% {opacity: 0.8; }
		30% {opacity: 1.0; }
		40% {opacity: 0.7; }
		50% {opacity: 0.9; }
		60% {opacity: 1.0; }
		70% {opacity: 0.8; }
		80% {opacity: 0.9; }
		90% {opacity: 1.0; }
	  }
	
	.color_list{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
		grid-gap: 50px;
		margin: 0 auto 60px;
		max-width: 1200px;
		min-width: 1000px;
	}
	
	.color_list img{
		width: 100%;
		height: auto;
	}
	
	.color_list_tanjiro .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_nezuko .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_zenitsu .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_inosuke .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 0.9s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	.color_list_kyojiro .effect {
		opacity: 0;
		animation-name: color_list;
		animation-duration: 1s;
		animation-delay: 1.1s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes color_list{ 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	.product_list p.effect {
		opacity: 0;
		animation-name: product_list_p;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes product_list_p { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	.products p{
		width: 1000px;
		margin: 0 auto 100px;
	}

	
	.gwp{
		position: relative;
		background: #818181;
		padding: 50px 0;
	}
	
	.gwp.effect {
		opacity: 0;
		animation-name: gwp;
		animation-duration: 0.7s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes gwp { 
	  0% {     
		  opacity: 0;
		  transform: translateY(100px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	
	
	.gwp_bg{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image:url("../images/bg_furoshiki.png");
		background-size: 50px;
		opacity: 0.1;
		z-index: 10;
	}	
	.gwp_bg_old{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image:url("../images/clear_bg.png");
		background-size: cover;
		z-index: 11;
		mix-blend-mode: multiply;
	}
	
	.gwp .mask_top {
		position: absolute;
		top: -2px;
		left: 0;
		z-index: 20;
		width: 100%;
		height: auto;
	}
	.gwp .mask_bottom {
		position: absolute;
		bottom: -2px;
		left: 0;
		z-index: 20;
		width: 100%;
		height: auto;
	}
	
	.gwp_wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		z-index: 20;
	    position: relative;
	}
	
	.gwp_img{
		padding: 10% 0 10% 10%;
	}
	.gwp_img img{
		width: 100%;
		height: auto;
	}
	
	
	
	.gwp_img img.effect {
		opacity: 0;
		animation-name: gwp_img;
		animation-duration: 1s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}

	@keyframes gwp_img { 
	  0% {     
		  opacity: 0;
		  transform: translateY(-100px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}

	
	.gwp_info{
		padding: 10%;
		position: relative;
	}
	.gwp_info_box{
		position: absolute;
		width: 80%;
		top:50%;
		transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		
	}
	
	.gwp_info img.furoshiki_title{
		width: 80%;
		height: auto;
		margin-bottom: 20px;
	}
	.gwp_info img.furoshiki_mark{
		width: 70%;
		height: auto;
	}
	
	.gwp_info h4{
		font-size: 30px;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		margin: 0;
		letter-spacing: 2px;
		text-shadow: 0 0 10px #000;
	}
	.gwp_info p{
		width: 100%;
		margin: 40px 0;
		font-weight: 400;
		text-shadow: 0 0 10px #000;
	}
	
	.character_box{
		display: grid;
		grid-template-columns: 50% 50%;
	}
	
	.character_img_box{
		position: relative;
	}
	
	
	.character_img_box.effect {
		opacity: 0;
		animation-name: character_img_box;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes character_img_box { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	
	
	
	.character_bg_old{
		position: absolute;
		top:0;
		left: 0;
		mix-blend-mode: multiply;
		z-index: 2;
		vertical-align: bottom;
		width: 100%;
		height: auto;
	}
	.character_pattern{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}
	
	
	
	.character_gradient{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		mix-blend-mode: multiply;
		opacity: 0.8;
	}
	.character_gradient-sp{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 5;
		background: -moz-linear-gradient(90deg, #000 5%, #FFF 40%);
		background: -webkit-linear-gradient(90deg, #000 5%, #FFF 40%);
		background: linear-gradient(0deg, #000 5%, #FFF 40%);
		mix-blend-mode: multiply;
	}
	.tanjiro .character_gradient,
	.zenitsu .character_gradient,
	.kyojuro .character_gradient{
		background: -moz-linear-gradient(-30deg, #000 30%, #FFF);
		background: -webkit-linear-gradient(-30deg, #000 30%, #FFF) ;
		background: linear-gradient(120deg, #000 30%, #FFF);
	}
	
	.nezuko .character_gradient,
	.inosuke .character_gradient{
		background: -moz-linear-gradient(-120deg, #000 30%, #FFF);
		background: -webkit-linear-gradient(-120deg, #000 30%, #FFF) ;
		background: linear-gradient(-120deg, #000 30%, #FFF);
	}
	
	
	.watch_img_box {
		width: 100%;
	}
	
	.watch_img_box.effect {
		opacity: 0;
		animation-name: watch_img_box;
		animation-duration: 1s;
		animation-delay: 1.0s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes watch_img_box { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
		  transform: translateY(0px);
		}
	}
	
	
	
	
	
	.product_description {
		padding: 70px 0;
	}
	
	.product_description h3{
		font-size: 20px;
		font-family: 'EB Garamond', serif;
		font-weight: normal;
		margin: 0;
		letter-spacing: 4px;
		margin-bottom: 30px;
		line-height: 64px;
	}
	
	
	.product_description h3.effect {
		opacity: 0;
		animation-name: product_description_h3;
		animation-duration: 1s;
		animation-delay: 0.3s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes product_description_h3 { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	
	
	.product_description h3 span{
		display: block;
		font-size: 60px;
		letter-spacing: 7px;
	}
	.product_description p {
		margin-bottom: 10px;
	}
	.product_button img{
		width:  360px;
		height: auto;
	}

    
    .product_button a{
        display: inline-block;
    }
	.product_button a.effect {
		opacity: 0;
		animation-name: product_button;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes product_button { 
	  0% {     
		  opacity: 0;
		  transform: translateY(50px);
		} 
	  100% {
			opacity: 1;
			  transform: translateY(0px);
		}
	}
	
	.product_button img{
		-webkit-animation-name: product_button_blink;
		-ms-animation-name: product_button_blink;
		animation-name: product_button_blink;
		-webkit-animation-duration: 1s;
		-ms-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-iteration-count: infinite;
		-ms-animation-iteration-count: infinite;
		animation-iteration-count: infinite;
		-webkit-animation-timing-function: ease-out;
		-ms-animation-timing-function: ease-out;
		animation-timing-function: ease-out;
		-webkit-animation-direction: alternate;
		-ms-animation-direction: alternate;
		animation-direction: alternate;
	}	
	
	@keyframes product_button_blink {
		0% {opacity: 0.5; }
		50% {opacity: 1.0; }
	  }

	
/* カラー・レイアウト　*/
	.tanjiro .character_img_box .character_name,
	.zenitsu .character_img_box .character_name,
	.kyojuro .character_img_box .character_name{
		position: absolute;
		top: 3%;
		right: 3%;
		z-index: 5;
		width: 22%;
		height: auto;
	}
	.tanjiro .character_name.effect,
	.zenitsu .character_name.effect,
	.kyojuro .character_name.effect{
		opacity: 0;
		animation-name: character_name;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	.nezuko .character_img_box .character_name,
	.inosuke .character_img_box .character_name{
		position: absolute;
		top: 3%;
		left: 3%;
		z-index: 5;
		width: 22%;
		height: auto;
	}
	.nezuko .character_name.effect,
	.inosuke .character_name.effect{
		opacity: 0;
		animation-name: character_name;
		animation-duration: 1s;
		animation-delay: 0.5s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes character_name { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}

	
	.character_img{
		vertical-align: bottom;
		position: relative;
		z-index: 4;
		width: 100%;
		height: auto;
	}
	.character_img.effect {
		opacity: 0;
		animation-name: character_img;
		animation-duration: 1s;
		animation-delay: 0.7s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	

	@keyframes character_img { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}

	
	
	.tanjiro .character_img_box .number,
	.zenitsu .character_img_box .number,
	.kyojuro .character_img_box .number{
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 33%;
		height: auto;
	}
	.tanjiro .number.effect,
	.zenitsu .number.effect,
	.kyojuro .number.effect{
		opacity: 0;
		animation-name: number;
		animation-duration: 1s;
		animation-delay: 0.9s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	.nezuko .character_img_box .number,
	.inosuke .character_img_box .number{
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		width: 33%;
		height: auto;
	}
	.nezuko .number.effect,
	.inosuke .number.effect{
		opacity: 0;
		animation-name: number;
		animation-duration: 1s;
		animation-delay: 0.9s;
		animation-timing-function: ease;
		animation-fill-mode: forwards;
	}
	
	@keyframes number { 
	  0% {     
		  opacity: 0;
		} 
	  100% {
			opacity: 1;
		}
	}
	

	/* 竈門炭治郎　*/
	.tanjiro .character_img_box{
		background-color: #026046;
		order: 2;
	}
	.tanjiro .character_pattern{
		background-image: url("../images/bg_tanjiro.png");
		background-size: 80px;
	}
	.tanjiro .watch_img_box {
		order: 1;
	}
	.tanjiro .product_description h3 span{
		text-shadow: 0 0 15px #025a41, 0 0 15px #025a41, 0 0 15px #025a41, 0 0 15px #025a41;
	}

	/* 竈門 禰豆子　*/
	.nezuko .character_img_box{	
		background-color: #f7989e;
	}
	
	.nezuko .character_pattern{
		background-image: url("../images/bg_nezuko.png");
		background-size: 100px;
	}
	
	.nezuko .watch_img_box {
		order: 2;
	}
	.nezuko .product_description h3 span{
		text-shadow: 0 0 15px #f7989e, 0 0 15px #f7989e, 0 0 15px #f7989e, 0 0 15px #f7989e;
	}

	/* 我妻 善逸　*/
	.zenitsu .character_img_box{	
		background-color: #edbb0f;
		order: 2;
	}
	.zenitsu .character_pattern{
		background-image: url("../images/bg_zenitsu.png");
		background-size: 100px;
	}
	
	.zenitsu .watch_img_box {
		order: 1;
	}
	.zenitsu .product_description h3 span{
		text-shadow: 0 0 15px #edbb0f, 0 0 15px #edbb0f, 0 0 15px #edbb0f, 0 0 15px #edbb0f;
	}
	
	
	/* 嘴平伊之助　*/
	.inosuke .character_img_box{	
		background-color: #4d79a0;
		order: 1;
	}
	.inosuke .character_pattern{
		background-image: url("../images/bg_inosuke.png");
		background-size: 100px;
	}
	
	.inosuke .watch_img_box {
		order: 2;
	}
	.inosuke .product_description h3 span{
		text-shadow: 0 0 15px #4d79a0, 0 0 15px #4d79a0, 0 0 15px #4d79a0, 0 0 15px #4d79a0;
	}
	
	/* 煉獄杏寿郎　*/
	.kyojuro .character_img_box{	
		background-color: #c52736;
		order: 2;
	}
	.kyojuro .character_pattern{
		background-image: url("../images/bg_kyojuro.png");
		background-size: 220px;
	}
	
	.kyojuro .watch_img_box {
		order: 1;
	}
	.kyojuro .product_description h3 span{
		text-shadow: 0 0 15px #c52736, 0 0 15px #c52736, 0 0 15px #c52736, 0 0 15px #c52736;
	}
	
	
	
	
	
	
	
	footer{
		padding: 60px 0;
		text-align: center;
	}	
	footer img{
		width: 320px;
		height: auto;
		margin-bottom: 100px;
	}	
	
	footer p{
		text-align: center;
		font-size: 11px;
	}	
	
	
	.button{
		position: fixed;
		bottom: 5%;
		right: 5%;
	}

	.sns_share{
		position: fixed;
		z-index: 99;
		bottom: 3%;
		right:2%;
		display: flex;
		-webkit-transition: all 0.5s;
		-moz-transition: all 0.5s;
		-ms-transition: all 0.5s;
		-o-transition: all 0.5s;
		transition: all 0.5s;
		opacity: 0;
	}
	
	.sns_share a{
		display: block;
		width: 60px;
	}	
	.sns_share img{
		width: 100%;
		height: auto;
	}
	
	.show{
		opacity: 1;
	}
	
}