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

/*======================================

1: body
2: #header
3: #main
4: #center-col
5: #modal
6: #wrapper
7: #footer
8: #pagetop
9: .clearfix

=======================================*/


/* ---------------------------------------------------------
1:body
----------------------------------------------------------*/
body {
	position: relative;
	color: #000;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;
	line-height: 1.67;
	min-width: 1160px;
	width: 100%;
	padding-top: 0px;
	background: url(../img/bg_header.jpg) repeat-x top;
	background-color: #fff;
}

iframe[name="google_conversion_frame"] {
	position: absolute;
	top: 0;
}

img { vertical-align: top;}

a {	color: #000; text-decoration: none;}
a:hover { text-decoration: underline;}

.bg-footer {
	position: absolute;
	width: 100%;
	height: 1342px;
	background: url(../img/bg_footer.jpg) repeat-x;
	bottom: 57px;
	z-index: -1;
}

.on {
	position: absolute;
	display: none;
}

/* ---------------------------------------------------------
2:#header
----------------------------------------------------------*/
#header {
	position: relative;
	width: 1110px;
	height: 97px;
	margin: 0 auto;
	z-index: 5;
}
h1 {
	position: absolute;
	top: 24px;
	left: 0px;
}
.sns {
	position: absolute;
	top: 77px;
	left: 0;
}
.facebook {
	position: absolute; !important;
	top: 0;
	left: 0;
	overflow: hidden;
	z-index: 2;
}
*+html .facebook {
	width: 78px;
}
.tweet {
	position: absolute;
	top: 0;
	left: 165px;
	z-index: 3;
}

.mixi {
	position: absolute;
	top: 0;
	left: 262px;	
	z-index: 1;
}
.gplus {
	position: absolute;
	top: 0;
	left: 345px;	
	z-index: 1;
}

.logo {
	position: absolute;
	top: 25px;
	left: 505px;
}

/* ---------------------------------------------------------
3:#main
----------------------------------------------------------*/
#main {
	position: relative;
	width: 1110px;
	height: 565px;
	margin: 0 auto;
	z-index: 2;
}
#main div {
	position: absolute;
	left: 50%;
	opacity: 0;
}
#main .ribbon {
	margin: -36px 0 0 -315px;
}
#main .illust {
	margin: 117px 0 0 -416px;
}
#main h2 {
	position: absolute;
	left: 50%;
	margin: 132px 0 0 -27px;
	opacity: 0;
}
#main h3 {
	position: absolute;
	left: 50%;
	margin: 228px 0 0 -10px;
	opacity: 0;
}
#main .heart {
	margin: 96px 0 0 -203px;
}
#main .petal {
	margin: 68px 0 0 -432px;
}
#main .petal2 {
	margin: 191px 0 0 357px;
}
#main .flower {
	margin: 199px 0 0 -506px;
}
#main .product {
	margin: 404px 0 0 -227px;
}
#main .bird {
	margin: -1px 0 0 281px;
}
#main .btn-movie {
	margin: 438px 0 0 292px;
}
#main .btn-movie .arrow {
	top: 79px;
	left: 45px;
}

/* ---------------------------------------------------------
4:.txt-block1
----------------------------------------------------------*/
.txt-block1 {
	position: relative;
	width: 1160px;
	height: 178px;
	margin: 18px auto 22px;
}
.txt-block1 .kira {
	position: absolute;
	left: 0;
	margin-top: -117px;
}
.txt-block1 .txt {
	position: absolute;
	left: 50%;
	margin: 15px 0 0 -128px;
}
.txt-block1 .petal {
	position: absolute;
	left: 50%;
	margin: -25px 0 0 -184px;
}
.txt-block1 .mask1 {
	position: absolute;
	left: 50%;
	width: 256px;
	height: 30px;
	background-color: #fff;
	margin: 10px 0 0 -128px;
	z-index: 2;
}
.txt-block1 .mask2 {
	position: absolute;
	left: 50%;
	width: 256px;
	height: 30px;
	background-color: #fff;
	margin: 65px 0 0 -128px;
	z-index: 2;
}
.txt-block1 .mask3 {
	position: absolute;
	left: 50%;
	width: 260px;
	height: 30px;
	background-color: #fff;
	margin: 120px 0 0 -130px;
	z-index: 2;
}

/* ---------------------------------------------------------
5-6:.btn-close
----------------------------------------------------------*/
.btn-close {
	position: relative;
	text-align: center;
	padding-top: 6px;
	margin: 0 0 69px -1px;
	z-index: 2;
}


/* ---------------------------------------------------------
7:.txt-block2
----------------------------------------------------------*/
.txt-block2 {
	position: relative;
	width: 960px;
	margin: 35px auto 39px;
}
.txt-block2 .flower {
	padding-left: 33px;
}
.txt-block2 .txt {
	position: absolute;
	top: 59px;
	left: 50%;
	margin-left: -162px;
}
.txt-block2 .mask1 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 300px;
	height: 30px;
	background-color: #fff;
	margin: 55px 0 0 -150px;
	z-index: 2;
}
.txt-block2 .mask2 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 300px;
	height: 30px;
	background-color: #fff;
	margin: 115px 0 0 -150px;
	z-index: 2;
}
.txt-block2 .mask3 {
	position: absolute;
	top: 0;
	left: 50%;
	width: 380px;
	height: 30px;
	background-color: #fff;
	margin: 170px 0 0 -190px;
	z-index: 2;
}

/* ---------------------------------------------------------
8:.msg
----------------------------------------------------------*/
.msg {
	position: relative;
	width: 960px;
	margin: 0 auto 15px;
}
.msg h4 {
	margin: 0 0 20px 130px;
}
.msg .btn-prev {
	position: absolute;
	top: 182px;
	left: 60px;
	cursor: pointer;
}
.msg .btn-next {
	position: absolute;
	top: 182px;
	left: 881px;
	cursor: pointer;
}

/* ---------------------------------------------------------
9:.bottom
----------------------------------------------------------*/
.bottom {
	position: relative;
	width: 960px;
	margin: 0 auto 144px;
}
.bottom .bird {
	position: absolute;
	top: -22px;
	left: -5px;
}
.bottom .flower {
	margin-left: 108px;
}

/* ---------------------------------------------------------
10:.bg-footer
----------------------------------------------------------*/
.bg-footer {
	position: absolute;
	bottom: 57px;
	width: 100%;
	height: 1332px;
	background: url(../img/bg_footer.jpg) repeat-x;
}
.bg-snow {
	position: absolute;
/*	bottom: 171px;*/
	bottom: 156px;
	left: 50%;
	margin-left: -494px;
}

/* ---------------------------------------------------------
11:.history
----------------------------------------------------------*/
.history {
	position: relative;
	width: 700px;
	margin: 0 auto;
}
.history h4 { margin-bottom: 8px;}
.history .movie {
	width: 698px;
	height: 390px;
/*	height: 425px;*/
	overflow: hidden;
}
.history .movie iframe { margin-top: -1px;}
.history .txt {
	padding-top: 34px;
	margin: 100px 0 77px 160px;
}
.history .snow {
	position: absolute;
	top: 536px;
	left: 101px;
}
.history .product-l {
	position: absolute;
	top: 505px;
	left: 0;
}
.history .product-r {
	position: absolute;
	top: 608px;
	left: 644px;
}

/* ---------------------------------------------------------
12:.caution
----------------------------------------------------------*/
.caution {
	position: relative;
	width: 700px;
	margin: 0 auto 95px;
	color: #004189;
	z-index: 2;
}
.caution h5,
.caution p {
	font-size: 12px;
}
.caution p {
	line-height: 1.8;
	margin-bottom: 21px;
}
.caution a {
	color: #004189;
	text-decoration: underline;
}
.caution a:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------
7:#footer
----------------------------------------------------------*/
#footer {
	position: relative;
	border-top: 1px solid #ccc;
	height: 57px;
	background-color: #fff;
}
.footer-box {
	margin: 0 auto;
	width: 1160px;
}
.footer-box .logo-sekkisei {
	float: left;
	margin: 15px 31px 0 25px;
}
.footer-box ul {
	float: left;
	margin-top: 20px;
	margin-bottom: 0;
}
.footer-box li {
	float: left;
	list-style: none;
	margin-right: 20px;
	margin-bottom: 0;
	height: 12px;
}
.footer-box li a { color: #666;}
address {
	float: right;
	color: #666;
	font-style: normal;
	margin: 20px 100px 0 0;
}

/* ---------------------------------------------------------
8:#pagetop
----------------------------------------------------------*/
#pagetop {
	position: absolute;
	top: 0;
	right: 25px;
}

/* ---------------------------------------------------------
9:clearfix
----------------------------------------------------------*/
.clearfix:after {
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}

.clearfix { display: inline-table; }