@charset "utf-8";

@media screen and (max-width: 640px) {

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

	TOP common

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

#about h2,
#tasty h2,
#movie h2,
#voice h2,
#event h2 {
	position: absolute;
	bottom: 28px;
	right: 5%;
}
#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;
}
.inner span.subttl {
	position: absolute;
	bottom: 30px;
	right: 5%;
	max-width: 50%;
	z-index: 1;
}
#about,
#tasty,
#products,
#movie,
#voice,
#event,
#diabetes,
#sunaolife {
	position: relative;
}

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

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

	nav

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


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

	MV

----------------------------------------------------------------------------- */
#mv {
	position: relative;
	padding-top: 30px;
	/* background: linear-gradient(to right, #a57330 0%,#f6e2c3 28%,#d5b37f 43%,#b6914d 60%,#8b4d07 100%); */
	height: 810px;
}
#mv .ttl {
	position: absolute;
	top: 52px;
	left: 6%;
	width: 90%;
	z-index: 1;
}
#mv .catch {
	position: absolute;
	top: 307px;
	left: 7%;
	width: 35.892308%;
	z-index: 1;
}
#mv .txt_sunao {
	position: absolute;
	top: 56%;
	right: 35px;
	width: 204px;
	z-index: 1;
	/* opacity: 0; */
}
#mv .visual {
	position: absolute;
	top: 0;
	left: 0;
}
#mv .visual img {
	width: 100%;
}

#mv .inner {
	top: 740px;
	z-index: 1;
}
/* pkg */
#mv .pkg {
    width: 33.538461538%;
    position: absolute;
    top: -272px;
    left: 4.5%;
	z-index: 3;
	/* opacity: 0; */
}
/* logo */
#mv p.logo {
	width: 48.307692308%;
	position: absolute;
	bottom: -22px;
	right: 6.923076923%;
}
#mv p.txt {
	width: 17.2307692%;
	position: absolute;
	bottom: 143px;
    left: 26.8%;
	z-index: 2;
	/* opacity: 0; */
}


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

	about

----------------------------------------------------------------------------- */
#about {
	overflow: hidden;
	margin-top: 4px;
}
#about .inner {
	margin: 0 auto;
	padding-top: 45.4%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#about h2 {
	position: absolute;
	top: 84px;
	right: 107px;
	height: 100px;
	z-index: 2;
}
#about .arrow {
	top: 195px;
	left: 370px;
}





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

	tasty

----------------------------------------------------------------------------- */
#tasty {
	overflow: hidden;
	margin-top: 40px;
}
#tasty .inner {
	margin: 0 auto;
	padding-top: 43.846153846%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#tasty h2 {
	position: absolute;
	top: 76px;
	left: 50%;
	margin-left: -111px;
	height: 100px;
	z-index: 2;
}
#tasty .arrow {
	top: 190px;
	left: 50%;
	margin-left: -17px;
}




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

	products

----------------------------------------------------------------------------- */
#products {
	overflow: hidden;
	position: relative;
	margin-top: 27px;
	padding-bottom: 27px;
}
#products .inner {
	margin: 0 auto;
	padding-top: 112%;
	width: 94%;
	height: 0;
	position: relative;
	z-index: 0;
}
#products .risotto {
	display: inline-block;
}
#products .risotto .wrapper .btn-box {
	position: absolute;
    bottom: 7%;
    right: 5%;
    width: 36%;
    padding-top: 30%;
    z-index: 2;
}
#products .risotto .wrapper .btn-box .arrow {
	display: none;
}
#products .risotto .wrapper .btn-box img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
#products h2 {
	position: absolute;
	top: 52px;
	left: 50%;
	margin-left: -126px;
	height: 98px;
	z-index: 2;
}
#products .arrow {
	top: 164px;
	left: 50%;
	margin-left: -17px;
}


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

	movie

----------------------------------------------------------------------------- */
#movie {
	overflow: hidden;
}
#movie .inner {
	margin: 0 auto;
	padding-top: 43.846153846%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#movie h2 {
	position: absolute;
    top: 77px;
    left: 92px;
    height: 98px;
	z-index: 2;
}
#movie .arrow {
	top: 190px;
    left: 170px;
}


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

	voice

----------------------------------------------------------------------------- */
#voice {
	overflow: hidden;
	margin-top: 29px;
}
#voice .inner {
	margin: 0 auto;
	padding-top: 43.846153846%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#voice h2 {
	position: absolute;
	top: 74px;
	left: 50%;
	margin-left: -77px;
	height: 100px;
	z-index: 2;
}
#voice .arrow {
	top: 188px;
	left: 50%;
	margin-left: -17px;
}

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

	event

----------------------------------------------------------------------------- */
#event {
	overflow: hidden;
	margin-top: 16px;
}
#event .inner {
	margin: 0 auto;
	padding-top: 45.2%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#event h2 {
	position: absolute;
    top: 65px;
    left: 50%;
    margin-left: -85px;
    height: 140px;
    z-index: 2;
}
#event .arrow {
	top: 220px;
	left: 50%;
	margin-left: -17px;
}



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

	diabetes

----------------------------------------------------------------------------- */
#diabetes {
	overflow: hidden;
	margin-top: 30px;
}
#diabetes .inner {
	margin: 0 auto;
	padding-top: 43.846153846%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#diabetes .subttl {
	position: absolute;
    top: 30px;
    left: 177px;
    width: 107px;
}
#diabetes h2 {
	position: absolute;
	top: 76px;
	left: 50%;
	margin-left: -123px;
	height: 152px;
	z-index: 2;
}




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

	sunaolife

----------------------------------------------------------------------------- */
#sunaolife {
	overflow: hidden;
	margin-top: 28px;
	margin-bottom: 46px;
}
#sunaolife .inner {
	margin: 0 auto;
	padding-top: 43.9%;
	width: 92%;
	height: 0;
	/* height: 360px; */
	position: relative;
	z-index: 0;
}
#sunaolife h2 {
	position: absolute;
	top: 60px;
	left: 50%;
	margin-left: -88px;
	height: 136px;
	z-index: 2;
}





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

	note

----------------------------------------------------------------------------- */
p.notes {
	font-size: 110%;
	line-height: 1.4;
	padding: 5% 4% 3%;
	background-color: #fff;
	/* text-indent: -1em; */
	/* margin-left: 1em; */
	letter-spacing: -1px;
}
p.notes:not(:first-of-type) {
	padding-top: 0;
}
p.notes:not(:last-of-type) {
	padding-bottom: 0;
}

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

	cpbnr

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

.cpbnr p{
	padding: 66px 0;
	text-align: center;
}
.cpbnr p a{
	display: inline-block;
}
.cpbnr p a img{
	width: 588px !important;
}
/* -----------------------------------------------------------------------------

	bnr_mumin

----------------------------------------------------------------------------- */
.bnr_area {
	padding: 50px 20px;
	box-sizing: border-box;
	background: url(../common/img/line_bnrArea.gif) repeat-x top center, #fff;
}
.bnr_area a {
	width: 100%;
	display: block;
	margin: 0 auto;
}
.bnr_area a img {
	width: 100%;
	height: auto;
}


}