@charset "utf-8";


/*===============================================*/
/*===============================================*/

/*=== header ===*/

#header			{ background-color:#facf0d; }
#header h1 img a:hover	{ opacity:0.7; filter:alpha(opacity=70); -ms-filter: "alpha( opacity=70 )"; background:none!important; }

#main				{ position:relative; display:block; width:980px; margin:0 auto; }
#main .mask			{ display:block; position:absolute; top:0; left:0; width:980px; height:330px; }
@media print { #main h1 img { display: none !important; } }






/*=== next ===*/
#next			{ background-color:#ffffff; padding:80px 0; }
#next h2		{ text-align:center; font-size:32px; letter-spacing:12px; line-height:110%; }
#next h2 .mini	{ font-size:16px; color:#a3a3a3; font-weight:normal; }
#next h3		{ font-size:20px; }

#next .movie	{ width:550px; margin:0 auto; padding:20px 0; display:block; }
#next .text		{ width:600px; margin:0 auto; padding:10px; }

#next .title-mini	{ text-align: center; }

#next ul	{ width:600px; margin:0 auto; }

#next .info	{ width:60%; margin:20px auto 0 auto; padding:20px; text-align:center; border-top:1px solid #f0be29; }
#next .info a		{ width:80%; margin:0 auto; display:block; text-align:center; padding:10px; border:solid 2px #f0be29; color:#f0be29;  }
#next .info a:hover	{ font-size:20px; font-weight:bold; letter-spacing:2px; transition:all 0.3s; }






/*=== shop_recipe ===*/
#shop_recipe	{ background-color:#000000; }
#shop_recipe h3	{ font-size:42px; color:#ffffff; letter-spacing:6px; line-height:110%; }
#shop_recipe h3 .mini	{ font-size:16px; font-weight:normal; }


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

#shop_recipe .link a	{ color:#ffffff;  border:solid 2px #ffffff; padding:10px; margin:10px; width:200px; display:block; }
#shop_recipe .link a:hover	{ font-size:20px; letter-spacing:2px; transition:all 0.3s; }

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

#shop_recipe .left	{ width:50%; height:400px; float:left; position: relative; }
#shop_recipe .shop	{ text-align:center; position:absolute; padding:20px; top:50%; left:50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

#shop_recipe .left		{ 
 background-image: url(//www.mbs.jp/mahou/images/shop.gif);
 -webkit-background-size: 100%;
 background-size: 100%;
 -webkit-animation: bgscroll 120s linear infinite;
 animation: bgscroll 120s linear infinite;
 }

@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -100%;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -100%;}
}

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


#shop_recipe .right 	{ width:50%; height:400px; float:left; position: relative; }
#shop_recipe .recipe	{ text-align:center; position:absolute; padding:20px; top:50%; left:50%;
	-webkit-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
}

#shop_recipe .right		{ 
 background-image: url(//www.mbs.jp/mahou/images/recipe.gif);
 -webkit-background-size: 100%;
 background-size: 100%;
 -webkit-animation: bgscroll 120s linear infinite;
 animation: bgscroll 120s linear infinite;
 }

@-webkit-keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -100%;}
}

@keyframes bgscroll {
 0% {background-position: 0 0;}
 100% {background-position: 0 -100%;}
}



/*=== fashion ===*/
#fashion 	{ background-color:#ffffff; padding:80px 0; font-size:14px; }
#fashion h3	{ width:430px; margin:0 auto; }
#fashion h4	{ text-align:center; padding-top:20px; }

#fashion p	{ text-align:center; font-size:16px; letter-spacing:4px; }

#fashion .mini		{ font-size:10px; text-align:center; display:block; }

#fashion .fashion		{ width:310px; text-align:center; margin:0 auto; float:left; padding:20px; background-color:#f0be29; box-shadow: 10px 10px #ffe8a5; }
#fashion .fashion li	{ padding-bottom:10px; line-height:140%; }


#fashion .info	{ width:900px; margin:0 auto; padding:20px 0; }
#fashion .left	{ width:500px; float:left; }
#fashion .right	{ width:400px; float:right; }


#fashion .link a		{ width:80%; margin:0 auto; display:block; text-align:center; padding:10px; border:solid 2px #f0be29; color:#f0be29;  }
#fashion .link a:hover	{ font-size:20px; font-weight:bold; letter-spacing:2px; transition:all 0.3s; }















/*=== present ===*/
#present	{ background-color:#c8000d; padding:80px 0; color:#ffffff; }

#present h2			{ text-align:center; font-size:32px; letter-spacing:12px; line-height:110%; }
#present h2 .mini	{ font-size:16px; font-weight:normal; }

#present h3		{ text-align:center; padding:20px 0; font-size:20px; letter-spacing:12px; }

#present .tel		{ display:block; font-size:32px; letter-spacing:8px; text-align:center; padding:20px 0; }
#present .deadline	{ line-height:240%; font-size:16px; }
/* padding-left:1em; text-indent:-1em; */

#present .attention	{ text-align:center; line-height:200%; }



/*=== content ===*/
#content	{ background-color:#f0be29; padding:80px 0; }
#content h3	{ font-size:42px; color:#000000; letter-spacing:6px; text-align:center; padding:20px 0; line-height:160%; }

#content ul	{ width:680px; margin:0 auto; }/* 900 */
#content li	{ width:185px; float:left; padding:20px; }
#content li img { width:100%; }

/*=== mobile ===*/
#mobile	{ width:800px; margin:0 auto; padding-top:20px; }

#mobile h4	{ text-align: center;
    font-size: 18px;
    letter-spacing: 4px; padding-bottom: 20px; }

#mobile dt		{ width:50%; float:left; }
#mobile dt img	{ width:75%; display:block; margin:0 auto; }
#mobile dd		{ width:50%; float:right; padding: 10px 0; }

#mobile dd a		{ width:80%; margin:0 auto; display:block; text-align:center; padding:10px; border:solid 2px #ffffff; color:#ffffff; }
#mobile dd a:hover	{ font-size:20px; font-weight:bold; letter-spacing:2px; transition:all 0.3s; }

#mobile .qr		{ text-align:center; }
#mobile .qr img	{ width:150px; }

#mobile .center	{ text-align:center; }


/*=== footer ===*/
#footer	{ background-color:#222222; }
#footer ul	{ width:800px; margin:0 auto; padding:40px 0; }
#footer li	{ width:350px; float:left; padding:25px; }







/*===============================================*/
/*===============================================*/
/*===============================================*/
/* ウィンドウ幅が0～479pxの場合に適用するCSS */
@media screen and (max-width: 750px) {

	.pc_no	{ display:inherit; }
	.sp_no	{ display:none; }


/*-----=== header ===*/
	#header	{  }


/*-----=== main ===*/
	#main		{ position:relative; display:block; width:100%; margin:0 auto; }
	#main .mask	{ display:block; position:absolute; top:0; left:0; width:100%; height:100%; }
	#main img	{ width:100%; }


/*-----=== next ===*/
	#next			{ padding:40px 0; }
	#next h2		{ font-size:24px; }
	#next h2 .mini	{ font-size:10px; }
	#next h3		{ font-size:18px; line-height:120%; }

	#next .movie		{ width:320px; margin:0 auto; padding:20px 0; display:block; }
	#next .movie img	{ width:100%; }

	#next ul	{ width:90%; margin:0 auto; }

	#next .oa	{ font-size:12px; }
	#next .text	{ width:90%; margin:0 auto; padding:10px; }/*font-size:12px; line-height:160%;*/

	#next .title-mini img	{ width:95%; margin:0 auto; }

	#next .info	{ width:90%; padding:10px; }



/*-----=== shop_recipe ===*/

	#shop_recipe h3			{ font-size:24px; }
	#shop_recipe h3 .mini	{ font-size:10px; }

	#shop_recipe .left	{ width:100%; height:280px; float:none; position:relative; }/* background-size:100%;  */
	#shop_recipe .right	{ width:100%; height:280px; float:none; position:relative; }


/*-----=== fashion ===*/
	#fashion		{ padding:40px 0; }
	#fashion h3		{ width:100%; margin:0 auto; }
	#fashion h3 img	{ width:80%; margin:0 auto; text-align: center;    display: block; }

	#fashion p	{ font-size:10px; padding:10px; }

	#fashion .info	{ width:100%; margin:0 auto; padding:0; }
	#fashion .left	{ width:80%; margin:0 auto; padding:10px; float:none; }
	#fashion .left img	{ width:100%; }

	#fashion .right	{ width:90%; margin:0 auto; float:none; padding:10px 0; }
	#fashion .right img	{ width:100%; }


/*	#fashion dl	{ width:100%; margin:0 auto; padding:0; }
	#fashion dt		{ width:80%; margin:0 auto; padding:10px; float:none; }
	#fashion dt img	{ width:100%; }
	#fashion dd		{ width:90%; margin:0 auto; float:none; padding:10px 0; }
	#fashion dd img	{ width:100%; }
*/

	#fashion ul	{ padding:10px; }

	#fashion .fashion		{ width:72%; text-align:center; margin:0 auto; float:none; padding:10px; background-color:#f0be29;
box-shadow: 10px 10px #ffe8a5; }
	#fashion .fashion li	{ padding-bottom:10px; }



/*-----=== content ===*/
	#content	{ padding:40px 0; }
	#content h3	{ font-size:24px; color:#000000; letter-spacing:6px; text-align:center; padding:20px 0; line-height:160%; }

	#content ul	{ width:90%; margin:0 auto; }
	#content li	{ width:29%; float:left; padding:2%; }/* 46 */
	#content li img { width:100%; }



/*-----=== mobile ===*/
	#mobile	{ width: 100%; }

	#mobile dt		{ float:none; width:100%; }
	#mobile dt img	{ width:75%; margin:0 auto; display:block; }
	#mobile dd		{ float:none; width:90%; margin:0 auto; font-size:14px; }


/*-----=== footer ===*/
	#footer ul	{ width:100%; }
	#footer li		{ width:80%; float:none; padding:10px; margin:0 auto; float:none; }
	#footer li img	{ width:100%; }



/*-----=== present ===*/
	#present	{ padding:40px 0; }
	#present h2			{ font-size:24px; }
	#present h2 .mini	{ font-size:10px; }

	#present h3		{ font-size:16px; padding:10px; letter-spacing:2px; }

	#present .tel		{ padding:10px; font-size:20px; letter-spacing:4px; }
	#present .deadline	{ font-size:10px; }
/* padding-left:1em; text-indent:-1em; */

	#present .attention	{ padding:10px; text-align:left; line-height:160%; font-size:12px; }

}



/*===============================================*/
/*===============================================*/

/*=== column ===*/

#mbs-colum		{ border-top:solid 10px #82d700; border-bottom:solid 5px #82d700; padding:40px 0 80px 0; }
#mbs-colum h3	{ text-align:center; }

#mbs-colum h4 img	{ width:80%; margin:0 auto; display:block; }

#column				{ width:800px; margin:0 auto; }
#column .head img	{ width:90%; margin:0 auto; display:block; }

#column .date	{ text-align:right; }

#column .img		{ width:680px; margin:0 auto; padding:10px 0 20px 0; }
#column .img img	{ width:100%; }

#column .link			{ padding-top:20px; }
#column .link a			{ width:30%; margin:0 auto; padding:10px; border:solid 2px #f0be29; color:#f0be29; text-align:center; display:block; } 
#column .link a:hover	{ font-size:20px; font-weight:bold; letter-spacing:2px; transition:all 0.3s; }


#column dl		{ width:800px; margin:0 auto; display:flex; }
#column dt		{ width:36%; padding:2%; }
#column dt img	{ width:100%; }
#column dd		{ width:60%; }
#column .txt	{ font-size:150%; font-weight:bold; padding:2% 0; line-height:140%; letter-spacing:4px; }



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

	#mbs-colum		{ padding:40px 0; }
	#mbs-colum h3		{ padding-bottom:10px; }
	#mbs-colum h3 img	{ width:40%; margin:0 auto; }

	#mbs-colum h4 img	{ width:100%; }


	#column		{ width:90%; }
	#column img	{ width:40%; margin:0 auto; }

	#column .date	{ font-size:90%; }

	#column .img		{ width:100%; margin:0; }

	#column .link a			{ width:50%; } 

	#column .summary	{ font-size:80%; padding-bottom:20px; }



	#column dl		{ width:90%; flex-direction:column; }
	#column dt		{ width:80%; margin:0 auto; padding:0%; }

	#column dd		{ width:90%; margin:0 auto; }
	#column .txt	{ font-size:120%; letter-spacing:4px; }



}



/*===============================================*/
/*===============================================*/
/*=====  AD  =====*/
#pagewrap .ad-pc		{ display:block; margin:0 auto; padding:80px 0; width:728px; height:90px; }

#pagewrap .ad-sp_top	{ display:none; }
#pagewrap .ad-sp_bottom	{ display:none; }

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

	#pagewrap .ad-pc		{ display:none; }

	#pagewrap .ad-sp_top	{ display:block; }
	#pagewrap .ad-sp_bottom { display:block; padding:40px 0; }


}