@charset "utf-8";


/* ====  index  ===============================================

  0-1.  XHTML structure
  0-2.  initialize

  1-1.  basic layout
  1-2.  basic styles
  1-3.  size - width

  2-1.  effects
  2-2.  link - arrow / icon
  2-3.  list - ul
  2-4.  list - dl
  2-5.  table
  2-6.  form

  3-1.  styles [ globalHeader ]
  3-2.  styles [ header ]
  3-3.  styles [ footer ]

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





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

0-1. XHTML structure

---------------------------------------------------------------

body << layoutType : i.e. category / design pattern
  |
  +-- #container
      |
      +-- #globalHeader
      |
      +-- #header
      |
      +-- #main
          |
          +-- #content
              |
              +-- .wrapper
                  |
                  +-- .colL
                  |
                  +-- .colR
          |
          +-- #sidebar
      |
      +-- #extra
      |
      +-- #footer

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





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

0-2. initialize

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

/* --------------  global  -------------- */
*                  {margin: 0; padding: 0;}
html, body         {min-height: 100%; height:auto !important; height: 100%;}
body               {font-family:Helvetica,Arial,sans-serif; font-size: 63%;}     /* 1em = (16px down to 10px) */

/* --------------  text  -------------- */
h1,h2,h3,h4,h5,h6,pre,table,
input,textarea,select,button,legend {
  font-size: 1em;
  font-weight: normal;
  color: #313131;
}


/* --------------  anchor  -------------- */
a:link, a:visited  {text-decoration: none;}
a:hover            {text-decoration: underline;}


/* --------------  border  -------------- */
img,iframe         {border: 0;}
form, fieldset     {border: 0;}


/* --------------  lists  -------------- */
ul,ol,dl,li,dt,dd  {list-style: none;}


/* --------------  tables  -------------- */
table              {border-collapse: collapse; border: 0;}
td, th, caption    {text-align: left; font-weight: normal;}


/* --------------  forms  -------------- */
input, textarea,
select, button     {font-family: "Osaka","MS UI Gothic";}


/* --------------  pre  -------------- */
pre {
  overflow: visible;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: sans-serif;
}


/* --------------  blockquote  -------------- */
blockquote {
  padding: 10px;
  border: 1px dashed #ccc;
}










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

1-1. basic layout

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

/* --------------  centering  -------------- */
* html body        {text-align: center;}    /* =hack IE4-6 */
* html #container  {text-align: left;}      /* =hack IE4-6 */
#container         {margin: 0 auto;}
#container,
#globalHeader,
#header,#footer,
#content, #sidebar {position: relative;}
#footer            {clear: both;}


/* --------------  wrapper  -------------- */
.wrapper {
  /*\*/
  overflow: hidden;
  /**/
}
.wrapper:after {
  content: "";
  display: block;
  clear: both;
  height: 1px;
  overflow: hidden;
}
/*\*/
* html .wrapper {
  height: 1em;
  overflow: visible;
}
/**/





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

1-2. basic styles

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

/* --------------  align  -------------- */
.left              {text-align: left;}
.right             {text-align: right;}
.center            {text-align: center;}


/* --------------  float  -------------- */
.colL              {float: left;}
.colR              {float: right;}


/* --------------  clear  -------------- */
.clear             {clear: both;}
div.clear,br.clear {height: 1px; font-size: 1px;}


/* --------------  image  -------------- */
img                {vertical-align: bottom;}
img.left           {float: left;  margin: 0 1em 0.5em 0;}
img.right          {float: right; margin: 0 0 0.5em 1em;}
input.left         {float: left; margin: 0 5px 5px 0; padding: 0; }


/* --------------  hr  -------------- */
hr                 {display: none; border: none;}
.hr                {
  clear:both;
  height:40px;
  background:url(../img/hr.gif) left center repeat-x;
}


/* --------------  accessibility  -------------- */
.accNav            {position: absolute; left: -9999px;}


/* --------------  hide  -------------- */
.hide              {display:none;}


/* --------------  error  -------------- */
.error             {border: 1px dashed #c03; color: #c03;}
ul.error           {padding-left:2em;}


/* --------------  letter-spacing  -------------- */
.letter_narrow     {letter-spacing: -0.1em;}
.letter_wide       {letter-spacing: 0.2em;}


/* --------------  footnote  -------------- */
.footnote          {padding-right: 10px; text-align: right; xxfont-size: 0.96em;}


/* --------------  omit styles  -------------- */
#content .nostyle  {background: none; background-image: url(../img/_blank.gif); border: none;}
#content .nowrap   {white-space: nowrap;}
#content .noborder {border: none;}
#content .nomargin {margin: 0;}
#content .nomarginL {margin-left: 0;}
#content .nomarginR {margin-right: 0;}
#content .nomarginLR {margin-left: 0; margin-right: 0;}
#content .nomarginB {margin-bottom: 0;}
#content .notext   {text-indent: -9999px;}





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

1-3. size - width

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

/* --------------  width  -------------- */
.w5p               {width: 5%;}
.w10p              {width: 10%;}
.w15p              {width: 15%;}
.w20p              {width: 20%;}
.w25p              {width: 25%;}
.w30p              {width: 30%;}
.w33p              {width: 33.3%;}
.w35p              {width: 35%;}
.w40p              {width: 40%;}
.w45p              {width: 45%;}
.w50p              {width: 50%;}
.w60p              {width: 60%;}
.w65p              {width: 65%;}
.w70p              {width: 70%;}
.w75p              {width: 75%;}
.w80p              {width: 80%;}
.w85p              {width: 85%;}
.w90p              {width: 90%;}
.w95p              {width: 95%;}
.w100p             {width: 100%;}










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

2-1. effects

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

/* --------------  glow  -------------- */
.boxGlow           {float: left;}
.boxGlow           {background: url(../img/box_glow_body.jpg) left top repeat-y;}
.boxGlow .boxH     {background: url(../img/box_glow_head.jpg) left bottom no-repeat;}
.boxGlow .boxF     {background: url(../img/box_glow_foot.jpg) left top no-repeat;}
.boxGlow .boxB     {background: url(../img/box_glow_body_r.jpg) right top repeat-y;}
.boxGlow .boxHpad  {background: url(../img/box_glow_head_r.jpg) right bottom no-repeat;}
.boxGlow .boxFpad  {background: url(../img/box_glow_foot_r.jpg) right top no-repeat;}
.boxGlow .boxHpad  {line-height: 10px;}
.boxGlow .boxFpad  {line-height: 10px;}
.boxGlow .boxB     {padding: 0 10px;}
.boxGlow .boxF     {clear: both;}


/* --------------  shadow  -------------- */
.boxShadow         {float: left;}
.boxShadow         {background: url(../img/box_shadow_body_r.jpg) right top repeat-y;}
.boxShadow .boxF   {background: url(../img/box_shadow_foot.jpg) left top no-repeat;}
.boxShadow .boxB   {background: url(../img/box_shadow_head_r.jpg) right top no-repeat;}
.boxShadow .boxFpad{background: url(../img/box_shadow_foot_r.jpg) right top no-repeat;}
.boxShadow .boxFpad{line-height: 10px;}
.boxShadow .boxB   {padding: 0 10px 0 0;}
.boxShadow .boxF   {clear: both;}


/* --------------  aqua -------------- */
.aqua              {padding: 1px;}
.boxAqua           {float: left;}
.boxAqua           {background: url(../img/box_aqua_body.jpg) left top repeat-y;}
.boxAqua .boxH     {background: url(../img/box_aqua_head.jpg) left bottom no-repeat;}
.boxAqua .boxF     {background: url(../img/box_aqua_foot.jpg) left top no-repeat;}
.boxAqua .boxB     {background: url(../img/box_aqua_body_r.jpg) right top repeat-y;}
.boxAqua .boxHpad  {background: url(../img/box_aqua_head_r.jpg) right bottom no-repeat;}
.boxAqua .boxFpad  {background: url(../img/box_aqua_foot_r.jpg) right top no-repeat;}
.boxAqua .boxBpad  {background: url(../img/box_aqua_body_top.jpg) left top no-repeat;}
.boxAqua .boxHpad  {line-height: 20px;}
.boxAqua .boxFpad  {line-height: 20px;}
.boxAqua .boxBpad  {padding: 0 14px;}
.boxAqua .boxB     {padding: 0 6px;}
.boxAqua .boxF     {clear: both;}


/* --------------  badge -------------- */
.badge             {padding: 1px;}
.boxBadge          {float: left;}
.boxBadge          {background: url(../img/box_badge_body.jpg) left top repeat-y;}
.boxBadge .boxH    {background: url(../img/box_badge_head.jpg) left bottom no-repeat;}
.boxBadge .boxF    {background: url(../img/box_badge_foot.jpg) left top no-repeat;}
.boxBadge .boxB    {background: url(../img/box_badge_body_r.jpg) right top repeat-y;}
.boxBadge .boxHpad {background: url(../img/box_badge_head_r.jpg) right bottom no-repeat;}
.boxBadge .boxFpad {background: url(../img/box_badge_foot_r.jpg) right top no-repeat;}
.boxBadge .boxBpad {background: url(../img/box_badge_body_top.jpg) left top no-repeat;}
.boxBadge .boxHpad {line-height: 10px;}
.boxBadge .boxFpad {line-height: 10px;}
.boxBadge .boxBpad {padding: 0 6px;}
.boxBadge .boxB    {padding: 0 4px;}
.boxBadge .boxF    {clear: both;}


/* --------------  innner effect box  -------------- */
.boxB *            {background: url(../img/_blank.gif);}


/* --------------  drop cap  -------------- */
/*\*/
.cap:first-letter  {
  float: left;
  margin-right: 6px;
  line-height: 1;
  font-size: 2.6em;
  font-family: "MS PMincho","Hiragino Mincho Pro","Osaka";
}
/**/





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

2-2. link - arrow / icon

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

/* --------------  link arrow  -------------- */
a.back, a.next     {padding-left: 12px;}
a.up, a.down       {padding-right: 12px;}
a.back             {background: url(../img/arrow_back.gif) left top no-repeat;}
a.next             {background: url(../img/arrow_next.gif) left top no-repeat;}
a.up               {background: url(../img/arrow_up.gif)   right top no-repeat;}
a.down             {background: url(../img/arrow_down.gif) right top no-repeat;}
a.back:hover,a.next:hover {background-position: left -100px;}
a.up:hover,a.down:hover   {background-position: right -100px;}


/* --------------  link icon  -------------- */
a.blank            {padding-right: 12px; background: url(../img/icon_blank.gif) right top no-repeat;}
a.doc              {padding-right: 16px; background: url(../img/icon_doc.gif) right top no-repeat;}
a.htm              {padding-right: 16px; background: url(../img/icon_htm.gif) right top no-repeat;}
a.jpg              {padding-right: 16px; background: url(../img/icon_jpg.gif) right top no-repeat;}
a.mail             {padding-right: 16px; background: url(../img/icon_mail.gif) right top no-repeat;}
a.pdf              {padding-right: 16px; background: url(../img/icon_pdf.gif) right top no-repeat;}
a.txt              {padding-right: 16px; background: url(../img/icon_txt.gif) right top no-repeat;}
a.xls              {padding-right: 16px; background: url(../img/icon_xls.gif) right top no-repeat;}
a.zip              {padding-right: 16px; background: url(../img/icon_zip.gif) right top no-repeat;}
a.blank:hover      {background-position: right -100px;}





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

2-3. list - ul

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

/* --------------  ul / ol  -------------- */
.disc li {
  margin-left: 2.5em;
  list-style: disc;
}
.num li {
  margin-left: 2.5em;
  list-style: decimal;
}


/* --------------  ul.arrow  -------------- */
.arrow li {
  height: 1;
  line-height: 1.2;
  padding-left: 15px;
  background: url(../img/arrow.gif) left top no-repeat;
}


/* --------------  ul.noarrow  -------------- */
.noarrow li {
  height: 1.5;
  margin-bottom: 0.4em;
  line-height: 1.2;
}


/* --------------  ul.arrowlink  -------------- */
.arrowlink li {
  height: 1;
  line-height: 1.2;
}
.arrowlink li a {
  padding-left: 15px;
  background: url(../img/arrow_next.gif) left top no-repeat;
}
.arrowlink li a:hover,
.arrowlink li a.active {
  background-position: left -100px;
}
.arrowlink li span {
  padding-left: 15px;
}


/* --------------  ul.inline  -------------- */
.inline li {
  display: inline;
  height: 1.5em;
  padding: 0 7px 0 7px;
  background: url(../img/hr_v.gif) right center no-repeat;
}
.inline li a {
  background: none;
  white-space: nowrap;
}
.inline li a.next {
  padding-left: 15px;
  background: url(../img/arrow_next.gif) left top no-repeat;
}
.inline li a.prev {
  padding-right: 15px;
  background: url(../img/arrow_back.gif) right top no-repeat;
}
.inline li:last-child,
.inline li.last {
  background: none;
  border-right: none;
}


/* --------------  ul.stepnavi  -------------- */
.stepnavi {
  clear: both;
  position: relative;
  margin: 20px;
  padding-top: 10px;
  line-height: 1em;
  text-align: center;
}
.stepnavi li {
  display: inline;
  line-height: 1em;
}
.stepnavi li.step a {
  padding: 0 12px;
  background: url(../img/arrow_up.gif) left top no-repeat;
}
.stepnavi li.step a:hover,
.stepnavi li.step a.active {
  background-position: left -100px;
}
.stepnavi li.back {
  float: left;
}
.stepnavi li.next {
  float: right;
}


/* --------------  ul.tree  -------------- */
.tree li {
  height: 1;
  margin-left: 0;
  padding-left: 16px;
  background: url(../img/arrow_tree.gif) left top no-repeat;
  line-height: 2.0;
}
.tree li li {
  margin-left: -16px;
  padding-left: 32px;
  background: url(../img/arrow_tree_2.gif) left top no-repeat;
  line-height: 1.5;
}
.tree li li.last {
  background: url(../img/arrow_tree_2_last.gif) left top no-repeat;
}
.tree li li ul {
  padding-top: 0.3em;
}
.tree li li li {
  margin-left: -32px;
  padding-left: 60px;
  background: url(../img/arrow_tree_3.gif) left top no-repeat;
  line-height: 1.1;
}
.tree li li li.last {
  background: url(../img/arrow_tree_3_last.gif) left top no-repeat;
}
.tree li li li li {
  margin-left: -60px;
  padding-left: 88px;
  background: url(../img/arrow_tree_4.gif) left top no-repeat;
}
.tree li li li li.last {
  background: url(../img/arrow_tree_4_last.gif) left top no-repeat;
}

.tree li,
.tree li a {
  font-weight: bold;
}
.tree li li,
.tree li li a {
  font-weight: normal;
}





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

2-4. list - dl

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

/* --------------  dl.cols  -------------- */
.cols dt           {clear: left; float: left;}
.cols dd           {margin-bottom: 0.5em;}
.left20p  dt       {width: 20%;}
.left20p  dd       {margin-left: 20%;}
.left30p  dt       {width: 30%;}
.left30p  dd       {margin-left: 30%;}
.left33p  dt       {width: 33%;}
.left33p  dd       {margin-left: 33%;}
.left40p  dt       {width: 40%;}
.left40p  dd       {margin-left: 40%;}
.left50p  dt       {width: 50%;}
.left50p  dd       {margin-left: 50%;}
.left2em  dt       {width: 2.0em;}
.left2em  dd       {margin-left: 2.5em;}
.left3em  dt       {width: 3.0em;}
.left3em  dd       {margin-left: 3.5em;}
.left4em  dt       {width: 4.0em;}
.left4em  dd       {margin-left: 4.5em;}
.left6em  dt       {width: 6.0em;}
.left6em  dd       {margin-left: 6.5em;}
.left8em  dt       {width: 8.0em;}
.left8em  dd       {margin-left: 8.5em;}
.left10em dt       {width: 10.0em;}
.left10em dd       {margin-left: 10.5em;}
.left12em dt       {width: 12.0em;}
.left12em dd       {margin-left: 12.5em;}
.left14em dt       {width: 14.0em;}
.left14em dd       {margin-left: 14.5em;}
.ymd      dt       {width: 8.5em;}
.ymd      dd       {margin-left: 9.0em;}


/* --------------  dl.dl  -------------- */
dl.dl dt         {font-weight: bold;}
dl.dl dd         {margin-left: 3em;}





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

2-5. table

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

/* --------------  table.border  -------------- */
.border            {border: 1px solid #ccc;}
.border th,
.border td         {border: 1px solid #ccc;}
.border th,
.border td         {padding: 3px 8px;}
.border th         {background: #eee;}
.border th.thead   {background: #ddd; text-align: center; font-weight: bold;}
.border th.theadL  {background: #ddd; text-align: left; font-weight: bold;}
.border table      {margin: 0;}
tr.thead th        {background: url(../img/bg_dt.jpg); font-weight: bold; }


/* --------------  table.underbar -------------- */
table.underbar     {border: none;}
.underbar th,
.underbar td       {border: none; border-bottom: 1px dashed #ccc;}





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

2-6. form

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

form               {display: inline;}


/* --------------  input,textarea  -------------- */
input,textarea {
  padding: 0.1em 0.3em;
  border-top: 1px solid #bbb;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
  border-left: 1px solid #bbb;
}


/* --------------  button  -------------- */
.button {
  padding: 5px 10px;
  background: url(../img/gradation.jpg) left top repeat-x;
  border-top: 1px solid #bbb;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
  border-left: 1px solid #bbb;
}


/* --------------  cart area  -------------- */
.addcart {
  margin: 10px 0 10px 10px;
  padding: 5px 5px 5px 5px;
  border: 3px solid #ececec;
}
.addcart h3 {
  margin-bottom: 5px !important;
  padding: 4px 6px !important;
  background: #efe6d5 !important;
  text-align: center;
}
.addcart button.btn {
  float: right;
  width: 145px;
  height: 35px;
  margn: 0 0 5px !important;
}
.addcart p {
  float: right;
  margin: 5px !important;
  line-height: 1.1 !important;
  text-align: right;
}


/* --------------  preorder area  -------------- */
.preorder {
  padding: 5px;
  border: 3px solid #ececec;
}
.preorder h3 {
  margin: 0 0 5px !important;
  padding: 4px 5px !important;
  background: #efe6d5 !important;
  text-align: center;
}
.preorder button.btn {
  width: 120px;
  height: 35px;
  margn: 0 0 5px !important;
}












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

3-1. styles [ globalHeader ]

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

#globalHeader h1   {float: left;}
p.corpName         {float: right;}


/* --------------  globalHeader nav  -------------- */
#globalHeader ul   {overflow: hidden; float: right;}
#globalHeader li   {display: inline;}
#globalHeader li a {
  float: left;
  padding: 0 8px;
  background: url(../img/hr_v.gif) right center no-repeat;
}
#globalHeader li.last a {
  background: none;
  border: none;
}
#globalHeader li a span {
  /*\*/ display: block; /**/
  cursor: pointer;
  text-align: center;
}





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

3-2. styles [ header ]

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

/* --------------  header nav  -------------- */
#header li         {display: inline;}
#header li a       {
  float: left;
  line-height: 30px;
}
#header li a span {
  /*\*/ display: block; /**/
  cursor: pointer;
  text-align: center;
}


/* --------------  header nav Image  -------------- */
/*
#header li#hn1 a   {width: 140px; background: url(../img/header_nav_1.jpg) 0 0 no-repeat;}
#header li#hn2 a   {width: 140px; background: url(../img/header_nav_2.jpg) 0 0 no-repeat;}
#header li#hn3 a   {width: 140px; background: url(../img/header_nav_3.jpg) 0 0 no-repeat;}
#header li#hn4 a   {width: 140px; background: url(../img/header_nav_4.jpg) 0 0 no-repeat;}
#header li#hn5 a   {width: 140px; background: url(../img/header_nav_5.jpg) 0 0 no-repeat;}
#header li#hn6 a   {width: 140px; background: url(../img/header_nav_6.jpg) 0 0 no-repeat;}
#header li#hn7 a   {width: 140px; background: url(../img/header_nav_7.jpg) 0 0 no-repeat;}
#header li#hn8 a   {width: 140px; background: url(../img/header_nav_8.jpg) 0 0 no-repeat;}
#header li#hn9 a   {width: 140px; background: url(../img/header_nav_9.jpg) 0 0 no-repeat;}
#header li#hn1 a:hover, #header li#hn1 a.active,
#header li#hn2 a:hover, #header li#hn2 a.active,
#header li#hn3 a:hover, #header li#hn3 a.active,
#header li#hn4 a:hover, #header li#hn4 a.active,
#header li#hn5 a:hover, #header li#hn5 a.active,
#header li#hn6 a:hover, #header li#hn6 a.active,
#header li#hn7 a:hover, #header li#hn7 a.active,
#header li#hn8 a:hover, #header li#hn8 a.active,
#header li#hn9 a:hover, #header li#hn9 a.active {color: #fff; background-position: 0 -100px;}
*/




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

3-3. styles [ footer ]

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

#footer {
  height: 40px;
  padding: 2px;
  border-top: 2px solid #ccc;
}
#footer .credit {
  padding: 0 5px;
  color: #666;
}