@charset "utf-8";

/*-------------------------------------------------------------- base
*/
* {
  margin: 0;
  padding: 0;
}

/*----------------------------------- default
*/
body {
  font-size: 91.6%;/* 11pt */
}

/*----------------------------------- Except IE
*/
html > body {
  font-size: 11pt;
}
html {
  overflow-y: scroll;
  filter: expression(document.execCommand("BackgroundImageCache", false, true));
  height: 100%;
}
body {
  color: #5a5a5a;
  line-height: 1.5em;
  font-family: "MS PGothic", sans-serif;
/*  font-family: "meiryo";*/
  background: #fff url(../image/main/main_bg01.gif) center top;
  padding: 8px 0;
}

/*-------------------------------------------------------------- base style
*/
a {
  color: #787de6;
  text-decoration: none;
  outline-style: none;
}
a:hover {
  color: #ff5a14;
  text-decoration: underline;
}
.bg_white {
  background: white;
}

/*-------------------------------------------------------------- font style
*/
.bold {font-weight: bold;}
.small {font-size: 81.8%;line-height: 1.5em;}
.large {font-size: 118.1%;line-height: 1.5em;}
.underline {border-bottom: 1px solid #c8c8c8;}

/*-------------------------------------------------------------- font color
*/
.green {color: #469b87;}
.red {color: #ff6464;}
.blue {color: #6473ee;}
.d_green {color: #408070;}
.d_red {color: #bb5656;}
.d_blue {color: #4455c0;}
.l_gray {color: #a9a9a9;}
.d_gray {color: #696969;}
.white {color: white;}
.black {color: black;}

/*-------------------------------------------------------------- wide style
*/
img {
  border: 0;
  vertical-align: bottom;
}
hr {
  height: 1px;
  border-top: 1px solid #ccc;
  border-left: none;
  border-right: none;
  border-bottom: none;
}
.t_center {text-align: center;}
.t_left {text-align: left;}
.t_right {text-align: right;}
.left {float: left;}
.right {float: right;}
.clear {clear: both;}
.hidden {display: none;}
.block {display: block;}
.br8 {line-height: 8px;}
.br12 {line-height: 12px;}
.no-line {line-height: 0px;}
.invisible {display: none;visibility: hidden;}
.image {border: 0;margin: 0 0 0.5em;padding: 0;}

/*-------------------------------------------------------------- Frame
*/
#Frame {
  position: relative;
  background: url(../image/material/frame_bg.jpg) repeat-y;
  width: 784px;
  margin: 0 auto;
  overflow: hidden;
}

/*-------------------------------------------------------------- Header
*/
#Header {
  background: url(../image/material/frame_top.jpg) no-repeat;
  width: 784px;
  height: 128px;
}
#Header  h1 {
  margin: 0;
}
#Header a {
  position: relative;
  top: 8px;
  left: 8px;
  display: block;
  width: 448px;
  height: 96px;
  padding: 0;
}
#Header  h1  span {
  display: none;
}

/*-------------------------------------------------------------- Navigation
*/
#Navigation1 {
  width: 168px;
  margin-bottom: 12px;
}
#Navigation1 ul {
  list-style: none;
}
#Navigation1 li {
  line-height: 0;
  overflow: hidden;
}
#Navigation1 a {
  display: block;
  width: 168px;
  height: 32px;
  text-indent: -1000em;
  overflow: hidden;
  float: left;
}
#Navigation1 a:hover {
  background-position: bottom;
}
#SM_Top a {background: url(../image/menu/menu_top.gif) no-repeat;}
#SM_Info a {background: url(../image/menu/menu_info.gif) no-repeat;}
#SM_Prod a {background: url(../image/menu/menu_prod.gif) no-repeat;}
#SM_Down a {background: url(../image/menu/menu_down.gif) no-repeat;}
#SM_Link a {background: url(../image/menu/menu_link.gif) no-repeat;}
#SM_Omak a {background: url(../image/menu/menu_omake.gif) no-repeat;}
#SM_Shop a {background: url(../image/menu/menu_shop.gif) no-repeat;height: 56px;margin: 8px 0 0;}
#SM_Stor a {background: url(../image/menu/menu_store.gif) no-repeat;height: 56px;margin: 8px 0 0;}
#SM_Recr a {background: url(../image/menu/menu_recruit.gif) no-repeat;width: 168px;height: 120px;margin: 0;}
#SM_Mobi a {background: url(../image/menu/menu_caramobi.gif) no-repeat;width: 168px;height: 100px;margin: 0;}
#SM_CstI a {background: url(../image/menu/carasta_info.gif) no-repeat;width: 168px;height: 72px;margin: 0;}
#SM_Ykch a {background: url(../image/menu/yaruki_channel.gif) no-repeat;width: 168px;height: 100px;margin: 0;}
#SM_Cmng a {background: url(../image/menu/caramel_manga.jpg) no-repeat;width: 168px;height: 104px;margin: 8px 0 0;}

/*-------------------------------------------------------------- Navigation2
*/
#Navigation2 {
  position: absolute;
  top: 79px;
  left: 456px;
  width: 312px;
  height: 22px;
}
#Navigation2 ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#Navigation2 li {
  float: left;
}
#Navigation2 a {
  display: block;
  width: 104px;
  height: 22px;
  text-indent: -1000em;
  overflow: hidden;
}
#Navigation2 a:hover {
  background-position: bottom;
}
#Navigation2 span {
  display: none;
}
#TM_Supp a {background: url(../image/menu/menu_support.gif) no-repeat;}
#TM_Guid a {background: url(../image/menu/menu_guide.gif) no-repeat;}
#TM_Enqu a {background: url(../image/menu/menu_enquete.gif) no-repeat;}

/*-------------------------------------------------------------- popup menu
*/
.menu {
  visibility: hidden;
  position: absolute;
}
.menu table {
  border-collapse: collapse;
}
.menu td {
  font-size: 90.9%;
  overflow: hidden;
}
.menu ul {
  list-style: none;
}
.menu li {
  background: #fff url(../image/icon/arrow_m01.gif) no-repeat 0 50%;
  padding-left: 16px;
}
.menu a {
  display: block;
  color: #6174fd;
  width: 100%;
  overflow: hidden;
}
.menu a:hover {
  color: #383864;
  background: #e6ebff;
  text-decoration: none;
}

/*-------------------------------------------------------------- popup menu position
*/
#menu1 {left: 441px;top: 100px;}
#menu6 {left: 160px;top: 180px;}
#menu7 {left: 160px;top: 212px;}
#menu9 {left: 160px;top: 276px;}

/*-------------------------------------------------------------- popup menu style
*/
.pmt00 {height: 20px;}
.pmt01 {width: 28px;}
.pmt04 {height: 2px;}

.pmt03,
.pmt07 {height: 16px;}

.pmt02,
.pmt05,
.pmt06 {width: 16px;}

.pmt11 {background: url(../image/material/pmt11.gif);width: 8px;height: 8px;}
.pmt12 {background: url(../image/material/pmt12.gif);       height: 8px;}
.pmt13 {background: url(../image/material/pmt13.gif);width:12px;height: 8px;}
.pmt21 {background: url(../image/material/pmt21.gif);width: 8px;        }
.pmt23 {background: url(../image/material/pmt23.gif);width:12px;        }
.pmt31 {background: url(../image/material/pmt31.gif);width: 8px;height:12px;}
.pmt32 {background: url(../image/material/pmt32.gif);       height:12px;}
.pmt33 {background: url(../image/material/pmt33.gif);width:12px;height:12px;}

/*-------------------------------------------------------------- popup menu products lineup
*/
.pmpd {
  visibility: hidden;
  position: absolute;
}
.pmpd table {
  border-collapse: collapse;
}
.pmpd td {
  padding: 0;
}
.pmpd div.pmpd-style {
  background: #fff;
  width: 222px;
  overflow: hidden;
}
.pmpd ul {
  background: #fff;
  list-style: none;
  margin: 0;
  padding: 1px;
  width: 222px;
}
.pmpd li {
  width: 110px;
  overflow: hidden;
  float: left;
}
.pmpd a {
  display: block;
  width: 108px;
  height: 48px;
  margin: 1px;
  padding: 0;
  text-indent: -1000em;
  overflow: hidden;
}
.pmpd a:hover {
  background-position: left bottom;
}
.pmpd01 a {background:url(../image/menu/product_ico01.gif) no-repeat left top;}
.pmpd02 a {background:url(../image/menu/product_ico02.gif) no-repeat left top;}
.pmpd03 a {background:url(../image/menu/product_ico03.gif) no-repeat left top;}
.pmpd04 a {background:url(../image/menu/product_ico04.gif) no-repeat left top;}
.pmpd05 a {background:url(../image/menu/product_ico05.gif) no-repeat left top;}
.pmpd06 a {background:url(../image/menu/product_ico06.gif) no-repeat left top;}
.pmpd07 a {background:url(../image/menu/product_ico07.gif) no-repeat left top;}
.pmpd08 a {background:url(../image/menu/product_ico08.gif) no-repeat left top;}
.pmpd09 a {background:url(../image/menu/product_ico09.gif) no-repeat left top;}
.pmpd10 a {background:url(../image/menu/product_ico10.gif) no-repeat left top;}
.pmpd11 a {background:url(../image/menu/product_ico11.gif) no-repeat left top;}
.pmpd12 a {background:url(../image/menu/product_ico12.gif) no-repeat left top;}
.pmpd13 a {background:url(../image/menu/product_ico13.gif) no-repeat left top;}

/*-------------------------------------------------------------- Footer
*/
#Footer {
  background: url(../image/material/frame_footer_mid.jpg) repeat-y;
  clear: both;
  width: 784px;
  overflow: hidden;
}
#Footer p {
  background: url(../image/material/frame_footer_top.jpg) no-repeat;
  padding-top: 30px;
  overflow: hidden;
}
#Footer p span {
  display: block;
  color: #805333;
  font-size: 81.8%;
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  background: url(../image/material/frame_footer_bot.jpg) no-repeat left bottom;
  padding-bottom: 14px;
  padding-left: 20px;
  overflow: hidden;
}

/*-------------------------------------------------------------- underline
*/
.under_s {
  background: url(../image/material/borderline_x01.gif) repeat-x bottom;
  padding-bottom: 2px;
}
.under_d {
  background: url(../image/material/borderline_x02.gif) repeat-x bottom;
  padding-bottom: 2px;
}

/*-------------------------------------------------------------- borderline
*/
.border_s {
  background: url(../image/material/borderline_x01.gif) repeat-x 50% 50%;
  display: block;
  font-size: 1px;
}
.border_d {
  background: url(../image/material/borderline_x02.gif) repeat-x 50% 50%;
  display: block;
  font-size: 1px;
}
.border_s hr {
  display: none;
}
.border_d hr {
  display: none;
}
.h02 {height: 2px;line-height: 2px;overflow: hidden;}
.h04 {height: 4px;line-height: 4px;overflow: hidden;}
.h08 {height: 8px;line-height: 8px;overflow: hidden;}
.h16 {height: 16px;line-height: 16px;overflow: hidden;}
.h48 {height: 48px;line-height: 48px;overflow: hidden;}

/*-------------------------------------------------------------- article header
*/
div.Headfr {
  background: url(../image/material/headline_bgl.gif) no-repeat top left;
  width: 100%;
  overflow: hidden;
}
div.Headfr h3 {
  font-size: 90.9%;
  background: url(../image/material/headline_bgr.gif) no-repeat top right;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 4px 0 4px;
  overflow: hidden;
}
div.Headfr p {
  background: url(../image/material/headline_bgr.gif) no-repeat top right;
  width: 100%;
  height: 24px;
  font-size: 13px;
  text-align: center;
  margin: 0;
  padding: 4px 0 0;
}

/*-------------------------------------------------------------- contents
*/
#Contents {}

/*----------------------------------- main contents
*/
#M_Contents {
  float: right;
  width: 584px;
}
#M_Contents_In {
  margin: 8px 22px 8px 14px;
}

/*----------------------------------- Sub Contents
*/
#S_Contents {
  float: left;
  width: 200px;
}
#S_Contents_In {
  margin: 4px 12px 8px 20px;
  overflow: hidden;
}

/*-------------------------------------------------------------- Pagetop Link
*/
.link_top {
  display: block;
  font-size: 90.9%;
  text-align: right;
  border-bottom: 1px solid #ccc;
  width: 544px;
  margin-top: 4px;
}

/*-------------------------------------------------------------- Tab Box
*/
.Box {
  background : url(../image/material/ibox_middle.gif) repeat-y;
  width: 548px;
  margin-top: 12px;
  overflow: hidden;
}
.Tbox {
  background : url(../image/material/ibox_middle.gif) repeat-y;
  width: 548px;
  overflow: hidden;
}
.Tbox_Int {
  margin: 0 36px 0 32px;/*(480=548-36+32)*/
}
.Tbox_Top0,.Tbox_Top1,.Tbox_Top2,.Tbox_Top3,.Tbox_Top4 {
  width: 548px;
  height: 12px;
  overflow: hidden;
}
.Tbox_Top0 {background : url(../image/material/ibox_top.gif) no-repeat;}
.Tbox_Top1 {background: url(../image/material/tbox_top1.gif) no-repeat;}
.Tbox_Top2 {background: url(../image/material/tbox_top2.gif) no-repeat;}
.Tbox_Top3 {background: url(../image/material/tbox_top3.gif) no-repeat;}
.Tbox_Top4 {background: url(../image/material/tbox_top4.gif) no-repeat;}
.Tbox_Head {
  background : url(../image/material/headline_bg480.gif) no-repeat 0;
  height: 24px;
}
.Tbox_Head p {
  padding: 3px 0;
  font-weight: bold;
}
.Tbox_Date {
  background : url(../image/icon/h_ball03r.gif) no-repeat 0px 50%;
  margin: 0 0 12px 0;
  text-align: left;
  border-bottom: 1px solid #ccc;
}
.Tbox_Date p {
  margin: 0 0 0 20px;
  padding: 1px 0 0 0;
}
.Tbox_Cont {
  padding: 0 12px 0 8px;
}
.Tbox_Imge p {
}
.Tbox_Bott {
  background : url(../image/material/ibox_bottom.gif) no-repeat;
  width: 548px;
  height: 16px;
  overflow: hidden;
}

/*-------------------------------------------------------------- Tab Button
*/
div.Tbox_Butt {
  zoom: 100%;
  text-align: center;
  margin-top: 12px;
  overflow: hidden;
}
div.Tbox_Butt:after {
  content: "";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}
div.Tbox_Butt div,
div.Tbox_Butt span,
div.Tbox_Butt a {
  font-size: 90.9%;
  line-height: 24px;
  overflow: hidden;
  text-decoration: none;
}

.tabb_01            {background: url(../image/material/tab_button_on_01.gif) no-repeat;}
.tabb_02            {background: url(../image/material/tab_button_on_02.gif) no-repeat;}
.tabb_03            {background: url(../image/material/tab_button_on_03.gif) no-repeat;}
.tabb_01off         {background: url(../image/material/tab_button_01.gif) no-repeat;}
.tabb_02off         {background: url(../image/material/tab_button_02.gif) no-repeat;}
.tabb_03off         {background: url(../image/material/tab_button_03.gif) no-repeat;}
.tabb_01off:hover   {background: url(../image/material/tab_button_01.gif) no-repeat left bottom;}
.tabb_02off:hover   {background: url(../image/material/tab_button_02.gif) no-repeat left bottom;}
.tabb_03off:hover   {background: url(../image/material/tab_button_03.gif) no-repeat left bottom;}
.tabb_01over        {background: url(../image/material/tab_button_01.gif) no-repeat left bottom;}
.tabb_02over        {background: url(../image/material/tab_button_02.gif) no-repeat left bottom;}
.tabb_03over        {background: url(../image/material/tab_button_03.gif) no-repeat left bottom;}
.tabk_01            {background: url(../image/material/tab_button_end_01.gif) no-repeat;}
.tabk_02            {background: url(../image/material/box-shadow01.gif) repeat-y;}
.tabs_00            {background: #fff;}
.tabs_01            {background: url(../image/material/tab_button_space03.gif) no-repeat;}

.tabb_01,
.tabb_02,
.tabb_03            {color: #3c3c3c; width: 128px; height: 24px; float: left;}
.tabb_01off,
.tabb_02off,
.tabb_03off         {color: #5a5a5a; width: 128px; height: 24px; float: left; cursor: pointer;}
.tabb_01off:hover,
.tabb_02off:hover,
.tabb_03off:hover   {color: #ff5a14;}
.tabb_01over,
.tabb_02over,
.tabb_03over        {color: #ff5a14; width: 128px; height: 24px; float: left; cursor: pointer;}
.tabk_01,
.tabk_02            {display: block; width: 8px; height: 24px; float: left;}
.tabs_00,
.tabs_01            {display: block; width: 128px; height: 24px; float: left;}

/*-------------------------------------------------------------- Article Table01
*/
table.i_table01 {
  font-size: 90.9%;
  line-height: 1.4em;
}
table.i_table01 th {
  background: #eee;
  font-weight: normal;
  text-align: left;
  padding: 2px 3px 2px 2px;
  vertical-align: top;
  white-space: nowrap;
}
table.i_table01 td {
  text-align: left;
  padding: 2px 2px 2px 3px;
  border-bottom: 1px solid #ddd;
}

/*-------------------------------------------------------------- Article Table01
*/
table.i_table02 {
  font-size: 100%;
  line-height: 1.4em;
}
table.i_table02 th {
  font-size: 90.9%;
  background: #eee;
  font-weight: normal;
  text-align: center;
  padding: 2px;
  vertical-align: top;
  white-space: nowrap;
}
table.i_table02 td {
  font-size: 90.9%;
  padding: 2px;
  border-bottom: 1px solid #ddd;
}

/*-------------------------------------------------------------- Frame2
*/
#Frame2 {
  position: relative;
  background: url(../image/material/frame_bg2.jpg) repeat-y;
  width: 784px;
  margin: 0 auto;
  overflow: hidden;
}

/*-------------------------------------------------------------- Header2
*/
#Header2 {
  background: url(../image/material/frame_top2.jpg) no-repeat;
  width: 784px;
  height: 128px;
}
#Header2 h1 {
  margin: 0;
}
#Header2 a {
  position: relative;
  top: 8px;
  left: 8px;
  display: block;
  width: 448px;
  height: 96px;
  padding: 0;
}
#Header2 h1 span {
  display: none;
}

/*-------------------------------------------------------------- Footer2
*/
#Footer2 {
  background: url(../image/material/frame_footer_mid.jpg) repeat-y;
  clear: both;
  width: 784px;
  overflow: hidden;
}
#Footer2 p {
  background: url(../image/material/frame_footer_top2.jpg) no-repeat;
  padding-top: 30px;
  overflow: hidden;
}
#Footer2 p span {
  display: block;
  color: #805333;
  font-size: 81.8%;
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  background: url(../image/material/frame_footer_bot.jpg) no-repeat left bottom;
  padding-bottom: 14px;
  padding-left: 20px;
  overflow: hidden;
}

/*-------------------------------------------------------------- clear-fix
*/
.clf:after {
  content: ".";
  display: block;
  height: 0px;
  clear: both;
  visibility: hidden;
}

/* Win IE7 */
*:first-child+html .clf {
  height: 1%;
}
/* End Win IE7 */

/* Win IE6 \*/
* html .clf {
  height: 1%;
}
/* End Win IE6 */

/* Mac IE\*//*/
.clf {
  display: inline-table;
}
/* End Mac IE */


/*-------------------------------------------------------------- H2 Header
*/

h2 {
  width: 548px;
  height: 36px;
  margin-bottom: 12px;
  text-indent: -1000em;
  line-height: 0;
  overflow: hidden;
  vertical-align: bottom;
}
h2#Indx {display: none;}
h2#Cbbs {background: url(../image/headline/h_bbs.jpg) no-repeat;}
h2#Down {background: url(../image/headline/h_download.jpg) no-repeat;}
h2#Vari {background: url(../image/headline/h_various.jpg) no-repeat;}
h2#Supp {background: url(../image/headline/h_support.jpg) no-repeat;}
h2#Recr {background: url(../image/headline/h_recruit.jpg) no-repeat;}
h2#Prod {background: url(../image/headline/h_products.jpg) no-repeat;}
h2#Link {background: url(../image/headline/h_link.jpg) no-repeat;}
h2#Info {background: url(../image/headline/h_info.jpg) no-repeat;}
h2#Guid {background: url(../image/headline/h_guide.jpg) no-repeat;}
h2#Enqu {background: url(../image/headline/h_enquete.jpg) no-repeat;}




/*-------------------------------------------------------------- No Script
*/

.no-script {
  font-size: 81.8%;
  border-top: 2px dotted #469b87;
  border-bottom: 2px dotted #469b87;
  margin: 0 auto 12px;
}