@charset "UTF-8";




/* 全体 */

#wrap {
	background: url(../img/bg_flower.jpg) center 0px;
	background-size: 100% auto;
	}




/* mv */

#mv {
	position: relative;
	display: block;
	width: 100%;
	height: 500px;
	background: #f0f1ed;
	}
@media screen and (max-width:768px){
#mv {
	height: 400px;
	}
}
@media screen and (max-width:640px){
#mv {
	height: 300px;
	}
}

#mv li {
	position: relative;
	display: block;
	width: 100%;
	height: 500px;
	}
@media screen and (max-width:768px){
#mv li {
	height: 400px;
	}
}
@media screen and (max-width:640px){
#mv li {
	height: 300px;
	}
}

#mv li.mv01 { background: url(../img/mv2017aw1.jpg) center center no-repeat; background-size: 100% auto; }
#mv li.mv02 { background: url(../img/mv2017aw2.jpg) center center no-repeat; background-size: 100% auto; }
#mv li.mv03 { background: url(../img/mv2017aw3.jpg) center center no-repeat; background-size: 100% auto; }
#mv li.mv04 { background: url(../img/mv2017aw4.jpg) center center no-repeat; background-size: 100% auto; }
#mv li.mv05 { background: url(../img/mv2017aw5.jpg) center center no-repeat; background-size: 100% auto; }

@media screen and (max-width:768px){
#mv li.mv01 { background: url(../img/mv2017aw1.jpg) center center no-repeat; background-size: auto 100%; }
#mv li.mv02 { background: url(../img/mv2017aw2.jpg) center center no-repeat; background-size: auto 100%; }
#mv li.mv03 { background: url(../img/mv2017aw3.jpg) center center no-repeat; background-size: auto 100%; }
#mv li.mv04 { background: url(../img/mv2017aw4.jpg) center center no-repeat; background-size: auto 100%; }
#mv li.mv05 { background: url(../img/mv2017aw5.jpg) center center no-repeat; background-size: auto 100%; }
}

#mv li p {
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	transform: translate(-50%,200%);
	color: #fff;
	font-size: 48px;
	font-weight: 300;
	line-height: 1em;
	text-align: center;
	text-shadow: 0 1px 10px rgba(0,0,0,.3);
	}
@media screen and (max-width:768px){
#mv li p {
	width: 400px;
	font-size: 32px;
	}
}
@media screen and (max-width:640px){
#mv li p {
	font-size: 28px;
	}
}

#mv .bx-wrapper .bx-prev {
	left: 10px;
	background: url(../img/prev.png) center center no-repeat;
	background-size: auto 32px;
	opacity: .5;
	transition: .3s ease;
	}

#mv .bx-wrapper .bx-next {
	right: 10px;
	background: url(../img/next.png) center center no-repeat;
	background-size: auto 32px;
	opacity: .5;
	transition: .3s ease;
	}

#mv .bx-wrapper .bx-prev:hover {
	opacity: 1;
	}

#mv .bx-wrapper .bx-next:hover {
	opacity: 1;
	}




/* contentwrap */

#contentwrap:after {
	display: block;
	content: "";
	clear: both;
	}




/* PRODUCT */

#product {
	display: block;
	width: 100%;
	padding: 50px 0;
	background: rgba(255,255,255,.8);
	}
@media screen and (max-width:768px){
#product {
	padding: 0 0 20px 0;
	}
}

#product .bx-wrapper {
	width: 1000px;
	margin: 0 auto;
	}
@media screen and (max-width:768px){
#product .bx-wrapper {
	width: 100%;
	}
}

#product .bx-wrapper .bx-prev {
	left: 10px;
	background: url(../img/prev.png) center center no-repeat;
	background-size: auto 32px;
	opacity: .5;
	transition: .3s ease;
	}

#product .bx-wrapper .bx-next {
	right: 10px;
	background: url(../img/next.png) center center no-repeat;
	background-size: auto 32px;
	opacity: .5;
	transition: .3s ease;
	}

#product .bx-wrapper .bx-prev:hover,
#product .bx-wrapper .bx-next:hover {
	opacity: 1;
	}

#product ul {
	display: block;
	width: 100%;
	}

#product ul li {
	display: block;
	height: 200px;
	padding: 0;
	}
@media screen and (max-width:768px){
#product ul li {
	height: 133.6px;
	}
}
@media screen and (max-width:640px){
#product ul li {
	height: 70px;
	}
}
@media screen and (max-width:375px){
#product ul li {
	height: 65px;
	}
}
@media screen and (max-width:320px){
#product ul li {
	height: 55px;
	}
}

#product span.bt {
	display: block;
	width: 250px;
	margin: 20px auto;
	}

#product span.bt a {
	display: block;
	width: 100%;
	padding: 10px 0;
	color: #fff;
	text-align: center;
	text-decoration: none;
	background: #c2b4d7;
	}

#product span.bt a:hover {
	display: block;
	width: 100%;
	padding: 10px 0;
	color: #fff;
	text-align: center;
	background: #c1a2f1;
	}



/* News */

#news {
	display: block;
	width: 100%;
	padding: 50px 0 100px 0;
	background: rgba(255,255,255,.8);
	}
@media screen and (max-width:767px){
#news {
	padding: 20px;
	}
}

#news .inner {
	position: relative;
	display: block;
	width: 1000px;
	margin: 0 auto;
	padding: 5px;
	border: 2px double #c8b26d;
	background: rgba(255,255,255,.3);
	}
@media screen and (max-width:767px){
#news .inner {
	display: block;
	width: 100%;
	}
}

#news .inner .inner {
	width: 100%;
	padding: 10px;
	border: 1px double #c8b26d;
	}

#news .inner .inner:before {
	position: absolute;
	right: -40px;
	top: -40px;
	display: block;
	content: "";
	width: 300px;
	height: 174px;
	background: url(../img/news_deco1.png) no-repeat;
	background-size: 100% 100%;
	}
@media screen and (max-width:767px){
#news .inner .inner:before {
	right: -20px;
	top: -20px;
	width: 150px;
	height: 87px;
	}
}

#news .inner .inner:after {
	position: absolute;
	left: -40px;
	bottom: -40px;
	display: block;
	content: "";
	width: 300px;
	height: 252px;
	background: url(../img/news_deco2.png) no-repeat;
	background-size: 100% 100%;
	}
@media screen and (max-width:767px){
#news .inner .inner:after {
	left: -20px;
	bottom: -20px;
	width: 150px;
	height: 126px;
	}
}

#news h2 {
	display: block;
	padding: 50px 0;
	font-size: 20px;
	font-weight: 300;
	text-align: center;
	}
@media screen and (max-width:640px){
#news h2 {
	padding: 20px 0;
	}
}

#news ul {
	display: block;
	width: 600px;
	margin: 0 auto;
	}
@media screen and (max-width:640px){
#news ul {
	width: 100%;
	padding: 0 20px;
	}
}

#news li {
	display: block;
	margin: 0 0 20px 0;
	}

#news a {
	display: block;
	color: #666;
	font-size: 12px;
	line-height: 1.3em;
	text-decoration: none;
	}

#news a:after {
	display: block;
	clear: both;
	content: "";
	}

#news a:hover {
	color: #c2b4d7;
	}

#news a span {
	padding: 0 10px 0 0;
	}
@media screen and (max-width:640px){
#news a span {
	display: block;
	padding: 0 0 5px 0;
	}
}

#news a span:before {
	padding: 0 5px 0 0;
	content: "\f105";
	font-family: FontAwesome;
	}

#news div.info {
	margin: 0 0 20px 0;
	}

#news dl {
	width: 100%;
	border-bottom: 1px solid #c8b26d;
	}

#news dt {
	display: inline-block;
	padding: 10px;
	font-size: 14px;
	line-height: 1.3em;
	}

#news dd {
	display: inline-block;
	padding: 10px;
	}

#news dd a {
	font-size: 14px;
	line-height: 1.3em;
	}




/* アニメーション */

#stage1 {
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 0;
	z-index: 9999999999999;
	}
@media screen and (max-width:767px){
#stage1 {
	display: none;
	}
}

#dog1 {
	position: absolute;
	width: 50px;
	height: 50px;
	background: transparent url(../img/dog1.png) 0 0 no-repeat;
	background-size: auto 100%;
	z-index: 9999999999999;
	}
@media screen and (max-width:767px){
#dog1 {
	display: none;
	}
}

#stage2 {
	position: absolute;
	left: 50%;
	top: 0;
	width: 50%;
	height: 0;
	z-index: 9999999999999;
	}
@media screen and (max-width:767px){
#stage2 {
	display: none;
	}
}

#dog2 {
	position: absolute;
	width: 50px;
	height: 50px;
	background: transparent url(../img/dog2.png) 0 0 no-repeat;
	background-size: auto 100%;
	z-index: 9999999999999;
	}
@media screen and (max-width:767px){
#dog2 {
	display: none;
	}
}