@charset "UTF-8";


/*================================================
 *  CSSリセット
 ================================================*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}


body {
	background-color: #000;
}

#contents {
	max-width: 1062px;
	width: 100%;
	
	margin: 0 auto;
}

#contents img {
	display: block;
	width: 100%;
}

.footbanner {
	max-width: 420px;
	margin: 0 auto;
	
	padding: 20px 0px;
}

.footbanner a img{
	width: 100%;
}


/*================================================
 *  ページトップへの戻り
 ================================================*/
 
.totop {
	position: fixed;
	bottom: 15px;
	right: 15px;
}
.totop a {
	display: block;
	text-decoration: none;
}
.totop img {
	background: #710000;
}
.totop img:hover {
	background: #900000;
}


/*================================================
 *  サイドタブ
 ================================================*/

.tab_ban {
	width: 60px;/* 最初に表示されるバナーの幅 */
	height: 250px;/* バナーの高さ */
	position: fixed !important;/* バナーを固定します */
	position: absolute;
	right: 0;/* 右から0pxの位置に指定 */
	
		/* 以下アニメーションの設定 */
	-webkit-transition: width ease-in-out 0.5s;
	-moz-transition: width ease-in-out 0.5s;
	-ms-transition: width ease-in-out 0.5s;
	-o-transition: width ease-in-out 0.5s;
	transition: width ease-in-out 0.5s;
}

.tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */
	display: block;
	width: 100%;
	height: 100%;
}

.tab_ban:hover {/* カーソルが乗った時の動きを指定 */
	width: 250px;/* バナーが伸びた時の幅 */

}

.tab_ban a:hover {
	/* IE9用 */
	width: 50px\9;
}

#tab_keifuku {
	background: url(../img/tab_keifuku.png) 0 0 no-repeat;
	top: 200px;
}

#tab_senfuji {
	background: url(../img/tab_senfuji.png) 0 0 no-repeat;
	top: 200px;
}

#tab_omoiyari {
	background: url(../img/tab_omoiyari.png) 0 0 no-repeat;
	top: 200px;
}

#tab_omotenashi {
	background: url(../img/tab_omotenashi.png) 0 0 no-repeat;
	top: 200px;
}

#tab_fukujusen {
	background: url(../img/tab_fukujusen.png) 0 0 no-repeat;
	top: 200px;
}

#tab_shukukasen {
	background: url(../img/tab_shukukasen.png) 0 0 no-repeat;
	top: 200px;
}

#tab_hanasenju {
	background: url(../img/tab_hanasenju.png) 0 0 no-repeat;
	top: 200px;
}

#tab_kinsenka {
	background: url(../img/tab_kinsenka.png) 0 0 no-repeat;
	top: 200px;
}

#tab_maisen {
	background: url(../img/tab_maisen.png) 0 0 no-repeat;
	top: 200px;
}

#tab_wayou {
	background: url(../img/tab_wayou.png) 0 0 no-repeat;
	top: 200px;
}


/*
	2018原産国等一覧	
*/

.signage {
	width: 70%;
	font-size: 180%;
	text-align: center;
	color: #fff ;
	background: #ff6600;
	margin: 0 auto;
	padding: 10px 5px 5px 5px;
	border-radius: 3px ;
}

.osechi_title {
	text-align: center;
	font-size:150%;
	color:#fff;
}

.item_list {
	width: 100%;
	line-height: 1.6;
	border-collapse: collapse;
	background: #fff;
}

.item_list td,
.item_list th {
	padding: 10px;
	border: 1px solid #ccc;
	background: #fff;
}

.item_list thead th,
.item_list tbody th {
	background: #f4f4f4;
	font-weight: bold;
	vertical-align: middle;
}

@media only screen and (max-width:420px) {
	#contents {
		box-sizing: border-box;
		padding: 0 10px;
	}

	.item_list {
		width: 100%;
		margin: 0 auto;
	}
	.item_list thead {
		display: none;
	}
	.item_list tbody tr {
		display: block;
		margin-bottom: 10px;
	}
	.item_list tbody th {
		display: block;
		border-style: solid none;
	}
	.item_list tbody td {
		display: list-item;
		width: 80%;
		border: none;
		
		margin: 0 10%;
	}
	
	.item_list tbody td:nth-of-type(1):before { content: "[原材料名]\A"; white-space: pre; }
	.item_list tbody td:nth-of-type(2):before { content: "[原料原産地]\A"; white-space: pre; }
	.item_list tbody td:nth-of-type(3):before { content: "[アレルゲン]\A"; white-space: pre; }
	.item_list tbody td:nth-of-type(4):before { content: "[添加物]\A"; white-space: pre; }
}