@charset "utf-8";

/* ======================================================
 * home.css
 * ------------------------------------------------------
 * LAYOUT ***********************************************
 * Common
 * Body
 * Header
 * Contents
 * Footer
 * MODULE ***********************************************
 * Element
 * Component
 * MEDIA ************************************************
 * Responsive
 * - width <= 1920px
 * Smartphone
 * - width <= 736px
 * Print
 * Clearfix
====================================================== */

/********************************************************

  LAYOUT

********************************************************/

/* Common
------------------------------------------------------ */
/* hover */
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a:hover,
#recipeIndex > .content .recipeSlider .recipeList > li > .image a:hover img {
	opacity: 0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha(opacity=80)";
	zoom: 1;
}

/* sprite */
#newsIndex > .content .newsColumn > .importantNews > .important > a:before {
	content: "";
	display: inline-block;
	background-image: url(/common-files/img/cmn_sprite_ic01.png);
	background-repeat: no-repeat;
}
#newsIndex > .content .newsColumn > .importantNews > .important > a:before { width: 23px; height: 23px; background-position: -140px -280px; }

/* loading */
.visual_loading,
.lineup_loading,
.recipe_loading {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
	background: url(/common-files/img/cmn_loading_ic01.gif) no-repeat 50% 50%;
	text-indent: -9999px;
}


/* Body
------------------------------------------------------ */


/* Header
------------------------------------------------------ */


/* Contents
------------------------------------------------------ */
/* homeWrap */
[class^="homeWrap"] {
	clear: both;
}
[class^="homeWrap"] > *:first-child {
	margin-top: 0 !important;
}
.homeWrap01 {
}
.homeWrap02 {
	margin: -110px 0 0 0;
}
.homeWrap03 {
	background-color: #fff;
}
.homeWrap04 {
	padding: 40px 0 70px;
	background-color: #fff;
}


/* Footer
------------------------------------------------------ */
.footerWrap02 {
	display: none !important;
}



/********************************************************

  CONTENTS

********************************************************/

/* Element
------------------------------------------------------ */


/* Component
------------------------------------------------------ */
/* visualIndex */
#visualIndex {
	clear: both;
	position: relative;
	z-index: 99;
	height: 575px;
}
#visualIndex .visualList {
}
#visualIndex .visualList > li {
	height: 575px;
	background-repeat: no-repeat;
	background-position: 50% 0;
	text-indent: -9999px;
}

/* navIndex */
#navIndex {
	position: relative;
	z-index: 101;
	height: 575px;
	margin: -575px 0 0 0;
}
#navIndex .indBanner {
}
#navIndex .indBanner > li {
	position: absolute;
	left: 50%;
}
#navIndex .indBanner > li.bnr01 { top:   3px; margin-left: 176px; }
#navIndex .indBanner > li.bnr02 { top: 295px; margin-left: 176px; }
#navIndex .indBanner > li.bnr03 { top: 397px; margin-left: -502px; }


/* linupIndex */
#linupIndex {
	position: relative;
	z-index: 100;
	padding: 140px 0 70px;
	background: url(/img/home_lineup_bg01.png) no-repeat 50% 0;
	text-align: center;
}
#linupIndex > .heading {
	display: inline-block;
	margin: 0 0 0.25em 0;
	padding: 30px 0 0 0;
	background: url(/img/home_lineup_ti01.png) no-repeat 50% 0;
	font-size: 27px;
	font-size: 2.7rem;
	font-weight: bold;
}
#linupIndex > .content {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
}
#linupIndex > .content > *:first-child {
	margin-top: 0 !important;
}
#linupIndex > .content .lineupSlider {
	position: relative;
	width: 790px;
	margin: 0 auto;
}
#linupIndex > .content .lineupSlider .bx-wrapper {
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-viewport {
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls {
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager {
	clear: both;
	margin: 10px 0 0 0;
	text-align: center;
	letter-spacing: -0.4em;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item {
	display: inline-block;
	padding: 0 10px;
	vertical-align: top;
	letter-spacing: normal;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
	display: block;
	width: 18px;
	height: 18px;
	background: url(/common-files/img/cmn_slide_nv01.png) no-repeat 0 0;
	background-size: 18px 36px;
	text-indent: -9999px;
	outline: none;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active {
	background-position: 0 -18px;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a {
	position: absolute;
	top: 80px;
	display: block;
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: 0 0;
	text-indent: -9999px;
	outline: none;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a.bx-prev { left:  -80px; background-image: url(/common-files/img/cmn_slide_bt01.png); }
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a.bx-next { right: -80px; background-image: url(/common-files/img/cmn_slide_bt02.png); }
#linupIndex > .content .lineupSlider .lineupList {
}
#linupIndex > .content .lineupSlider .lineupList > li {
	float: left;
	width: 163px !important;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock {
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .image {
	display: table;
	width: 100%;
	background: url(/common-files/img/cmn_circle_bg01.png) no-repeat 50% 50%;
	text-align: center;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .image > span {
	display: table-cell;
	height: 163px;
	text-align: center;
	vertical-align: middle;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .image > span img {
	max-width: 163px;
	max-height: 163px;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .caption {
	margin: 0.5em 0 0 0;
	font-weight: bold;
	text-align: left;
}
#linupIndex > .content .lineupSlider .lineupList[class*="count"] {
	text-align: center;
	letter-spacing: -0.4em;
}
#linupIndex > .content .lineupSlider .lineupList[class*="count"] > li {
	float: none;
	display: inline-block;
	letter-spacing: normal;
}
#linupIndex > .content .lineupSlider .lineupList[class*="count"] > li + li {
	margin-left: 46px;
}
#linupIndex > .content .btnLink05 {
	margin-top: 20px;
}
#linupIndex > .content .btnLink05 > a {
	min-width: 400px;
	padding: 14px 40px 12px;
}
#linupIndex > .content .indBanner {
	margin: 30px 0 0 0;
}
#linupIndex > .content .indBanner > li {
	float: left;
	width: 32%;
}
#linupIndex > .content .indBanner > li + li {
	margin-left: 2%;
}
#linupIndex > .content .indBanner > li > a {
	display: block;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	    -ms-border-radius: 10px;
	     -o-border-radius: 10px;
	        border-radius: 10px;
	-webkit-box-shadow: 0px 3px 7px 0 rgba(92,85,45,0.1);
	   -moz-box-shadow: 0px 3px 7px 0 rgba(92,85,45,0.1);
	    -ms-box-shadow: 0px 3px 7px 0 rgba(92,85,45,0.1);
	     -o-box-shadow: 0px 3px 7px 0 rgba(92,85,45,0.1);
	        box-shadow: 0px 3px 7px 0 rgba(92,85,45,0.1);
}

/* recipeIndex */
#recipeIndex {
	clear: both;
	padding: 35px 0 70px;
	border-top: 3px solid #7b4919;
	background: url(/img/home_recipe_bg01.jpg) no-repeat 50% 0;
	text-align: center;
}
#recipeIndex > .heading {
	display: inline-block;
	margin: 0 0 0.25em 0;
	padding: 30px 0 0 0;
	background: url(/img/home_recipe_ti01.png) no-repeat 50% 0;
	font-size: 27px;
	font-size: 2.7rem;
	font-weight: bold;
}
#recipeIndex > .content {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
}
#recipeIndex > .content > *:first-child {
	margin-top: 0 !important;
}
#recipeIndex > .content .recipeSlider {
	position: relative;
}
#recipeIndex > .content .recipeSlider .bx-wrapper .bx-controls .bx-pager {
	clear: both;
	margin: 15px 0 0 0;
	text-align: center;
	letter-spacing: -0.4em;
}
#recipeIndex > .content .recipeSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item {
	display: inline-block;
	padding: 0 10px;
	vertical-align: top;
	letter-spacing: normal;
}
#recipeIndex > .content .recipeSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
	display: block;
	width: 18px;
	height: 18px;
	background: url(/common-files/img/cmn_slide_nv02.png) no-repeat 0 0;
	background-size: 18px 36px;
	text-indent: -9999px;
	outline: none;
}
#recipeIndex > .content .recipeSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active {
	background-position: 0 -18px;
}
#recipeIndex > .content .recipeSlider .recipeList {
}
#recipeIndex > .content .recipeSlider .recipeList > li {
	position: relative;
	float: left;
	width: 100%;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .product {
	position: absolute;
	right: 53px;
	top: 0;
	z-index: 2;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .image {
	padding: 10px 0 0 0;
	text-align: center;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption {
	position: absolute;
	left: 0;
	top: -15px;
	width: 290px;
	height: 274px;
	padding: 115px 0 0 0;
	background: url(/img/home_recipe_bg02.png) no-repeat 0 0;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .naming {
	padding: 0 40px;
	color: #7b4919;
	font-size: 21px;
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .link {
	margin: 20px 0 0 0;
	text-align: center;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .link > a {
	position: relative;
	display: inline-block;
	padding: 0 0 0 15px;
	font-weight: bold;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .link > a:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	display: block;
	width: 0;
	height: 0;
	margin: -4px 0 0 0;
	border-top: 4px solid transparent;
	border-right: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid #2f4798;
}
#recipeIndex > .content .btnLink01 {
	margin-top: 20px;
}
#recipeIndex > .content .btnLink01 a {
	min-width: 400px;
	padding: 14px 40px 12px;
}

/* newsIndex */
#newsIndex {
	clear: both;
	text-align: center;
}
#newsIndex > .heading {
	display: inline-block;
	margin: 0 0 0.25em 0;
	padding: 30px 0 0 0;
	background: url(/img/home_news_ti01.png) no-repeat 50% 0;
	font-size: 27px;
	font-size: 2.7rem;
	font-weight: bold;
}
#newsIndex > .content {
	width: 1000px;
	margin: 0 auto;
	text-align: left;
}
#newsIndex > .content > *:first-child {
	margin-top: 0 !important;
}
#newsIndex > .content .newsColumn {
}
#newsIndex > .content .newsColumn > .importantNews {
	float: left;
	display: table;
	width: 200px;
	margin: 0 30px 0 0;
	padding: 0 20px;
	-webkit-border-radius: 10px;
	   -moz-border-radius: 10px;
	    -ms-border-radius: 10px;
	     -o-border-radius: 10px;
	        border-radius: 10px;
	background-color: #eaedf8;
}
#newsIndex > .content .newsColumn > .importantNews > *:first-child {
	margin-top: 0 !important;
}
#newsIndex > .content .newsColumn > .importantNews > .important {
	display: table-cell;
	width: 100%;
	font-weight: bold;
	vertical-align: middle;
}
#newsIndex > .content .newsColumn > .importantNews > .important > a {
	position: relative;
	display: inline-block;
	padding: 0 0 0 32px;
}
#newsIndex > .content .newsColumn > .importantNews > .important > a:before {
	position: absolute;
	left: 0;
	top: 50%;
	margin: -12px 0 0 0;
}
#newsIndex > .content .newsColumn > .latestNews {
	overflow: hidden;
}
#newsIndex > .content .newsColumn > .latestNews > *:first-child {
	margin-top: 0 !important;
}
#newsIndex > .content .btnLink05 {
	margin-top: 30px;
}
#newsIndex > .content .btnLink05 a {
	min-width: 400px;
	padding: 14px 40px 12px;
	border: 1px solid #dddddd;
}



/********************************************************

  MEDIA

********************************************************/

/* Resposive
------------------------------------------------------ */
@media screen and (min-width: 1025px) and (max-width: 1920px) {
}
@media screen and (max-width: 1920px) {
}
@media screen and (max-width: 1536px) {
}
@media screen and (max-width: 1280px) {
}
@media screen and (max-width: 1080px) {
}


/* Tablet
------------------------------------------------------ */
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 800px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 736px) {
}


/* Smartphone
------------------------------------------------------ */
@media screen and (max-width: 667px) {

/* Common
------------------------------------------------------ */
#newsIndex > .content .newsColumn > .importantNews > .important > a:before {
	content: "";
	display: inline-block;
	background-image: url(/common-files/img/cmn_sprite_ic01@2x.png);
	background-repeat: no-repeat;
	background-size: 100px 200px;
}
#newsIndex > .content .newsColumn > .importantNews > .important > a:before { width: 18px; height: 18px; background-position: -50px -100px; }

	
/* Contents
------------------------------------------------------ */
.contentsWrap {
	margin-top: 0;
}

.homeWrap01 {
	background: url(/common-files/img/cmn_bg01.png) repeat 50% 0;
}
.homeWrap02 {
	margin: 0;
	background: url(/common-files/img/cmn_bg01.png) repeat 50% 0;
}
.homeWrap03 {
}
.homeWrap04 {
	padding: 20px 0 35px;
	background-color: #fff;
}


/* Component
------------------------------------------------------ */
#visualIndex {
	height: 237px;
	background-color: #fff;
}
#visualIndex .visualList {
}
#visualIndex .visualList > li {
	height: 237px;
	background-size: 750px auto;
}
#navIndex {
	height: auto;
	margin: -65px 0 0 0;
	padding: 0 10px;
}
#navIndex .indBanner {
	max-width: 355px;
	margin: 0 auto;
}
#navIndex .indBanner > li {
	position: static;
	text-align: center;
}
#navIndex .indBanner > li + li {
	margin-top: 10px;
}
#navIndex .indBanner > li.bnr01 { margin-left: 0; margin-right: -10px; }
#navIndex .indBanner > li.bnr02 { margin-left: 0; }
#navIndex .indBanner > li.bnr03 { margin-left: 0; }
#navIndex .indBanner > li:not(.bnr01) > a {
	display: block;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	    -ms-border-radius: 5px;
	     -o-border-radius: 5px;
	        border-radius: 5px;
	-webkit-box-shadow: 0 2px 2px 0 rgba(92,85,45,0.2);
	   -moz-box-shadow: 0 2px 2px 0 rgba(92,85,45,0.2);
	    -ms-box-shadow: 0 2px 2px 0 rgba(92,85,45,0.2);
	     -o-box-shadow: 0 2px 2px 0 rgba(92,85,45,0.2);
	        box-shadow: 0 2px 2px 0 rgba(92,85,45,0.2);
}
#linupIndex {
	padding: 45px 0 35px;
	background: url(/img/home_lineup_bg01@2x.png) no-repeat 50% 0;
	background-size: 672px auto;
}
#linupIndex > .heading {
	padding: 18px 0 0 0;
	background-size: 31px auto;
	font-size: 18px;
	font-size: 1.8rem;
}
#linupIndex > .content {
	width: 100%;
}
#linupIndex > .content .lineupSlider {
	width: 100%;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-viewport {
	max-width: 235px !important;
	margin: 0 auto !important;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager {
	margin: 12px 0 0 0;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
	width: 12px;
	height: 12px;
	background-size: 12px 24px;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active {
	background-position: 0 -12px;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a {
	top: 75px;
	width: 33px;
	height: 75px;
	margin: 0;
	background-size: auto 75px;
}
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a.bx-prev { left:  0; background-position: 0 0; background-image: url(/common-files/img/cmn_slide_bt01@2x.png); }
#linupIndex > .content .lineupSlider .bx-wrapper .bx-controls .bx-controls-direction > a.bx-next { right: 0; background-position: 100% 0; background-image: url(/common-files/img/cmn_slide_bt02@2x.png); }
#linupIndex > .content .lineupSlider .lineupList > li {
	width: 235px !important;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock {
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .image {
	background: url(/common-files/img/cmn_circle_bg03.png) no-repeat 50% 50%;
	background-size: auto 235px;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .image > span {
	height: 235px;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .image > span img {
	max-width: 235px;
	max-height: 235px;
}
#linupIndex > .content .lineupSlider .lineupList > li > .linkBlock > .caption {
	margin: 0.5em 0 0 0;
	font-weight: bold;
	text-align: left;
}
#linupIndex > .content .lineupSlider .lineupList[class*="count"] {
	text-align: center;
	letter-spacing: -0.4em;
}
#linupIndex > .content .lineupSlider .lineupList[class*="count"] > li {
	float: none;
	display: inline-block;
	letter-spacing: normal;
}
#linupIndex > .content .lineupSlider .lineupList[class*="count"] > li + li {
	margin-left: 0;
}
#linupIndex > .content .btnLink05 {
	margin: 15px 35px 0;
}
#linupIndex > .content .btnLink05 > a {
	width: 100%;
	min-width: 0;
	padding: 12px 15px 9px;
}
#linupIndex > .content .indBanner {
	margin: 15px 35px 0;
}
#recipeIndex {
	padding: 10px 0 35px;
	border-top: 2px solid #7b4919;
	background: url(/img/home_recipe_bg01@2x.jpg) no-repeat 50% 0;
	background-size: 750px auto;
}
#recipeIndex > .heading {
	padding: 18px 0 0 0;
	background-size: 31px auto;
	font-size: 18px;
	font-size: 1.8rem;
}
#recipeIndex > .content {
	width: 100%;
	margin: -55px 0 0 0;
}
#recipeIndex > .content .recipeSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link {
	width: 12px;
	height: 12px;
	background-size: 12px 24px;
}
#recipeIndex > .content .recipeSlider .bx-wrapper .bx-controls .bx-pager .bx-pager-item .bx-pager-link.active {
	background-position: 0 -12px;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .product {
	right: 20px;
	top: 0;
	text-align: right;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .product img {
	width: 50%;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .image {
	max-width: 256px;
	margin: 0 auto;
	padding: 55px 0 0 0;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption {
	position: static;
	width: auto;
	max-width: 256px;
	height: auto;
	margin: 7px auto 0;
	padding: 0;
	background: none;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .naming {
	font-size: 12px;
	font-size: 1.2rem;
	line-height: 1.25;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .link {
	margin: 10px 0 0 0;
}
#recipeIndex > .content .recipeSlider .recipeList > li > .caption > .link > a {
	padding: 0 0 0 8px;
}
#recipeIndex > .content .btnLink01 {
	margin: 15px 35px 0;
}
#recipeIndex > .content .btnLink01 a {
	width: 100%;
	min-width: 0;
	padding: 12px 15px 9px;
}
#newsIndex {
}
#newsIndex > .heading {
	padding: 18px 0 0 0;
	background-size: 31px auto;
	font-size: 18px;
	font-size: 1.8rem;
}
#newsIndex > .content {
	width: 100%;
}
#newsIndex > .content .newsColumn {
	padding: 0 10px;
}
#newsIndex > .content .newsColumn > .importantNews {
	float: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 10px;
	-webkit-border-radius: 5px;
	   -moz-border-radius: 5px;
	    -ms-border-radius: 5px;
	     -o-border-radius: 5px;
	        border-radius: 5px;
}
#newsIndex > .content .newsColumn > .importantNews > .important {
	display: block;
	font-size: 12px;
	font-size: 1.2rem;
}
#newsIndex > .content .newsColumn > .importantNews > .important > a {
	display: block;
	padding: 0 25px;
	text-align: center;
}
#newsIndex > .content .newsColumn > .importantNews > .important > a:before {
	position: absolute;
	left: 0;
	top: 50%;
	margin: -9px 0 0 0;
}
#newsIndex > .content .newsColumn > .latestNews {
	margin: 10px 0 0 0;
	overflow: visible;
}
#newsIndex > .content .btnLink05 {
	margin: 10px 25px 0;
}
#newsIndex > .content .btnLink05 a {
	width: 100%;
	min-width: 0;
	padding: 12px 15px 9px;
}

}
@media screen and (max-width: 568px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 414px) {
}
@media screen and (max-width: 375px) {
}
@media screen and (max-width: 320px) {
}


/* Print
------------------------------------------------------ */
@media print {
}



/* Clearfix
------------------------------------------------------ */
#linupIndex > .content .indBanner:after,
#newsIndex > .content .newsColumn:after {
	content: "";
	display: table;
	clear: both;
}
#linupIndex > .content .indBanner,
#newsIndex > .content .newsColumn {
	zoom: 1;
}