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

html{
	overflow-y: scroll;
}
body{
	font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #fff url(../img/bg-01.jpg) repeat 0 0;;
}
img {
	display: block;
	width: 100%;
	height: auto;
}

@media only screen and (min-width:768px) {
	body {
		min-width: 960px;
	}
	/* =======================================
			HEADER
		 ======================================= */
	#globalHeader {
		background: #000 url(../img/main-bg.jpg) no-repeat 50% 0;
		height: 775px;
	}
	#globalHeader .inner {
		width: 960px;
		margin: 0 auto;
		position: relative;
	}
	#globalHeader h1 {
		width: 646px;
		margin-bottom: 210px;
	}
	#globalHeader h2 {
		width: 240px;
		position: absolute;
		top: 265px;
		right: 0;
	}
	#globalHeader h3 {
		width: 715px;
	}
	#globalHeader p.price {
		width: 551px;
	}
	#globalHeader p.button {
		width: 414px;
		position: absolute;
		top: 655px;
		right: 0;
	}
	/* =======================================
			MAIN
		 ======================================= */
	#main {
		width: 960px;
		margin: 0 auto 60px;
	}
	#main .con {
		position: relative;
	}
	#main .con .layer,
	#main .con .button {
		position: absolute;
		z-index: 2;
	}
	#main .con-01 .layer {
		top: 562px;
		left: 20px;
	}
	#main .con-02 .layer {
		top: 598px;
		left: 20px;
	}
	#main .con-03 .layer {
		top: 978px;
		left: 20px;
	}
	#main .con-04 .layer {
		top: 410px;
		left: 20px;
	}
	#main .con-04 .button {
		top: 640px;
		left: 490px;
	}
	#main .con-05 .layer {
		top: 567px;
		left: 20px;
	}
	#main .con-06 .button {
		bottom: 35px;
		left: 490px;
	}
/* =======================================
			FOOTER
		 ======================================= */
	ul.footer {
		text-align: center;
		padding: 10px;
	}
	ul.footer li {
		display: inline;
	}
	ul.footer li a {
		color: #666;
		font-size: 93%;
		margin-left: 0.5em;
	}
}
@media only screen and (max-width:767px) {
	/* =======================================
			HEADER
		 ======================================= */
	#globalHeader {
		background: #000 url(../img/main-bg.jpg) no-repeat 50% 0;
		position: relative;
	}
	#globalHeader h1 {
		width: 90%;
		margin: 0 auto;
	}
	#globalHeader h1 {
		margin-bottom: 305px;
	}
	#globalHeader h2 {
		position: absolute;
		top: 360px;
		right: 20px;
		width: 25%;
	}
	#globalHeader h3 {
		width: 65%;
		margin-left: 5%;
	}
	#globalHeader p.price {
		width: 40%;
		margin-left: 5%;
		float: left;
		padding: 20px 0 0;
	}
	#globalHeader p.button {
		width: 50%;
		padding-left: 45%;
		padding-bottom: 2%;
	}
	#main .con-01 .bg img,
	#main .con-01 .layer img,
	#main .con-02 .layer img,
	#main .con-03 .bg img,
	#main .con-03 .layer img,
	#main .con-04 .bg img,
	#main .con-04 .layer img,
	#main .con-05 .bg img,
	#main .con-05 .layer img,
	#main .con-06 .bg img,
	#main .con-06 .bg-01 img,
	#main .con-06 .bg-02 img {
		display: none;
	}
	#main .con-01 .bg {
		background: transparent url(../img/img-03.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 62vw;
	}
	#main .con-01 .layer {
		background: transparent url(../img/img-14-sp.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 62vw;
	}
	#main .con-02 .layer {
		background: transparent url(../img/img-15-sp.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 67vw;
	}
	#main .con-03 .bg {
		background: transparent url(../img/img-06.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 68vw;
	}
	#main .con-03 .layer {
		background: transparent url(../img/img-16-sp.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 59vw;
	}
	#main .con-04 {
		background-color: #000;
		padding: 1%;
		position: relative;
	}
	#main .con-04 .bg {
		background: transparent url(../img/img-07.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 46vw;
	}
	#main .con-04 .layer {
		background: transparent url(../img/close-03.png) no-repeat 0 0;
		background-size: 100% auto;
		height: 62vw;
	}
	#main .con-04 .button {
		position: absolute;
		bottom: 3%;
		right: 3%;
		width: 61.5%;
	}
	#main .con-05 .bg {
		background: transparent url(../img/img-08.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 66vw;
	}
	#main .con-05 .layer {
		background: transparent url(../img/img-17-sp.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 57vw;
	}
	#main .con-06 {
		position: relative;
		margin-bottom: 5%;
	}
	#main .con-06 .bg {
		background: transparent url(../img/img-09-sp.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 66vw;
	}
	#main .con-06 .bg-01 {
		background: transparent url(../img/img-12-sp.jpg) no-repeat 0 0;
		background-size: 100% auto;
		height: 130vw;
	}
	#main .con-06 .bg-02 {
		background: #000 url(../img/close-03.png) no-repeat 50% 0;
		background-size: 98% auto;
		height: 63vw;
	}
	#main .con-06 .button {
		position: absolute;
		bottom: 0.6%;
		right: 3%;
		width: 61.5%;
	}
	/* =======================================
			MAIN
		 ======================================= */
	#main {
		margin: 0 2%;
	}
/* =======================================
			FOOTER
		 ======================================= */
	ul.footer {
		text-align: center;
		padding: 10px;
	}
	ul.footer li {
		display: inline;
	}
	ul.footer li a {
		color: #666;
		font-size: 93%;
		margin-left: 0.5em;
	}
}
@media only screen and (max-width:420px) {
}