@charset "UTF-8";

html,body {
}

/*----------------
  #wrapper
----------------*/
#wrapper {
    background: url("../../teaser/img/news_bg.png") repeat top left;
    -webkit-background-size: 33%;
    background-size: 33%;
}

/*----------------
  #header
----------------*/
#header {
    margin: 0 auto;
    font-size: 0;
	position: relative;
}
#header .block {
    padding-top: 22%;
	position: relative;
}
#header h1 {
    margin: 2% 2% 0 0;
    width: 18%;
    position: absolute;
    top: 0;
    right: 0;
}
#header h2 {
    margin: 0 auto;
    width: 46%;
}

/*----------------
  #introduction
----------------*/
#introduction {
    padding: 5% 0 10%;
}
#introduction .block {
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    transition: .8s;
    transition-property: opacity;
}
#introduction .block.fadeIn {
    opacity: 1;
}
#introduction .catch {
    margin: 0 auto 4%;
	width: 67%;
    font-size: 0;
}
#introduction .txt {
    margin: 0 auto 5%;
	width: 90%;
}
#introduction .img {
    margin: 0 auto;
    font-size: 0;
}

/*----------------
  #story
----------------*/
#story {
    padding: 0 0 10%;
}
#story .block {
    margin: 0 auto;
    width: 100%;
    opacity: 0;
    transition: .8s;
    transition-property: opacity;
}
#story .block.fadeIn {
    opacity: 1;
}
#story h2 {
    margin: 0 auto 4%;
    width: 26.5%;
    font-size: 0;
}
#story .catch1 {
    margin: 0 auto 4%;
	width: 90%;
    font-size: 0;
}
#story .catch2 {
    margin: 0 auto 4%;
	width: 97%;
    font-size: 0;
}
#story .txt {
    margin: 0 auto 5%;
	width: 90%;
}
#story .img {
    margin: 0 auto;
    font-size: 0;
}

@media only screen and (min-width:800px){
	/*----------------
	  #wrapper
	----------------*/
	#wrapper {
	}
    
    /*----------------
      #header
    ----------------*/
    #header {
        margin: 0 auto;
    }
    #header .block {
        padding-top: 80px;
    }
    #header h1 {
        margin: 20px 20px 0 0;
        width: 140px;
    }
    #header h1 a:hover {
        opacity: 0.7;
    }
    #header h2 {
        width: 283px;
    }

	/*----------------
	  #introduction
	----------------*/
	#introduction {
        padding: 30px 0 80px;
	}
	#introduction .block {
		text-align: center;
	}
	#introduction .catch {
		margin: 0 auto 20px;
		width: 376px;
	}
	#introduction .txt {
		margin: 0 auto 40px;
		width: auto;
		font-size: 16px;
	}
	#introduction .img {
		padding-top: 210px;
		background: url("../img/introduction_img_pc.jpg") no-repeat top center;
	}
	#introduction .img img {
		height: 0;
		opacity: 0;
	}

	/*----------------
	  #story
	----------------*/
	#story {
        padding: 0 0 80px;
	}
	#story .block {
		text-align: center;
	}
	#story h2 {
		margin: 0 auto 30px;
		width: 163px;
	}
	#story .catch1 {
		margin: 0 auto 28px;
		width: 543px;
	}
	#story .catch2 {
		margin: 0 auto 20px;
		width: 723px;
	}
	#story .txt {
		margin: 0 auto 40px;
		width: auto;
		font-size: 16px;
	}
}