@charset "UTF-8";
/*CSSをリセットする*/
body,td,th {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* ここから */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img {
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym {
	border:0;
}
/* ここまで変更無し */
a:link {
	color: #FC3;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FC3;
}
a:hover {
	text-decoration: none;
	color: #CF0;
}
a:active {
	text-decoration: none;
	color: #FC3;
}
.clearfix {
  *zoom: 1;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
}

/*全体の調整*/
body {
	background-color: #FFF;
}
a{
	outline: 0;
}

div#contents {
	overflow: auto;
}

/*セクションの設定*/
div.sectionBody {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	margin: 0 auto;
	width: 100%;
	height: 900px; /* ここ変更無し */
	position: relative; /* ここ変更無し */
	/*background-color: #999;*/
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	-webkit-background-size: cover;
}





/*コンテンツの設定*/
div.sectionBody div.contents {
	padding-top: 25px;
	width: 650px;
	color: #666;
	font-size: 13px;
	letter-spacing: 1px;
}




/*タイトル横のPRICE*/
div.sectionBody div.title {
	font-size: 13px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	letter-spacing: 1px;
	color: #3C8DAB;
	font-weight: bold;
}




/*コンテンツ内のお菓子タイトル*/
.products_name {
	color: #3C8DAB;
	font-weight: bold;
}


/*コンテンツ内のPRICE*/
.price {
	font-weight: normal;
	color: #3C8DAB;
}


/*各セクションボックスの位置とコンテンツの設定*/


/*0*/

div#section0 div.section_box {
	left: 5%;
	top: 20%;
	position: absolute;
	z-index: 600;
}

#section0_contents {
	width: 480px;
	overflow: auto;
	line-height: 30px;
	font-size: 13px;
	height: 180px;
}



/*1*/

div#section1 div.section_box {
	left: 4%;
	top: 26%;
	position: absolute;
	z-index: 601;
}


div#section1_contents {
	width: 700px;
	overflow: auto;
	line-height: 23px;
	font-size: 13px;
}


/*2*/

div#section2 div.section_box {
	left: 3%;
	top: 56%;
	position: absolute;
	z-index: 602;
}


div#section2_contents {
	width: 600px;
	overflow: auto;
	line-height: 21px;
	height: 185px;
}

/*3*/

div#section3 div.section_box {
	left: 4%;
	top: 29%;
	position: absolute;
	z-index: 603;
}


div#section3_contents {
	width: 680px;
	overflow: auto;
	line-height: 22px;
	height: 250px;
}

/*4*/

div#section4 div.section_box {
	left: 4%;
	top: 24%;
	position: absolute;
	z-index: 604;
}


div#section4_contents {
	width: 630px;
	line-height: 21px;
	overflow: auto;
}


/*5*/

div#section5 div.section_box {
	left: 5%;
	top: 28%;
	position: absolute;
	z-index: 605;
}

div#section5_contents {
	width: 520px;
	line-height: 23px;
	overflow: auto;
	height: 260px;
	
}


/*6*/

div#section6 div.section_box {
	left: 3%;
	top: 29%;
	position: absolute;
	z-index: 606;
}


div#section6_contents {
	width: 670px;
	line-height: 22px;
	overflow: auto;
	height: 310px;
}

/*7*/

div#section7 div.section_box {
	left: 3%;
	top: 30%;
	position: absolute;
	z-index: 607;
}


div#section7_contents {
	width: 520px;
	line-height: 23px;
	overflow: auto;
}



/*8*/

div#section8 div.section_box {
	left: 3%;
	top: 20%;
	position: absolute;
	z-index: 608;
}


div#section8_contents {
	width: 560px;
	line-height: 22px;
	overflow: auto;
	height: 330px;
}






/*背景画像の設定*/
/*0*/
#section0 {
	background-image: url(../images/section0_bg.jpg);
}
#section0 .layer1 {
	background-image: url(../images/sec0_layer1_bg.png); /* ここ変更無し */

}
#section0 .layer2 {
	background-image: url(../images/sec0_layer2_bg.png); /* ここ変更無し */
}

/*1*/
#section1 {
	background-image: url(../images/section1_bg.jpg);
}
#section1 .layer1 {
	background-image: url(../images/sec1_layer1_bg.png); /* ここ変更無し */
}
#section1 .layer2 {
	background-image: url(../images/sec1_layer2_bg.png); /* ここ変更無し */
}


/*2*/
#section2 {
	background-image: url(../images/section2_bg.jpg);
}
#section2 .layer1 {
	background-image: url(../images/sec2_layer1_bg.png); /* ここ変更無し */
}
#section2 .layer2 {
	background-image: url(../images/sec2_layer2_bg.png); /* ここ変更無し */
}


/*3*/
#section3 {
	background-image: url(../images/section3_bg.jpg);
}
#section3 .layer1 {
	background-image: url(../images/sec3_layer1_bg.png); /* ここ変更無し */
}
#section3 .layer2 {
	background-image: url(../images/sec3_layer2_bg.png); /* ここ変更無し */
}

/*4*/
#section4 {
	background-image: url(../images/section4_bg.jpg);
}
#section4 .layer1 {
	background-image: url(../images/sec4_layer1_bg.png); /* ここ変更無し */
}
#section4 .layer2 {
	background-image: url(../images/sec4_layer2_bg.png); /* ここ変更無し */
}

/*5*/
#section5 {
	background-image: url(../images/section5_bg.jpg);
}
#section5 .layer1 {
	background-image: url(../images/sec5_layer1_bg.png); /* ここ変更無し */
}
#section5 .layer2 {
	background-image: url(../images/sec5_layer2_bg.png); /* ここ変更無し */
}

/*6*/
#section6 {
	background-image: url(../images/section6_bg.jpg);
}
#section6 .layer1 {
	background-image: url(../images/sec6_layer1_bg.png); /* ここ変更無し */
}
#section6 .layer2 {
	background-image: url(../images/sec6_layer2_bg.png); /* ここ変更無し */
}

/*7*/
#section7 {
	background-image: url(../images/section7_bg.jpg);
}
#section7 .layer1 {
	background-image: url(../images/sec7_layer1_bg.png); /* ここ変更無し */
}
#section7 .layer2 {
	background-image: url(../images/sec7_layer2_bg.png); /* ここ変更無し */
}

/*8*/
#section8 {
	background-image: url(../images/section8_bg.jpg);
}
#section8 .layer1 {
	background-image: url(../images/sec8_layer1_bg.png); /* ここ変更無し */
}
#section8 .layer2 {
	background-image: url(../images/sec8_layer2_bg.png); /* ここ変更無し */
}






/* coptright */
#copyright {
	position: fixed;
	right: 10px;
	bottom: 5px;
	color: #FC3;
	font-size: 11px;
	letter-spacing: 1px;
	z-index: 9999;
}
#copyright a:link ,
#copyright a:visited {
	color:#FC3;
	text-decoration: none;
}
#copyright a:hover {
	color: #45B6D1;
}




/*レイヤーの設定*/
.layer {
	width: 100%; /* ここ変更無し */
	height: 100%; /* ここ変更無し */
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: cover;
	-webkit-background-size: cover;
	position: absolute; /* ここ変更無し */
	left: 0; /* ここ変更無し */
	top: 0; /* ここ変更無し */
}


/*スマホの設定*/

.sp div.sectionBody {
	background-position: center top;
}

.sp div.layer {
	background-size: cover;
	-webkit-background-size: cover;

	-webkit-transition: all 1.5s ease-out; /* 上に移動した時の水滴、イラストのスピード */
	transition: all 1.5s ease-out; /* 上に移動した時の水滴、イラストのスピード */

	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);

	-webkit-backface-visibility: hidden;
	backface-visibility:hidden;

	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;

	overflow: hidden;
}

.sp div.layer1 {
	background-position: center bottom;
}

.sp div.layer2 {
	background-position: center top;
}

.sp .active div.layer {
	-webkit-transition: all 2s ease-out; /* 下に移動した時の水滴、イラストのスピード */
	transition: all 2s ease-out; /* 下に移動した時の水滴、イラストのスピード */
}

.sp .active div.layer.first  {
	-webkit-transition: all 1.5s ease-out; /* 1枚目の移動した時の水滴、イラストのスピード */
	transition: all 1.5s ease-out; /* 1枚目の移動した時の水滴、イラストのスピード */
}

.sp .active div.layer1.first {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.sp .active div.layer2.first {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

.sp div.layer.first  {
	-webkit-transition: all 1s ease-out; /* 1枚目の移動した時の水滴、イラストのスピード */
	transition: all 1s ease-out; /* 1枚目の移動した時の水滴、イラストのスピード */
}



@media only screen and (orientation : landscape) { /*横向きの際に適用*/
	.sp div.sectionBody {
		height: 550px;
	}

	.sp .active div.layer1 {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

	.sp .active div.layer2 {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

	.sp div.layer1.first {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

	.sp div.layer2.first {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}
}

@media only screen and (orientation : portrait) { /*縦向きの際に適用*/
	.sp div.sectionBody {
		height: 1740px;
	}

	.sp .active div.layer1 {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

	.sp .active div.layer2 {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

	.sp div.layer1.first {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}

	.sp div.layer2.first {
		-webkit-transform: translate3d(0, 0px, 0);
		transform: translate3d(0, 0px, 0);
	}
}