@charset "UTF-8";
/* CSS Document */

/* =====================================================================
*    0.   Common Item
*    1.   Snack : item list
*    1.2. Karamucho
*    2.   TVCM : Gallery
*    2.1. TVCM : Player
* =================================================================== */

/* =====================================================================
*
*    0.   Common Item
*
* =================================================================== */

.footstamp      { height: 27px; padding: 3px 0 0 25px;}
.footstamp li   { float: left;}
.footstamp span { color: #666666;}

.pennant {
	color:#666;
	padding:5px;
	line-height:100%;
	border-bottom:#CCC dotted 1px;
	margin-bottom:10px;
	text-align:right;}

/* =====================================================================
*
*    1. Snack : item list
*
* =================================================================== */

.content-foot           { padding-bottom: 14px; background: url(../images/bg-content-foot.gif) left bottom no-repeat;}
.content-head           { width: 770px; height: 80px !important; background: url(../images/bg-content-head.gif) 0 0 no-repeat;}
.snack .content-head h1 { width: 556px; height: 22px; padding: 25px 0 0 24px; float: left;}
.snack .content-head p  { width: 124px; padding: 25px 22px 5px 0; float: right;}
	ul.lnavi-snack      { width: 720px; border: 1px solid #000000; border: 0; padding: 8px 25px 0; float: left;}
	ul.lnavi-snack li   { float: left; line-height: 0em;}
.content-body           { border-left: 1px solid #E2E0D8; border-right: 1px solid #E2E0D8; padding: 0 9px; background: #FFFEF9;}
	p.pagetop-area      { width: 102px; height: 16px; padding: 11px 0 0 648px;}

/* ---------------------------------
*    accordion    */

#accordion { width: 750px;}

.ac-contents                     { width: 750px; margin: 0 0 0 0; overflow: hidden;}
	#accordion .header           { width: 750px; height: 80px; overflow: hidden; margin: 10px 0 0 0; background: 0 -160px no-repeat; cursor: pointer; background-image: url(../images/list-item/header_bg.jpg);}
	#accordion .selected .header { background-position: 0 0; }
	#accordion .minus            { background-position: -750px -160px; }
		#accordion .header .cont { padding: 4px;}
		#accordion .header h2    { width: 127px; padding: 8px 0 0 29px; float: left; font-size: 100%; font-weight: bold; color: #333333;}
		#accordion .logoBox      { float: left;}
			#ac-potatochips .logoBox     { width: 184px; padding-top: 3px; }
			#ac-karamucho .logoBox     { width: 181px; padding: 3px 0 0 3px; }
			#ac-suppamucho .logoBox     { width: 145px; padding: 4px 0px 0 39px; }
			#ac-mayo .logoBox     {  }
			#ac-gankoage_item .logoBox     { width: 181px; padding: 3px 0 0 3px; }
			#ac-exochips_item .logoBox     { width: 181px; padding: 3px 0 0 3px; }
			#ac-poterican_item .logoBox     { width: 165px; padding: 3px 0 0 15px; }
			#ac-scorn .logoBox     { width: 176px; padding: 13px 0 0 8px; }
			#ac-dontacos .logoBox     { width: 179px; padding: 6px 0 0 5px; }
			#ac-tortilla_item .logoBox     { width: 181px; padding: 3px 0 0 3px; }
			#ac-tortilla .logoBox     { width: 181px; padding: 3px 0 0 3px; }
			#ac-polinky .logoBox     { width: 177px; padding: 6px 0 0 7px; }
			#ac-waimo .logoBox     { width: 181px; padding: 3px 0 0 3px; }
			#ac-popnow .logoBox     { width: 173px; padding: 8px 0 0 11px; }
			#ac-chibinowaitem .logoBox     { width: 134px; padding:0; }
			#ac-uniqueproject .logoBox     { width: 166px; padding: 10px 0 0 18px; }
			#ac-potenoneitem .logoBox     { width: 134px; padding:0; }
			#ac-nonfryitem .logoBox     { width: 134px; padding:0 25px 0 0; }
			#ac-limiteditem .logoBox     { width: 173px; padding: 8px 0 0 11px; }

		#accordion .thumbBox     { width: 320px; padding-top: 6px; float: left;}

/* ---------------------------------
*    .itemList    */

.itemList                { display: none; width: 736px; padding: 7px 7px 0;}
	.itemList p.subttl   { width: 711px; height: 33px; padding: 7px 0 0 25px; background: url(../images/list-item/bg-subttl.gif) 0 0 no-repeat; color: #FFFFFF; font-size: 100%; text-shadow: 0 2px #000000;}
	.itemList ul         { width: 736px; background: url(../images/list-item/bg-tile.gif) 0 0 repeat;}
		.tbox            { float: left; width: 184px; height: 190px; overflow: hidden; background: url(../images/list-item/tile_bg.jpg) no-repeat;}
		.tbox .thumbCont { height: 150px; padding: 13px 0 0 37px; background: url(../images/list-item/loading.gif) center center no-repeat;}
		.tbox h3         { position: relative; z-index: 50; width: 184px; height: 48px; margin-top: -21px; text-align: center; line-height: 1.3em;}
			* html .tbox h3 { position: static; }
			*:first-child+html h3 { position: static; }
		.tbox p.mark-ltd { position: relative; z-index: 50; width: 70px; margin: -187px 0 0 110px;}
			* html .tbox .tbox p.mark-ltd { position: static; }
			*:first-child+html .tbox p.mark-ltd { position: static; }

/* =====================================================================
*
*    1.2. Karamucho
*
* =================================================================== */
.head-img              { padding: 10px 0 0;}
.karamucho .snack-base { padding-bottom: 10px; background: url(../images/snack-base-foot.gif) bottom left no-repeat; background-color: #CC0000;}
.snack-bnr-area        { padding: 0 5px;}
	.snack-bnr-area li { float: left; padding: 0 5px;}
.sep-line              { height: 10px;}
.item-unit-foot                   { margin: 0 10px; padding: 10px 0; background: url(../images/item-unit-foot.gif) bottom left no-repeat;}
.item-unit-head                   { padding-top: 10px; background: url(../images/item-unit-head.gif) 0 0 no-repeat;}
.item-unit                        { padding: 10px 20px 10px 17px; background: #FFFFFF;}
.item-unit h2                     { padding: 0 0 0 6px; line-height: 1.3em;}
	.snack-data                   { padding-top: 15px;}
		.snack-databox            { width: 440px; float: right;}
		.snack-databox h3         { line-height: 1.6em;}
		.snack-databox p          { border-bottom: 1px solid #C1BEB6; padding: 17px 3px 0;}
		.snack-databox p b        { font-weight: bold; line-height: 1.4em;}
		.snack-databox blockquote { line-height: 1.8em;}
		.snack-databox div.allergie-box      { width: 440px; border-bottom: 1px solid #C1BEB6; padding: 17px 3px 0;}
			.snack-databox p.allergie-ttl    { width: 237px; border: none; padding: 0; float: left;}
			.snack-databox p.update-box      { width: 197px; border: none; padding: 0; float: right; text-align: right;}
			.snack-databox p.update-box span { letter-spacing: 0; line-height: 1.2em;}
		.snack-databox dt         { float: left; font-weight: bold;}
		.snack-databox dd         { float: left;}
		.snack-databox p.detail   { width: 70px; border: none; padding: 0 0 0 370px;}
	.item-info                    { width: 700px; margin: 0 -5px 0 -2px; background: url(../images/bg-item-info.gif) 5px 174px no-repeat;}
		.item-info dl             { width: 130px; padding: 0 5px; float: left;}
		.item-info dt             { height: 144px; padding: 20px 0 10px; text-align: center;}
		.item-info dd             { padding-top: 4px; text-align: center; line-height: 1.4em;}
	.list-comp                    { padding-left: 3px;}
		.list-comp p              { padding: 17px 3px 0;}
		.list-comp table          { width: 100%;}
		.list-comp tr.zebra       { background: #ECF6F7;}
		.list-comp th             { height: 10px; border: 1px solid #E2E0D8; padding: 7px 0 8px 20px; background: #F9F6EC;}
		.list-comp td             { height: 24px; border: 1px solid #E2E0D8; padding: 1px 0 0 20px;}
	p.backtolist                  { padding: 20px 0 0 279px;}

/* =====================================================================
*
*    2.   TVCM : Gallery
*
* =================================================================== */

/*TVCM common*/
.tvcm .content-head    { width: 770px; height: 80px !important; background: url(../../tvcm/images/bg-content-head.gif) 0 0 no-repeat;}
.tvcm .content-head h1 { width: 556px; height: 22px; padding: 25px 0 0 24px; float: left;}

.subttl-area h2 { padding: 15px 0 0 15px;}
.subttl-area p  { padding: 5px 0 10px 18px; color: #331E15; font-weight: bold;}

.tvcm-head { padding-top: 15px; background: url(../../tvcm/images/tvcm-base-head.gif) top left no-repeat;}
.tvcm-foot { padding: 0 10px 15px; background: url(../../tvcm/images/tvcm-base-foot.gif) bottom left no-repeat; background-color: #4C2F2E;}
.tvcm-body { height: 722px; padding: 15px 20px 0; background: url(../../tvcm/images/bg-player.gif) 20px 15px no-repeat; background-color: #FFFFFF;}

.flow-bnr-area { padding: 42px 20px 15px; background: url(../images/bar-separate.gif) 20px 0 no-repeat; background-color: #FFFFFF;}

/*TVCM gallery*/

.flash-notice         { border-right: 10px solid #4C2F2E; border-left: 10px solid #4C2F2E; padding: 15px 20px; background-color: #FFFFFF;}
.flash-notice a       { text-decoration: underline;}
.flash-notice a:hover { text-decoration: none;}

.area-icon-desc    { height: 29px; border: 1px solid #000000; border: 0; padding: 0 20px 0 132px; background: url(../../tvcm/images/bg-icon-desc.gif) 20px 0 no-repeat; background-color: #FFFFFF;}
.area-icon-desc p  { height: 26px; padding-top: 3px; float: left; font-size:  77%; font-weight: bold;}
.area-icon-desc dl { width: 480px; height: 29px; border: 1px solid #000000; border: 0; float: left;}
.area-icon-desc dt { height: 24px; padding: 5px 0 0 22px; background: url(../../tvcm/images/icon-desc-separate.gif) 0 0 no-repeat; float: left; line-height: 0em;}
.area-icon-desc dd { height: 26px; padding: 3px 0 0 6px; float: left; font-size:  77%;}
.area-icon-desc dt.special { padding-left: 12px; background: none;}


/* =====================================================================
*
*    2.1. TVCM : Player
*
* =================================================================== */
.series01 { width: 455px; height: 545px; float: left;}
.series02 { width: 225px; height: 545px; float: right;}
.series03 { width: 690px; height: 175px; float: left;}
.series01 li,
.series02 li,
.series03 li { width: 205px; height: 140px; float: left;}
.series01 li.people01 { padding: 2px 0 0 10px; background: url(../../tvcm/images/bg-people01.gif) 10px 2px no-repeat;}
.series01 li.people02 { padding: 2px 0 0 25px; background: url(../../tvcm/images/bg-people02.gif) 25px 2px no-repeat;}
.series01 li.people03 { width: 435px; padding: 40px 0 0 10px; background: url(../../tvcm/images/bg-people03.gif) 10px 40px no-repeat;}
.series01 li.people04 { padding: 40px 0 0 10px; background: url(../../tvcm/images/bg-people04.gif) 10px 40px no-repeat;}
.series01 li.people05 { padding: 40px 0 0 25px; background: url(../../tvcm/images/bg-people05.gif) 25px 40px no-repeat;}
.series02 li.people06 { padding: 2px 0 0 10px; background: url(../../tvcm/images/bg-people06.gif) 10px 2px no-repeat;}
.series02 li.people07 { padding: 40px 0 0 10px; background: url(../../tvcm/images/bg-people07.gif) 10px 40px no-repeat;}
.series02 li.people08 { padding: 40px 0 0 10px; background: url(../../tvcm/images/bg-people08.gif) 10px 40px no-repeat;}
.series03 li.people09 { padding: 2px 0 0 10px; background: url(../../tvcm/images/bg-people09.gif) 10px 2px no-repeat;}
.series03 li.people10 { padding: 2px 0 0 25px; background: url(../../tvcm/images/bg-people10.gif) 25px 2px no-repeat;}
.series03 li.people11 { padding: 2px 0 0 30px; background: url(../../tvcm/images/bg-people11.gif) 30px 2px no-repeat;}
.series01 dl,
.series02 dl,
.series03 dl { position: relative;}
.series01 dt { padding: 5px 0 0 5px;}
.series02 dt { padding: 5px 0 0 105px;}
.series03 dt { padding: 5px 0 0 5px;}
.series03 li.people11 dt { padding: 5px 0 0 105px;}
.series01 dd,
.series02 dd,
.series03 dd { position: absolute; top: 0; left: 0;}
	*html .series01 dd,
	*html .series03 dd { position: absolute; top: 0; left: -5px;}
	*html .series02 dd { position: absolute; top: 0; left: -105px;}
	*html .series03 li.people11 dd { position: absolute; top: 0; left: -105px;}
.series01 dd a,
.series02 dd a,
.series03 dd a { width: 205px; height: 140px; display: block;}
.series01 dd a img { padding: 100px 10px 14px 110px;}
.series02 dd a img { padding: 100px 111px 14px 9px;}
.series03 dd a img { padding: 100px 10px 14px 110px;}
.series01 li.people03 dd a { width: 435px; height: 140px; display: block;}
.series01 li.people03 dd a img { padding: 100px 10px 14px 240px;}
.series03 li.people11 dd a img { padding: 100px 111px 14px 9px;}

/* modal window */
.player-wrapper            { width: 690px; padding: 30px; background: #F9F6EC;}
.player-img-area           { width: 340px; float: left;}
.player-list-area          { width: 350px; float: right;}
.player-list-area dl       { padding-left: 15px;}
.player-list-area dt       { width: 100px; float: left; font-weight: bold; font-size: 92%;}
.player-list-area dd       { width: 220px; float: left; font-size: 92%;}
.player-list-area dd.coron { width: 15px; font-weight: bold;}
.player-list-area a        { text-decoration: underline;}
.player-list-area a:hover  { text-decoration: none;}