@charset "utf-8";

@media screen and (min-width: 641px) {

@keyframes simpleFadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* -----------------------------------------------------------------------------

	TOP common

----------------------------------------------------------------------------- */
h2 {
	text-align: center;
	overflow: hidden;
}
.inner span.subttl {
	display: block;
	width: 0;
	position: absolute;
	z-index: 1;
	overflow: hidden;
}

#contents_block {
	background: url(../common/img/bg_content.png) center top;
}

#about,
#tasty,
#products,
#movie,
#voice,
#event,
#diabetes,
#sunaolife {
	position: relative;
	z-index: 1;
}
#about h2 img,
#tasty h2 img,
#products h2 img,
#movie h2 img,
#voice h2 img,
#event h2 img,
#diabetes h2 img,
#sunaolife h2 img {
	width: auto;
	height: 100%;
}
#about .bg,
#tasty .bg,
#products .bg,
#movie .bg,
#voice .bg,
#event .bg,
#diabetes .bg,
#sunaolife .bg {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity .4s;
}
#about .bg img,
#tasty .bg img,
#products .bg img,
#movie .bg img,
#voice .bg img,
#event .bg img,
#diabetes .bg img,
#sunaolife .bg img {
	width: 100%;
	height: auto;
}
#about a:hover .bg,
#tasty a:hover .bg,
#products a:hover .bg,
#movie a:hover .bg,
#voice a:hover .bg,
#event a:hover .bg,
#diabetes a:hover .bg,
#sunaolife a:hover .bg {
	opacity: .8;
}
/* #about::before,
#tasty::before,
#products::before,
#movie::before,
#voice::before,
#event::before,
#diabetes::before {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: +1;
	width: 100%;
	height: 3px;
	background: #7e561f;
	background: linear-gradient(to right, #7e561f 0%,#f6e2c3 20%,#8b4d07 100%);
	content: "";
} */

.arrow {
	position: absolute;
	width: 46px;
	height: 4px;
	transition-property: width;
	transition-duration: .4s;
}
.arrow::before,
.arrow::after {
	content: '';
	position: absolute;
	background-color: #5A2800;
	border-radius: 1px;
	height: 1px;
	/* height: 2px; */
	transition-property: width;
}
.arrow::before {
	bottom: 0;
	width: 100%;
}
.arrow::after {
	bottom: 2px;
	right: 0;
	width: 8px;
	transform: rotate(35deg);
}
a:hover .arrow {
	width: 73px;
}

/* -----------------------------------------------------------------------------

	MV

----------------------------------------------------------------------------- */
#mvWrap {
	position: relative;
	/* background: url(../img/bg_mvWrap.png) center top no-repeat;
	background-size: 2160px auto; */
}
#mv {
	position: relative;
	height: 645px;
	background: none;
}
#mv .mv_inner {
	position: relative;
	display: block;
	width: 980px;
    margin: 0 auto;
}

#mv .ttl {
	position: absolute;
	top: 122px;
	/* right: 45%; */
	left: 108px;
	width: 447px;
	z-index: +1;
	/* display: none; */
}
#mv .catch {
	position: absolute;
    top: 321px;
	/* right: 53%; */
	left: 84px;
    width: 350px;
    z-index: +1;
	/* display: none; */
}
#mv .ttl img,
#mv .catch img {
	width: 100%;
}
#mv .inner {
	top: 327px;
	text-align: left;
	z-index: +1;
}
#mv .logo {
	position: absolute;
	top: 37px;
	right: 16px;
	width: 190px;
	/* display: none; */
}
#mv .logo img {
	width: 100%;
}
#mv .visual {
	position: absolute;
	top: 0;
	left: 50%;
	width: 3600px;
	margin-left: -1800px;
	/* width: 2160px;
	margin-left: -1080px; */
	/* display: none; */
}
#mv .visual img{
	width: 100%;
}
/* decoration */
#mv .decoration {
	margin-left: -640px;
	/* display: none; */
}
/* pkg */
#mv .pkg {
	position: absolute;
    left: -8px;
    top: -15px;
}
#mv .pkg img {
	width: 875px;
}
#mv .pkg .notice {
	display: inline-block;
	position: absolute;
	right: -8px;
	bottom: -2px;
	padding: 2px 5px;
	font-size: 10px;
	background-color: rgba(255, 0, 0, 0.25);
}
/* txt */
#mv p.txt {
	width: 86px;
    position: absolute;
    bottom: -226px;
    right: 13px;
}
#mv p.txt img {
	width: 100%;
	height: auto;
}
#mv p.notes {
	position: absolute;
	right: -2%;
	top: 255px;
	width: 104%;
	font-size: 10px;
	line-height: 1.4;
	text-align: center;
	z-index: 3;
	color: #333;
}

/* -----------------------------------------------------------------------------

	gnav

----------------------------------------------------------------------------- */
#nav.topnav {
	display: flex;
	justify-content: space-between;
}
#nav.topnav li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 73px;
}
#nav.topnav ul {
	position: relative;
	padding: 18px 0;
}
#nav.topnav ul::before,
#nav.topnav ul::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 4px;
	background: url(../img/bg_gnav.png) no-repeat;
	background-size: 100% auto;
}
#nav.topnav ul::before {
	top: 0;
}
#nav.topnav ul::after {
	bottom: 0;
}
#nav.topnav ul li a:hover {
	background-position: center top !important;
}
#nav.topnav ul li a b{
	display: none;
}
#nav.topnav ul li:first-child + li a {
	/* position: relative; */
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-about.png);

}
#nav.topnav ul li:first-child + li a:hover {
	background-image: url(../img/btn_top-about_hover.png);
}
#nav.topnav ul li:first-child + li ~ li a {
	position: relative;
}
#nav.topnav ul li:first-child + li ~ li a:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -10px;
	width: 1px;
	height: 20px;
	background-color: #000;
}
/* 背景画像設定 */
#nav.topnav ul li:first-child + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-commit.png);
}
#nav.topnav ul li:first-child + li + li a:hover {
	background-image: url(../img/btn_top-commit_hover.png);
}
#nav.topnav ul li:first-child + li + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-products.png);
}
#nav.topnav ul li:first-child + li + li + li a:hover {
	background-image: url(../img/btn_top-products_hover.png);
}
#nav.topnav ul li:first-child + li + li + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-movie.png);
}
#nav.topnav ul li:first-child + li + li + li + li a:hover {
	background-image: url(../img/btn_top-movie_hover.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-voice.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li a:hover {
	background-image: url(../img/btn_top-voice_hover.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-event.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li + li a:hover {
	background-image: url(../img/btn_top-event_hover.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-diabetes.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li + li + li a:hover {
	background-image: url(../img/btn_top-diabetes_hover.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li + li + li + li a {
	height: 44px;
	background-size: auto 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-image: url(../img/btn_top-life.png);
}
#nav.topnav ul li:first-child + li + li + li + li + li + li + li + li a:hover {
	background-image: url(../img/btn_top-life_hover.png);
}


.hover {
	display: inline-block;
	text-align: left;
}
.linkArea {
	display: block;
	text-align: center;
}

/* -----------------------------------------------------------------------------

	about

----------------------------------------------------------------------------- */
#about {
	position: relative;
	margin-top: 110px;
}
#about .inner {
	width: 760px;
	height: 360px;
	position: relative;
	z-index: 0;
}
#about h2 {
	position: absolute;
	top: 99px;
	right: 136px;
	margin-bottom: 16px;
	height: 131px;
	z-index: 2;
}
#about .arrow {
	top: 248px;
	left: 484px;
}

/* decoration */
/* vanilla */
#about::before {
	content: '';
	position: absolute;
	top: 12px;
	right: 0;
	width: 150px;
	height: 150px;
	background: url(../img/dress_vanila.png) no-repeat;
	background-size: contain;
	z-index: -1;
}
/* -----------------------------------------------------------------------------

	tasty

----------------------------------------------------------------------------- */
#tasty {
	margin-top: 30px ;
	position: relative;
}
#tasty .inner {
	width: 760px;
	height: 360px;
	position: relative;
	z-index: 0;
}
#tasty h2 {
	position: absolute;
	top: 94px;
	left: 50%;
	margin-left: -146px;
	height: 130px;
	z-index: 2;
}
#tasty .arrow {
	top: 240px;
	left: 50%;
	margin-left: -23px;
}

/* decoration */
/* chocolate */
#tasty::before {
	content: '';
	position: absolute;
	top: -117px;
	left: -44px;
	width: 256px;
	height: 250px;
	background: url(../img/dress_chocolate.png) no-repeat;
	background-size: contain;
	z-index: -1;
}


/* -----------------------------------------------------------------------------

	product

----------------------------------------------------------------------------- */
#products {
	margin-top: 30px ;
	position: relative;
}
#products .inner {
	width: 801px;
	height: 1017px;
	position: relative;
	z-index: 0;
}
#products .risotto {
	display: inline-block;
}
#products .risotto .wrapper {
	position: relative;
}
#products .risotto .wrapper .btn-box {
	position: absolute;
	top: -294px;
	right: -8px;
	width: 209px;
	z-index:  2;
}
#products .risotto .wrapper .btn-box .arrow {
	top: 150px;
	left: 66px;
	bottom: 10px;
	margin-left: 0;
	transform: rotate(15deg);
	z-index: 500;
	transition: all 0.3s ease;
}
#products .risotto:hover .wrapper .btn-box .arrow {
	top: 162px;
	left: 52px;
	width: 65px;
}

#products .risotto .wrapper .btn-box .arrow::before,
#products .risotto .wrapper .btn-box .arrow::after {
	background-color: #FFF;
}
#products .risotto .wrapper .btn-box .arrow::before {
	right: 0;
}
#products .risotto .wrapper .btn-box .normal {
	position: relative;
	width: 100%;
	z-index: 100;
	transition: 0.5s all ease;
}
#products .risotto:hover .wrapper .btn-box .normal {
	opacity: 0;
	transform: scale(1.1);
}
#products .risotto .wrapper .btn-box .active {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: 0.5s all ease;
}
#products .risotto:hover .wrapper .btn-box .active {
	transform: scale(1.1);
}
#products h2 {
	position: absolute;
	top: 63px;
	left: 50%;
	margin-left: -168px;
	height: 132px;
	z-index: 2;
}
#products .arrow {
	/* display: none; */
	top: 214px;
	left: 50%;
	margin-left: -23px;
}

/* decoration */
/* berry */
#products::before {
	content: '';
	position: absolute;
	top: -48px;
    right: 20px;
	width: 232px;
	height: 200px;
	background: url(../img/dress_berry.png) no-repeat;
	background-size: contain;
	z-index: -1;
}
/* nuts */
#products::after {
	content: '';
	position: absolute;
	bottom: -30px;
    left: 2px;
	width: 234px;
	height: 243px;
	background: url(../img/dress_nuts.png) no-repeat;
	background-size: contain;
	z-index: -1;
}

/* -----------------------------------------------------------------------------

	movie

----------------------------------------------------------------------------- */
#movie {
	margin-top: 30px ;
	position: relative;
}
#movie .inner {
	width: 760px;
	height: 360px;
	position: relative;
	z-index: 0;
}
#movie h2 {
	position: absolute;
	top: 95px;
	left: 114px;
	height: 130px;
	z-index: 2;
}
#movie .arrow {
	top: 243px;
	left: 220px;
}

/* decoration */
/* milk */
#movie::after {
	content: '';
	position: absolute;
	top: 188px;
    right: -27px;
	width: 207px;
	height: 247px;
	background: url(../img/dress_milk.png) no-repeat;
	background-size: contain;
	z-index: -1;
}

/* -----------------------------------------------------------------------------

	voice

----------------------------------------------------------------------------- */
#voice {
	margin-top: 30px ;
	position: relative;
}
#voice .inner {
	width: 760px;
	height: 360px;
	position: relative;
	z-index: 0;
}
#voice h2 {
	position: absolute;
	top: 92px;
	left: 50%;
	margin-left: -100px;
	height: 132px;
	z-index: 2;
}
#voice .arrow {
	top: 240px;
	left: 50%;
	margin-left: -23px;
}

/* -----------------------------------------------------------------------------

	event

----------------------------------------------------------------------------- */
#event {
	margin-top: 16px ;
	position: relative;
	z-index: 3;
}
#event .inner {
	width: 760px;
	height: 374px;
	position: relative;
	z-index: 0;
}
#event h2 {
	position: absolute;
    top: 85px;
    left: 50%;
    margin-left: -113px;
    height: 185px;
    z-index: 2;
}
#event .arrow {
	top: 288px;
	left: 50%;
	margin-left: -23px;
}

/* decoration */
/* vanilla */
#event::before {
	content: '';
	position: absolute;
	top: -74px;
	left: 0;
	width: 162px;
	height: 157px;
	background: url(../img/dress_vanilla_left.png) no-repeat;
	background-size: contain;
	z-index: -1;
}

/* -----------------------------------------------------------------------------

	diabetes

----------------------------------------------------------------------------- */
#diabetes {
	margin-top: 30px ;
	position: relative;
	z-index: 2;
}
#diabetes .inner {
	width: 760px;
	height: 360px;
	position: relative;
	z-index: 0;
}
#diabetes .subttl {
	position: absolute;
	top: 40px;
	left: 225px;
	width: 142px;
}
#diabetes .subttl img {
	width: 100%;
	height: auto;
}
#diabetes h2 {
	position: absolute;
	top: 100px;
	left: 50%;
	margin-left: -162px;
	height: 201px;
	z-index: 2;
}
/* decoration */
/* flour */
#diabetes::before {
	content: '';
	position: absolute;
	top: -184px;
    right: 3px;
	width: 193px;
	height: 408px;
	background: url(../img/dress_flour.png) no-repeat;
	background-size: contain;
	z-index: -1;
}


/* -----------------------------------------------------------------------------

	sunaolife

----------------------------------------------------------------------------- */
#sunaolife {
	margin: 30px 0 85px;
	position: relative;
}
#sunaolife .inner {
	width: 760px;
	height: 360px;
	position: relative;
	z-index: 0;
}

#sunaolife h2 {
	position: absolute;
	top: 70px;
	left: 50%;
	margin-left: -115px;
	height: 180px;
	z-index: 2;
}

/* decoration */
/* butter */
#sunaolife::before {
	content: '';
	position: absolute;
	top: -217px;
	left: -36px;
	width: 388px;
	height: 388px;
	background: url(../img/dress_butter.png) no-repeat;
	background-size: contain;
	z-index: -1;
}

/* -----------------------------------------------------------------------------

	cpbnr

----------------------------------------------------------------------------- */

.cpbnr p{
	background: url(../common/img/line_bnrArea.gif) repeat-x top center;
	padding: 50px 0;
	text-align: center;
}
.cpbnr p a{
	display: inline-block;
}
/* -----------------------------------------------------------------------------

	bnr_mumin

----------------------------------------------------------------------------- */
.bnr_area {
	padding: 50px 0;
	background: url(../common/img/line_bnrArea.gif) repeat-x top center, #fff;
}
.bnr_area a {
	width: 600px;
	display: block;
	margin: 0 auto;
	transition: opacity .3s ease;
}
.bnr_area a:hover {
	opacity: .8;
}
.bnr_area a img {
	width: 100%;
}

}