@charset "utf-8";

/*
============================================================
common.css
------------------------------------------------------------

■パンクズ
■右カラム


作成日：
作成者：
更新日：2016.08.03 中サイズを小サイズとマージ
更新者：inomata
バージョン： 1.0
会社名：Dynamite Brothers Syndicate

============================================================
*/

.disp_pc {
	display: block;
}

.disp_sp {
	display: none;
}

/* ---------------------------------------------------------
■パンクズ
--------------------------------------------------------- */
#pankuzu { margin-bottom:10px;}

#pankuzu li {
	display:inline-block;*display:inline;*zoom:1;
	margin-right: 2px; }

#pankuzu a {
	color: #a0a0a0;
	text-decoration:underline}

.txt_lightgray11 {
	color:#a0a0a0;
	font-size:68%; }



/* ---------------------------------------------------------
■コンテンツ　メイン
--------------------------------------------------------- */
#c_main {
	position: relative;
	overflow: hidden;
	width: 730px;
	height: 100%;
	zoom: 1;
	background-color: #ffffff;
	box-shadow: 0px 3px 5px #cccccc;
	-moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.1);
	-pie-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.1); }

#mainTitle {
	padding: 12px;
	border-bottom: 1px solid #a90a15; }

#mainTitle h2 {
	color: #a90a15; 
	font-size: 119%;
	font-weight: bold;
	line-height: 1.6; }

#mainTitle h2 span {
	padding-left: 10px; }

#mainTitle p {
	color: #646464;
	font-size: 69%;
	line-height: 15px; }

#howToMakeDetail .full p.makeOthers {
	width:352px;
}


/* チャート用　-2013.12.19 fujita */


.thumbspecial #main_img {
	position:relative;
	overflow:hidden;
	clear:both;
	margin:20px 0 10px 0;
	height:307px;
}

.thumbspecial #main_img img {
	margin:0;
	vertical-align:top;
}

.thumbspecial #main_img .main_img_in {
	float:left;
}

.thumbspecial #main_img .main_img_in img {
	margin:0;
	cursor:pointer;
}

.thumbspecial #main_img #load {
	position:absolute;
	width:100%;
	height:100%;
	background:url(../img/specialDetail/load.gif) center center no-repeat #ffffff;
	top:0;
	left:0;
}

.thumbspecial .imgtextbox {
	background:#f9f9f9;
	padding:10px;
	margin-top:15px;
	overflow:hidden;
	clear:both;
}

.thumbspecial .imgtextbox p {
	margin-top:0;
}

.thumbspecial .imgtextbox p span {
	font-weight: bold;
}

.thumbspecial .imgtextbox img {
	width:auto;
	margin:0 10px 0 0;
	float:left;
}



/* ---------------------------------------------------------
■右カラム
--------------------------------------------------------- */
#ssubmit {
	background: url(../../img/common/bg_recipe-search-btn-orange.jpg) no-repeat; }


/* ---------------------------------------------------------
■スクリーン　中⇒小サイズ
--------------------------------------------------------- */
@media screen and (max-width: 768px)
{

.disp_pc {
	display: none;
}

.disp_sp {
	display: block;
}

#c_main {
	position: relative;
	width: 418px; }


#howToMakeDetail .full p.makeOthers {
	width: 190px;
}

.thumbspecial #main_img img {
	width:394px;	
}

.thumbspecial #main_img .main_img_in,
.thumbspecial #main_img .main_img_in img {
	width:197px;
}

.thumbspecial #main_img .main_img_in img.q_1 {
	width:394px;	
}

.thumbspecial #main_img {
	height:178px;
}

.thumbspecial .imgtextbox img {
	width:auto;
}


/* ------------------------
	media screen 中⇒小 | END
/* ------------------------*/
}











/* ---------------------------------------------------------
■スクリーン　小サイズ
--------------------------------------------------------- */
@media screen and (max-width: 768px)
{
#c_main {
	position: relative;
	width: 300px; }
	
#mainTitle {
	height: auto;
	padding: 15px; }

#mainTitle h2 span {
	padding-left: 10px;
	font-size: 69%; }

#howToMakeDetail .full p.makeOthers {
	width:100%;
}


.thumbspecial #main_img img {
	width:280px;	
}

.thumbspecial #main_img .main_img_in,
.thumbspecial #main_img .main_img_in img {
	width:140px;
}

.thumbspecial #main_img .main_img_in img.q_1 {
	width:280px;	
}

.thumbspecial #main_img {
	height:126px;
}

.thumbspecial .imgtextbox img {
	width:80px;
}


/* ------------------------
	media screen 小 | END
/* ------------------------*/
}



