@charset "UTF-8";

@import url("/common/css/default.css");
@import url("/common/css/layout_contents.css");
@import url("/common/css/navi.css");

/* -------------------------
  font
------------------------- */
.yuMincho { font-family:YuMincho,'Yu Mincho',serif; }

/* -------------------------
  page_nav
------------------------- */
#page_nav { width:100%; height:auto; padding:12px 15px; background:url(/assets/img/products/machichuuka/index_brandBox_bg.jpg) center top; box-sizing:border-box; }
/*#bland_select { width:980px; height:auto; margin:15px auto 0 auto; position:relative; }*/
	#page_nav li { float:left; width:22%; text-align:center; }
	#page_nav li:first-child { width:12%; }
	#page_nav li .pageLinkBtn { width:100%; height:70px; margin:0 auto; background:url(/assets/img/products/machichuuka/nav/nav_off_bg.png) no-repeat center; background-size:100% 50px; position:relative; transition: all 0.3s; }
	#page_nav li .pageLinkBtn img { width:auto; height:70px; }
	#page_nav li .pageLinkBtn a { position:absolute; top:0; left:0; width:100%; height:100%; }
	#page_nav li .top:hover { background:url(/assets/img/products/machichuuka/nav/nav_on_top_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .tokeidai_on { background:url(/assets/img/products/machichuuka/nav/nav_on_tokeidai_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .tokeidai:hover { background:url(/assets/img/products/machichuuka/nav/nav_on_tokeidai_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .karamen_on { background:url(/assets/img/products/machichuuka/nav/nav_on_karamen_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .karamen:hover { background:url(/assets/img/products/machichuuka/nav/nav_on_karamen_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .mazesoba_on { background:url(/assets/img/products/machichuuka/nav/nav_on_mazesoba_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .mazesoba:hover { background:url(/assets/img/products/machichuuka/nav/nav_on_mazesoba_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .vege_chuuka_on { background:url(/assets/img/products/machichuuka/nav/nav_on_vege_chuuka_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .vege_chuuka:hover { background:url(/assets/img/products/machichuuka/nav/nav_on_vege_chuuka_bg.png) no-repeat center; background-size:100% 50px; }
	#page_nav li .pageLinkBtn a:hover img { transform:scale(1.04, 1.04); transition: all 0.3s; }


/* -------------------------
  localNav
------------------------- */
#localNav { float:left; width:200px; padding:0 0 50px 0; }
	#localNav img { max-width:100%; }
	#localNav ul { background:#fafafa; border-right:1px solid #d9d9d9; border-left:1px solid #d9d9d9; }
	#localNav li { text-align:center; border-bottom:1px dashed #d9d9d9; }
		#localNav li:last-child { border-bottom:1px solid #d9d9d9; }
		#localNav li .itemName { font-size:11px; line-height:1.3em; padding-top:15px; }
			#localNav li .itemName span.kakko { margin-left:-0.7em; }
		#localNav li .itemImg_wl { width:120px; height:auto; padding:8px 0 12px 0; }
		#localNav li .localNavBtn { width:102px; padding-bottom:15px; }
		#localNav ul li a { text-decoration:none; color:#4e4e4e; display:flex; flex-flow:column; align-items:center; }

		/*--ホバー設定--*/
		#localNav li:hover { cursor:pointer; }
			#localNav li:hover .itemName {
				filter:alpha(opacity=50);
    			-moz-opacity:0.5;
    			opacity:0.5; }
			#localNav li:hover img {
				filter:alpha(opacity=50);
    			-moz-opacity:0.5;
    			opacity:0.5; }


/* -------------------------
  サイドバー背景
------------------------- */
.brand_sidebar_bg {
	background-image: url(/common/img/bg_nv_sub.gif);
	background-position: 0 10px;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}


/* -------------------------
  fv_Area
------------------------- */
#fv_Area { width:100%; height:500px; background:url(/assets/img/products/machichuuka/fv_Area__bg.jpg) no-repeat center top; background-size:100% auto; position:relative; }
@media screen and (max-width: 769px) {
	#fv_Area {
		background-image:url(/assets/img/products/machichuuka/fv_Area__bg_sp.jpg);
		aspect-ratio: 750 / 488 !important;
	}
}
#fv_Area .fv_pkg {
	position: absolute;
	content: '';
	display: flex;
	align-items: end;
	justify-content:
	space-between;
	max-width: 702px;
	width: 100%;
	padding: 0 10px;
	bottom: 58px;
	left: 50%;
	transform: translateX(-50%);
}
#fv_Area .fv_pkg li:first-of-type,
#fv_Area .fv_pkg li:last-of-type {
	max-width: 158px;
}
#fv_Area .fv_pkg li:nth-child(2),
#fv_Area .fv_pkg li:nth-child(3) {
	max-width: 178px;
}
#fv_Area .fv_pkg li:not(:first-of-type) {
	 margin-left: 10px;
	}
#fv_Area .fv_pkg li img {
	width: 100% !important;
	height: auto !important;
	padding: 0 !important;
}
@media screen and (max-width: 809px) {
	#fv_Area .fv_pkg {
		bottom: 10px;
	}
}
@media screen and (max-width: 769px) {
	#fv_Area .fv_pkg {
		padding: 0 10px;
		bottom: 7vw;
	}
	#fv_Area .fv_pkg li:first-of-type,
	#fv_Area .fv_pkg li:last-of-type {
		max-width: 20.8vw;
	}
	#fv_Area .fv_pkg li:nth-child(2),
	#fv_Area .fv_pkg li:nth-child(3) {
		max-width: 23.2vw;
	}
	#fv_Area .fv_pkg li:not(:first-of-type) {
		margin-left: min(1.33vw, 5px);
	}
}
@media screen and (max-width: 701px) {
	#fv_Area .fv_pkg {
		padding: 0 4vw;
	}
}



/* -------------------------
  content
------------------------- */
#brandBox { width:980px; margin:13px auto 0 auto; }
#content { float:left; width:770px; margin:0 10px 0 0; padding:0 0 50px 0; }

	#content #brandInner { width:770px; background: #b1151e; background-size:100% auto; overflow:hidden; }
		#content #brandInner .container { width:100%; margin:0; padding:0; position:relative;  }
		#content #brandInner .wrap {width: 670px; margin:0 auto; padding:0; position:relative; box-sizing:border-box; }
			#content #brandInner #sec01 .wrap { padding-top:50px; padding-bottom:0px; }
			#content #brandInner #sec02 .wrap { padding-top:50px; padding-bottom: 30px; }
			#content #brandInner #sec03 .wrap { padding-top:0px; padding-bottom:50px; }
			#content #brandInner .inner { position:relative; display: flex; align-items: center; justify-content: space-between; margin-top: 30px; padding: 0 15px; gap: 24px;}
			@media screen and (max-width: 769px) {
				#content #brandInner .inner {
					display: block;
				}
			}

			#content #brandInner #sec02 .inner { display: block;}

		/*--ページ内リンク--*/
		#content #brandInner .lnaviBox { width:100%; height:auto;  padding: 27px; box-sizing:border-box; background:rgb(0,0,0,0.65); }
			#content #brandInner .lnaviBox li { float:left; width: 225px; height:auto; text-align:center; margin-right:20px; position:relative; }
				#content #brandInner .lnaviBox li:last-child { margin-right:0; }
				#content #brandInner .lnaviBox li img { max-width:100%; }

		/*--小見出し--*/
		#content #brandInner .secIcon { width:70px; position:absolute; top:-35px; left:50%; margin-left:-38px; z-index:2; }
		#content #brandInner h2 { text-align:center; width:100%; height:auto; margin:0; padding:0; position:relative; }
			#content #brandInner h2 img { width:670px; }

		/*--こだわり--*/
		#content #brandInner #sec01{
			background-image: url(/assets/img/products/machichuuka/blandInner_bg_01.png);
			background-position: 0 0;
			background-size: cover;
			background-repeat: no-repeat;
		}
		#content #brandInner #sec01 .img_wrap img { width: 286px; height: auto; }
		@media screen and (max-width: 809px) {
			#content #brandInner #sec01 .img_wrap img {
				max-width: none;
			}
		}
		@media screen and (max-width: 769px) {
			#content #brandInner #sec01 .img_wrap {
				margin-top: 30px;
				max-width: 335px;
				text-align: center;
			}
			#content #brandInner #sec01 .img_wrap img {
				width: 100%;
			}
		}

		#content #brandInner #sec01 h3 { width:100%; padding:0; margin:0; }
			#content #brandInner #sec01 h3 img { height:32px; }
		#content #brandInner #sec01 p { font-size:14px; color:#fff; font-weight:normal; font-feature-settings:"palt"; letter-spacing:0.05em; }
		#content #brandInner #sec01 p span { display: inline-block; border-bottom: 1px solid #fff; line-height: 1; }
			#content #brandInner #sec01 p.txt01 { padding:0px 0 20px 15px }
				#content #brandInner #sec01 p.txt01 sup { font-size:110%; vertical-align:-0.35em; }
			#content #brandInner #sec01 p.txt02 { padding:10px 0 0 35px }
		#content #brandInner #sec01 ul { padding-left:15px; margin-bottom: 17px;
			display:-webkit-box;
			display: block;
			display:-ms-box;
			display:-webkit-flexbox;
			display:-moz-flexbox;
			display:-ms-flexbox;
			display:-webkit-flex;
			display:-moz-flex;
			display:-ms-flex;
			display:flex;
				-webkit-box-lines:multiple;
				-moz-box-lines:multiple;
				-webkit-flex-wrap:wrap;
				-moz-flex-wrap:wrap;
				-ms-flex-wrap:wrap;
				flex-wrap:wrap; }
		#content #brandInner #sec01 li { float:left; }
			#content #brandInner #sec01 .liLeft { width:164px; position:relative; margin-top:12px; margin-right: 10px; }
				#content #brandInner #sec01 .liLeft img { max-width:100%; filter:drop-shadow(0px 6px 6px rgba(0,0,0,0.7));   }
			#content #brandInner #sec01 .liRight { width:164px; position:relative; margin-top:12px;}
				#content #brandInner #sec01 .liRight img { max-width:100%;  filter:drop-shadow(0px 6px 6px rgba(0,0,0,0.7)); }
			#content #brandInner #sec01 .liMiddle { width:calc(100% - 350px); margin-top:12px; }

		/*--作り方--*/
		#content #brandInner #sec02{
			background-image: url(/assets/img/products/machichuuka/blandInner_bg_02.png);
			background-position: 0 0px;
			background-size: cover;
			background-repeat: no-repeat;
		}
		#content #brandInner #sec02 p { font-size:14px; color:#fff; font-weight:normal; font-feature-settings:"palt"; letter-spacing:0.05em; }
		#content #brandInner #sec02 p span { display: inline-block; font-weight: bold; font-size: 16px; color: #FFE100; border-bottom: 1px solid #FFE100; line-height: 1; }
		#content #brandInner #sec02 .img_wrap {
			margin-top: 30px;
		}
		@media screen and (max-width: 769px) {
			#content #brandInner #sec02 .img_wrap {
				max-width: 335px;
			}
		}




		#content #brandInner #sec02 .makingBox { margin: 0 auto 20px auto; width: 100%; max-width:640px; height:145px;  background:#fff; box-sizing:border-box; position:relative; }
			#content #brandInner #sec02 .makingBox ul { width: 100%; max-width:640px; height:auto; position:relative; z-index:2;
				display:-webkit-box;
				display: block;
				display:-ms-box;
				display:-webkit-flexbox;
				display:-moz-flexbox;
				display:-ms-flexbox;
				display:-webkit-flex;
				display:-moz-flex;
				display:-ms-flex;
				display:flex;
					-webkit-box-lines:multiple;
					-moz-box-lines:multiple;
					-webkit-flex-wrap:wrap;
					-moz-flex-wrap:wrap;
					-ms-flex-wrap:wrap;
					flex-wrap:wrap; }
			#content #brandInner #sec02 .makingBox li { float:left; box-sizing:border-box; }
			#content #brandInner #sec02 .makingBox .liTle { width:100%; padding:0; }
				#content #brandInner #sec02 .makingBox .liTle img { max-width:100%; }
				#content #brandInner #sec02 .makingBox .liLeft { margin-top:11px; text-align:center; padding:0; border-right:1px solid #edc43e; }
					/*--ボックスごとの横幅指定--*/
					#content #brandInner #sec02 .liLeft{ width:200px; }
					/*--ボックスごとの画像サイズ指定--*/
					#content #brandInner #sec02 .makingBox .liLeft .making_img01 { width:170px; }
					#content #brandInner #sec02 .makingBox .liLeft .making_img02 { width:105px; margin-top: 9px;}
					#content #brandInner #sec02 .makingBox .liLeft .making_img03 { width:137px; }
					#content #brandInner #sec02 .makingBox .liLeft .making_img04 { width:128px; }
					#content #brandInner #sec02 .makingBox .liLeft .making_img05 { width:95px; }
				#content #brandInner #sec02 .makingBox .liRight { padding:0; }
					/*--ボックスごとの横幅指定--*/
					#content #brandInner #sec02 .makingBox01 .liRight { width:calc(100% - 200px); }
					#content #brandInner #sec02 .makingBox .liRight p { color:#000!important; font-feature-settings:"palt"; letter-spacing:0.05em; }
					#content #brandInner #sec02 .makingBox .liRight .making_txt { font-size:14px; line-height:1.2; padding-top: 10px; padding-right: 0px; margin-left:15px;}
					#content #brandInner #sec02 .makingBox .liRight .making_subtxt { font-size:12px; line-height:1.2; padding: 8px 10px; background: #fffbb6; margin :8px 0 0 15px; width: 374px;}
						#content #brandInner #sec02 .makingBox .liRight .making_txt .textRed{color: #c7000b;}
						/*--ボックスごとの画像サイズ指定--*/
						#content #brandInner #sec02 .makingBox01 .liRight .making_txt { padding-top:30px; }
						#content #brandInner #sec02 .makingBox02 .liRight .making_txt { padding-top:16px; }
						#content #brandInner #sec02 .makingBox03 .liRight .making_txt { padding-top:30px; }
						#content #brandInner #sec02 .makingBox04 .liRight .making_txt { padding-top:20px; }
						#content #brandInner #sec02 .makingBox05 .liRight .making_txt { padding-top:40px; }


		/*--商品ラインアップ--*/
		#content #brandInner #sec03{
			background-image: url(/assets/img/products/machichuuka/blandInner_bg_03.png);
			background-position: 0 -30px;
			background-size: cover;
			background-repeat: no-repeat;
		}
		#content #brandInner .productsList { width:100%; margin-top: 30px; }
			#content #brandInner .productsList { padding:0 80px; box-sizing:border-box;
				display:-webkit-box;
				display: block;
				display:-ms-box;
				display:-webkit-flexbox;
				display:-moz-flexbox;
				display:-ms-flexbox;
				display:-webkit-flex;
				display:-moz-flex;
				display:-ms-flex;
				display:flex;
					-webkit-box-lines:multiple;
					-moz-box-lines:multiple;
					-webkit-flex-wrap:wrap;
					-moz-flex-wrap:wrap;
					-ms-flex-wrap:wrap;
					flex-wrap:wrap; }

			#content #brandInner .productsList li { float:left; width:50%; padding:0 25px 0 25px; text-align:center; position:relative; box-sizing:border-box; }
			#content #brandInner .productsList li:nth-child(n+3) { margin-top: 30px; }
				#content #brandInner .productsList li .itemDescri { padding:8px 0 0 0; }
					#content #brandInner .productsList li .itemDescri h3 { width:100%; font-size:13px; line-height:1.4em; font-weight:normal; color:#fff; padding:0; }
					#content #brandInner .productsList li .itemDescri .txt { font-size:14px; line-height:1.6em; text-align:justify; text-justify:inter-ideograph; color:#fff; padding-top:10px; }
				#content #brandInner .productsList li a { text-decoration:none; }
				#content #brandInner .productsList li .pageLinkBtn { width:180px; margin:0 auto; background:#ee7700; border:2px solid #edc43e; border-radius:10px; margin-top:8px; box-sizing:border-box; }
					#content #brandInner .productsList li .pageLinkBtn p { color:#fff; font-size:14px; line-height:1.0em; font-weight:bold; padding: 9px 0; }
					@media screen and (max-width: 809px) {
						#content #brandInner .productsList {
							max-width: 480px;
							margin: 30px auto 0;
						}
						#content #brandInner .productsList li:nth-child(n+3) {
							margin-top: 0;
						}
					}

			@media not screen and (min-width: 810px) {
				[data-pagetype=brand] #content #brandInner .productsList li .itemDescri h3 {
					background: transparent !important;
					color: #fff !important;
				}
			}
			/*--商品画像--*/
			#content #brandInner .productsList img { width:184px; height:auto; padding:0 0 0 0; filter:drop-shadow(0px 6px 6px rgba(0,0,0,0.7)); }

			/*--ホバー設定--*/
			#content #brandInner .productsList li:hover .productsItem { transform:scale(1.04, 1.04); transition: all 0.3s; }
				#content #brandInner .productsList li:hover h3 { color:#ffff00; transform:scale(1.04, 1.04); transition: all 0.3s; }
			#content #brandInner .productsList li:hover .pageLinkBtn { background:#edc43e; border:2px solid #ffff00; }
				#content #brandInner .productsList li:hover .pageLinkBtn p { color:#000; }