@charset "utf-8";

/*------------------------------------------------------------------------------
 RESET
 -------------------------------------------------------------------------------*/
body, div, p,  ul, ol, li, dl, dt, dd, table, th ,td, img,
h1, h2, h3 ,h4 ,h5, h6, form, select {
	margin: 0;
	padding: 0;
}

ul, ol					{ list-style: none; }
img						{ border: 0; vertical-align: bottom; }
table					{ border-spacing: 0; }
input,select			{ vertical-align: middle; }
body,input,selectarea	{ line-height:1.41; font-size:12px; }
h1, h2, h3, h4, h5, h6	{ font-size: 12px; }

/*------------------------------------------------------------------------------
 ANCHORS
 -------------------------------------------------------------------------------*/ 
a:link, a:visited {
	color: #ff3333;
	/*text-decoration: none;*/
}

a:hover, a:active {
	color: #ff3333;
	/*text-decoration: none;*/
}

/*------------------------------------------------------------------------------
 FONTS
 -------------------------------------------------------------------------------*/
body, input, select, textarea, table, th, td, li ,a {
	font-family: Arial,'ＭＳ Ｐゴシック','MS P Gothic','メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',sans-serif,Helvetica; 
}

body, input, select, textarea {
	font-size: 12px;
	*font-size: 75%;
	color: #505050;
	line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
}

strong, em {
	font-style: normal;
	font-weight: bold;
} 

/*------------------------------------------------------------------------------
 BODY
 -------------------------------------------------------------------------------*/
html { overflow-y: scroll; }
 
/*------------------------------------------------------------------------------
 CSS SPRITE
 -------------------------------------------------------------------------------*/
.cS {
	background-image: url(../img/sprite/c.png);
	background-repeat: no-repeat;
}

.icnRecipe {
	background-position: -987px 3px;
	padding-left: 17px;
}

.icnNumber {
	background-position: -985px -98px;
	padding-left: 17px;
}

.icnMobile {
	background-position: -986px -197px;
	padding-left: 17px;
}
.icnNote {
	background-position: -984px -300px;
	padding-left: 17px;
}
.icnComposition {
	background-position: -985px -399px;
	padding-left: 17px;
}
.icnQuestion {
	background-position: -988px -498px;
	padding-left: 17px;
}

/*------------------------------------------------------------------------------
 WRAPPER
 -------------------------------------------------------------------------------*/
.wrapper {
	width: 800px;
	margin: 0 auto;
} 

/*------------------------------------------------------------------------------
 HEADER
 -------------------------------------------------------------------------------*/
.header {
	width: 800px;
}

.headerBg {
	display: block;
	width: 800px;
	height: 10px;
	background-position: 0 -100px;
	font-size: 0px;
} 

.logo {
	display: block;
	width: 219px;
	height: 84px;
	margin-top: 10px;
	background-position: 0 0;
}

/*------------------------------------------------------------------------------
 MAIN IMAGE
 -------------------------------------------------------------------------------*/
.mainImage {
	width: 801px;
	height: 384px;
	margin: 15px auto 0;
	border: 3px solid #997A33;
	background-image: url("../img/mobile.jpg")
}

.mainImageTitle {
	display: block;
	width: 447px;
	height: 120px;
	background-position: 0 -160px;
}

.mobile {
	position: absolute;
	left: 28px;
	bottom: 0;
}

.recipe {
	position: absolute;
	right: 140px;
	bottom: 0;
}

/*------------------------------------------------------------------------------
 CONTENTS
 -------------------------------------------------------------------------------*/
.contents {
	width: 800px;
	margin-top: 20px;
}
 
.titleBg {
	display: block;
	width: 780px;
	height: 25px;
	padding: 3px 10px 0;
	background-position: 0 -120px;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
}

.box {
	width: 768px;
	padding: 15px;
	border: 1px solid #F09788;	
	background-color: #F9F2D6;
}

.box2 {
	width: 768px;
	padding: 15px;
	border: 1px solid #ffffff;	
	background-color: #ffffff;
	background-image: url("../img/b1.gif");
}

.box3 {
	width: 768px;
	padding: 15px;
	border: 1px solid #ffffff;	
	background-color: #ffffff;
}

h3 {
	border-left: 4px solid #F09788;
	color: #333333;
	font-size: 14px;
	font-weight: bold;
	padding-left: 5px;
} 

table.digicon {
	margin: 30px auto 0px auto;
	border-left: 1px solid #BD8D1C;
	border-top: 1px solid #BD8D1C;
}

table.digicon th {
	padding: 10px;
	color: #ffffff;
	background-color: #cc9922;
	border-right: 1px solid #BD8D1C;
	border-bottom: 1px solid #BD8D1C;
}
table.digicon td {
	padding: 10px;
	border-right: 1px solid #BD8D1C;
	border-bottom: 1px solid #BD8D1C;
}

/*SNSリンク用CSS 2012.11.30*/
#sns{
	height: 25px;
	width: 580px;
	padding-top: 70px;
	float: left;
	position: relative;
}

#sns li{
	float: right;
	height: 25px;
}

.t_logo{
	width: 100px;
	height: 39px;
	position: absolute;
	top: 10px;
	right: 10px;
}

/*------------------------------------------------------------------------------
 FOOTER
 -------------------------------------------------------------------------------*/
.footer {
	width: 800px;
	margin-top: 60px;
	padding-top: 5px;
	border-top: 1px solid #BD8D1C;
}

.copyright {
	height: 30px;
	text-align: right;
}

.footerBg {
	display: block;
	width: 800px;
	height: 10px;
	background-position: 0 -100px;
} 
  
/*------------------------------------------------------------------------------
 GENERAL CLASSESiSIZE & MARGINj
 -------------------------------------------------------------------------------
 [width]
   w + [] = width:px
   wf = width:100%
 [height]
   h + [] = height:px
   hf = height:100%
 }[W[margin]
   m + [t/b/l/r] + [] = margin-[top/bottom/left/right]:px
    mt10 = margin-top: 10px
    mb10 = margin-bottom: 10px
    ml10 = margin-left: 10px
    mr10 = margin-right: 10px
   mhaimargin horizon autoj ubNvf̒
    폜\bac
 pbfBO[padding]
   p + [t/b/l/r] + [] = padding-[top/bottom/left/right]:px
    pt10 = padding-top: 10px
    pb10 = padding-bottom: 10px
    pl10 = padding-left: 10px
    pr10 = padding-right: 10px
   pv + [] = padding-top & padding-bottom:px
   ph + [] = padding-left & padding-right:px
   p + [] = padding:px
 -------------------------------------------------------------------------------*/
/* WIDTH */
.wf			{ width: 100%; }
.w550		{ width: 550px; }
.w431		{ width: 431px; }
.w447		{ width: 447px; }
.w320		{ width: 320px; }
.w256		{ width: 256px; }
.w240		{ width: 240px; }
.w220		{ width: 220px; }
.w200		{ width: 200px; }
/* HEIGHT */
.hf			{ height: 100%; }
/* MARGIN */
.mt1		{ margin-top: 1px; }
.mt2		{ margin-top: 2px; }
.mt3		{ margin-top: 3px; }
.mt4		{ margin-top: 4px; }
.mt5		{ margin-top: 5px; }
.mt6		{ margin-top: 6px; }
.mt7		{ margin-top: 7px; }
.mt8		{ margin-top: 8px; }
.mt9		{ margin-top: 9px; }
.mt10		{ margin-top: 10px; }
.mt11		{ margin-top: 11px; }
.mt15		{ margin-top: 15px; }
.mt20		{ margin-top: 20px; }
.mt25		{ margin-top: 25px; }
.mt27		{ margin-top: 200px; }
.mt30		{ margin-top: 30px; }
.mt54		{ margin-top: 54px; }

.mtn11		{ margin-top: -11px; }

.mr1		{ margin-right: 1px; }
.mr2		{ margin-right: 2px; }
.mr3		{ margin-right: 3px; }
.mr4		{ margin-right: 4px; }
.mr5		{ margin-right: 5px; }
.mr6		{ margin-right: 6px; }
.mr7		{ margin-right: 7px; }
.mr8		{ margin-right: 8px; }
.mr9		{ margin-right: 9px; }
.mr10		{ margin-right: 10px; }
.mr15		{ margin-right: 15px; }
.mr20		{ margin-right: 20px; }
.mr25		{ margin-right: 25px; }
.mr27		{ margin-right: 27px; }
.mr30		{ margin-right: 30px; }

.ml1		{ margin-left: 1px; }
.ml2		{ margin-left: 2px; }
.ml3		{ margin-left: 3px; }
.ml4		{ margin-left: 4px; }
.ml5		{ margin-left: 5px; }
.ml6		{ margin-left: 6px; }
.ml7		{ margin-left: 7px; }
.ml8		{ margin-left: 8px; }
.ml9		{ margin-left: 9px; }
.ml10		{ margin-left: 10px; }
.ml13		{ margin-left: 13px; }
.ml15		{ margin-left: 15px; }
.ml18		{ margin-left: 18px; }
.ml20		{ margin-left: 20px; }
.ml25		{ margin-left: 25px; }
.ml27		{ margin-left: 27px; }
.ml30		{ margin-left: 30px; }
.ml31		{ margin-left: 300px; }

.mb5		{ margin-bottom: 5px; }
.mb10		{ margin-bottom: 10px; }
.mb15		{ margin-bottom: 15px; }
.mb20		{ margin-bottom: 20px; }
.mb25		{ margin-bottom: 25px; }
.mb30		{ margin-bottom: 30px; }
.mb49		{ margin-bottom: 49px; }

.mha		{ margin-left: auto; margin-right: auto; }
/* PADDING */
.pt1		{ padding-top: 1px; }
.pt2		{ padding-top: 2px; }
.pt3		{ padding-top: 3px; }
.pt4		{ padding-top: 4px; }
.pt5		{ padding-top: 5px; }
.pt6		{ padding-top: 6px; }
.pt7		{ padding-top: 7px; }
.pt8		{ padding-top: 8px; }
.pt9		{ padding-top: 9px; }
.pt10		{ padding-top: 10px; }
.pt15		{ padding-top: 15px; }
.pt20		{ padding-top: 20px; }
.pt25		{ padding-top: 25px; }
.pt30		{ padding-top: 30px; }

.pr1		{ padding-right: 1px; }
.pr2		{ padding-right: 2px; }
.pr3		{ padding-right: 3px; }
.pr4		{ padding-right: 4px; }
.pr5		{ padding-right: 5px; }
.pr6		{ padding-right: 6px; }
.pr7		{ padding-right: 7px; }
.pr8		{ padding-right: 8px; }
.pr9		{ padding-right: 9px; }
.pr10		{ padding-right: 10px; }
.pr15		{ padding-right: 15px; }
.pr20		{ padding-right: 20px; }
.pr25		{ padding-right: 25px; }
.pr27		{ padding-right: 27px; }
.pr30		{ padding-right: 30px; }

.pb5		{ padding-bottom: 5px; }
.pb10		{ padding-bottom: 10px; }
.pb15		{ padding-bottom: 15px; }
.pb20		{ padding-bottom: 20px; }
.pb25		{ padding-bottom: 25px; }
.pb30		{ padding-bottom: 30px; }

.pl1		{ padding-left: 1px; }
.pl2		{ padding-left: 2px; }
.pl3		{ padding-left: 3px; }
.pl4		{ padding-left: 4px; }
.pl5		{ padding-left: 5px; }
.pl6		{ padding-left: 6px; }
.pl7		{ padding-left: 7px; }
.pl8		{ padding-left: 8px; }
.pl9		{ padding-left: 9px; }
.pl10		{ padding-left: 10px; }


.pl15		{ padding-left: 15px; }
.pl20		{ padding-left: 20px; }
.pl25		{ padding-left: 25px; }
.pl30		{ padding-left: 30px; }

.pv2		{ padding-top: 2px; padding-bottom: 2px; }
.pv3		{ padding-top: 3px; padding-bottom: 3px; }
.pv4		{ padding-top: 4px; padding-bottom: 4px; }
.pv5		{ padding-top: 5px; padding-bottom: 5px; }
.pv7		{ padding-top: 7px; padding-bottom: 7px; }
.pv10		{ padding-top: 10px; padding-bottom: 10px; }
.pv15		{ padding-top: 15px; padding-bottom: 15px; }
.pv20		{ padding-top: 20px; padding-bottom: 20px; }
.pv25		{ padding-top: 20px; padding-bottom: 20px; }
.pv30		{ padding-top: 30px; padding-bottom: 30px; }

.ph2		{ padding-left: 2px; padding-right: 2px; }
.ph3		{ padding-left: 3px; padding-right: 3px; }
.ph4		{ padding-left: 4px; padding-right: 4px; }
.ph5		{ padding-left: 5px; padding-right: 5px; }
.ph10		{ padding-left: 10px; padding-right: 10px; }
.ph15		{ padding-left: 15px; padding-right: 15px; }
.ph20		{ padding-left: 20px; padding-right: 20px; }
.ph25		{ padding-left: 25px; padding-right: 25px; }
.ph30		{ padding-left: 30px; padding-right: 30px; }

.p0			{ padding: 0 !important; }
.p1			{ padding: 1px; }
.p2			{ padding: 2px; }
.p3			{ padding: 3px; }
.p4			{ padding: 4px; }
.p5			{ padding: 5px; }
.p10		{ padding: 10px; }
.p15		{ padding: 15px; }
.p20		{ padding: 20px; }
.p25		{ padding: 25px; }
.p30		{ padding: 30px; }

/*------------------------------------------------------------------------------
 GENERAL CLASSESiMODIFY ELEMENTSj
 -------------------------------------------------------------------------------
 ʒu[vertical-align]
   va + [t/m/b] = vertical-align:[top/middle/bottom]
    vat = vartical-align:top
    vam = vartical-align:middle
    vab = vartical-align:bottom
 ʒuiCCvfj[text-align]
   ta + [l/c/r] = text-align:[left/center/right]
    tal = text-align:left
    tac = text-align:center
    tar = text-align:right
 ʒuiubNvfj[margin]
   ba + [l/c/r] = block-align:[left/center/right]iC[Wj
    bal = margin-right:auto
    bac = margin-left:auto; margin-right:auto
    bar = margin-lett:auto
 tHgEFCg[font-weight]
   b = font-weight:bold
   n = font-weight:normal
 tHgTCY[font-size]
   fs + [] (+ [em/per]) = font-size:px
    fs12 = font-size: 12px
    fs12em = font-size: 12em
    fs12per = font-size: 12%
 F[color]
   fg + [J[/vf] = color: #XXXXXX
    fgWhite = color:#FFFFFF
    fgHeadline2nd = color:#FFFFFF o2iڂ̕F̈Ӗ
 wiF[background-color]
   bg + [J[/vf] = background-color: #XXXXXX
    bgWhite = color:#FFFFFF
    bgHeadline2nd = color:#FFFFFF o2iڂ̔wiF̈Ӗ
 {[_[[border]
   fg + [J[/vf] = border: Xpx solid #XXXXXX
    bdBlack = border 1px solid #000000
    bdHeadline2nd = border 1px solid #000000 o2iڂ̃{[_[̈Ӗ
 eLXgCfg[text-indent]
   ti + [] = text-indent:px
    ti5 = text-indent:5px
 Ittg[OFF LEFT]
   ol
 m[bv[NO WRAP]
   nr
 -------------------------------------------------------------------------------*/
/* VERTICAL-ALIGN */
.vat		{ vertical-align: top; }
.vam		{ vertical-align: middle; }
.vab		{ vertical-align: bottom; }
/* TEXT-ALIGN */
.tal		{ text-align: left; }
.tac		{ text-align: center; }
.tar		{ text-align: right; }
/* BLOCK-ALIGN */
.bal		{ margin-right: auto; }
.bac		{ margin-left: auto; margin-right: auto; }
.bar		{ margin-left: auto; }
/* FONT-WEIGHT */
.b			{ font-weight: bold; }
.n			{ font-weight: normal; }
/* FONT-SIZE */
.fs10		{ font-size: 83%; }
.fs12		{ font-size: 100%; }
.fs14		{ font-size: 116.6%; }
.fs16		{ font-size: 133.3%; }
.fs18		{ font-size: 150%; }
.fs20		{ font-size: 166.6%; }
.fs22		{ font-size: 183.3%; }
.fs24		{ font-size: 200%; }
/* FOREGROUND */
.fgWhite	{ color: #FFFFFF; }
.fgRed		{ color: #FF3333; }
.fgGreen	{ color: #66CC33; }
.fgGreenD	{ color: #339911; }
.fgBlue		{ color: #3333FF; }
.fgBlueD	{ color: #333399; }
.fgOrange	{ color: #ED874B; }
.fgGrayL	{ color: #9A9A9A; }
.fgGrayD	{ color: #666666; }
/* BACKGROUND */
.bgWhite	{ background-color: #FFFFFF; }
/* BORDER */
.bdBlack	{ border: 1px solid #000000; }
.bdDotT 	{ border-top: 1px dotted #666666; }
.bdGrayL	{ border-left: 1px solid #9A9A9A; }
.bdGrayD	{ border-left: 1px solid #666666; }
/* TEXT-INDENT */
.ti5		{ text-indent: 5px; }
.ti10		{ text-indent: 10px; }
.ti15		{ text-indent: 15px; }
.ti20		{ text-indent: 20px; }
.ti25		{ text-indent: 25px; }
.ti30		{ text-indent: 30px; }
/* OFF LEFT */
.ol			{ text-indent: -9999px; overflow: hidden; }
/* NOWRAP */
.nr			{ white-space: nowrap; }

.underline	{ text-decoration: underline; }


/*------------------------------------------------------------------------------
 GENERAL CLASSESiEFFECTSj
 -------------------------------------------------------------------------------
 FLOAT/CLEAR
   fl = float:left
   fr = float:right
   cb = clear:both
 CLEAR FIX
   cf
 POSITION
   pr = position: relative
   pa = position: absolute
 OVERFLOW
   ofh = overflow: hidden
 DISPLAY
   db = display: block
   di = display: inline
   dn = display: none
   dib[z] = display: inline-block[inline element/block element]
 ʒuw
   [t/b/l/r] + [] = [top/bottom/left/right]:px
    t10 = top: 10px
    b10 = bottom: 10px
    l10 = left: 10px
    r10 = right: 10px
 Z-INDEX
   zi + [] = z-index: 
 ZOOM
   zm + [] = zoom: 
 -------------------------------------------------------------------------------*/
/* FLOAT */
.fl			{ float: left; }
.fr			{ float: right; }
.cb			{ clear: both; }
/* CLEAR FIX */
.cf:after	{ content: ""; display: block; clear: both; height: 0; visibility: hidden; }
.cf			{ min-height: 1px; _height: 1px; }
/* POSITION */
.pr			{ position: relative; zoom: 1; }
.pa			{ position: absolute; }

.t0			{ top: 0; }
.t5			{ top: 5px; }
.t10		{ top: 10px; }
.t15		{ top: 15px; }
.t20		{ top: 20px; }
.t25		{ top: 25px; }
.t30		{ top: 30px; }

.l0			{ left: 0; }
.l5			{ left: 5px; }
.l10		{ left: 10px; }
.l15		{ left: 15px; }
.l20		{ left: 20px; }
.l25		{ left: 25px; }
.l28		{ left: 28px; }
.l30		{ left: 30px; }

.r0			{ right: 0; }
.r5			{ right: 5px; }
.r10		{ right: 10px; }
.r15		{ right: 15px; }
.r20		{ right: 20px; }
.r25		{ right: 25px; }
.r30		{ right: 30px; }
.r140		{ right: 140px; }

.b0			{ bottom: 0; }
.b5			{ bottom: 5px; }
.b10		{ bottom: 10px; }
.b15		{ bottom: 15px; }
.b20		{ bottom: 20px; }
.b25		{ bottom: 25px; }
.b30		{ bottom: 30px; }
/* OVERFLOW */
.ofh		{ overflow: hidden; }
.ofhz		{ overflow: hidden; _zoom: 1; }
/* DISPLAY */
.db			{ display: block; }
.di			{ display: inline; }
.dn			{ display: none; }
.dib4i		{ display: inline-block !important; }
.dib4b		{ display: inline-block !important; *display: inline !important; zoom: 1; }

/* Z-INDEX */
.zi0		{ z-index: 0; }
.zi1		{ z-index: 1; }
.zi2		{ z-index: 2; }
/* HASLAYOUT TO TRUE */
.zm1		{ zoom: 1; }