@charset "utf-8";

/* 要素リセット */
body {
    margin : 0;
    padding: 0;
    text-align : center;
    font-size  : 75%;
    font-family: 'メイリオ' ,Meiryo, 'ヒラギノ角ゴ Pro W3' , 'Hiragino Kaku Gothic Pro' , 'ＭＳ Ｐゴシック' , 'Osaka' ,sans-serif, cursive;
    color    : #666666; /* 標準文字色 */
    min-width: 900px;
    -webkit-print-color-adjust: exact;
}
/* Safari用ハック 文字サイズ調整 */
/*¥*/
html:¥66irst-child body {
    font-size: 70%;
}
/* end */

img {
    border-top    : 0;
    border-right  : 0;
    border-bottom : 0;
    border-left   : 0;
}


/*--------------------------------------------------------
  レイアウト設定
--------------------------------------------------------*/
#hpb-container {
    background-image : url(img/fbg_1A.png);
    background-position: bottom left;
    background-repeat: repeat-x;
    position: relative;
}

#hpb-header {
    width : 900px;
    margin-left : auto;
    margin-right: auto;
    height:  94px;
}

#hpb-inner {
    width: 900px;
    margin-left : auto;
    margin-right: auto;
    position: relative;
    clear: both;
}

.hpb-layoutset-02 #hpb-wrapper {
    width: 650px;
    padding-top: 53px;
    float: left;
}

#hpb-wrapper .youtubeBnr .demoBnr a:hover {
    opacity: 0.7;
}

#hpb-main {
    width: 650px;
    float: left;
    text-align: left;
}

#hpb-aside {
    width: 220px;
    float: right;
    padding-bottom: 50px;
}
.hpb-layoutset-02 #hpb-aside {
    margin-top: 39px;
}

#hpb-footer {
    width: 900px;
    height: 128px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    padding-top: 50px;
}


/*--------------------------------------------------------
  デザイン設定
--------------------------------------------------------*/
/* 背景設定 */
.hpb-layoutset-02 {
    background-image : url(img/bg_1A_01_02.png);
    background-position: top left;
    background-repeat: repeat-x;
}

/*--------------------------------------------------------
   ナビゲーション
--------------------------------------------------------*/
/* コンテンツ配置領域 */
/* ナビゲーション */
#navi_continer {
    position: absoulute;
}
#navi {
    position: absolute;
    top  :   1px;
    left :   5px;
    width: 900px;
}
#navi ul {
    margin : 0;
    padding: 0;
    list-style: none;
}
#navi li {
    color : #000000;
    float : left;
    width : 121px;
    margin: 0;
}
#navi li a {
    font-size : 1.0em;
    color     : #000000;
    display   : block;
    width     : 100%;
    height    : 13px;
    padding   : 12px 0;
    text-align: center;
    text-decoration   : none;
    border-left: 1px solid #CCCCCC;
}
#navi li a:link {
    background-image   : url(img/mainmenu_1A_01.png);
    background-position: top left;
    background-repeat  : no-repeat;
}
#navi li a:visited {
    background-image   : url(img/mainmenu_1A_01.png);
    background-position: top left;
    background-repeat  : no-repeat;
}
#navi li a:hover {
    background-image   : url(img/mainmenu_1A_01_on.png);
    background-position: left top;
    background-repeat  : repeat-x;
}
#navi li a:active {
    background-image   : url(img/mainmenu_1A_01_on.png);
    background-position: left top;
    background-repeat  : repeat-x;
}

/* サブメニュー */
/* サブメニュー全体 */
#navi ul.sub {
    background : #eeeeee;
    border-top : 1px solid #CCCCCC;
}
/* サブメニュー */
#navi ul.sub li {
    float: none;
    width: 119px;
}
/* サブメニュー（通常時）*/
#navi ul.sub li a {
    color       : #000000;           /* 文字色       黒    */
    background  : none;              /* 背景色       なし  */
    font-size   : 1.0em;             /* 文字サイズ   1.0em */
    padding     : 3px 0px;
    border-left   : 1px solid #CCCCCC;
    border-right  : 1px solid #CCCCCC;
    border-bottom : 1px solid #CCCCCC;
    height        : 40px;
    line-height : 1.3;
}
/* サブメニュー（マウスオーバー）*/
#navi ul.sub li a:hover {
    color: #ffffff;                  /* 文字色       白    */
    background-color: #64BEE6;
}
#navi ul li.navi_menu ul {
    display: none;
}
#navi ul li.navi_menu_on ul {
    display: block;
}

/* IE6用ハック */
* html #navi li {
    width: 110px;
}
* html #navi li a {
    padding-left : 5px;
    padding-right: 5px;
    font-size: 12px;
}
* html #navi li a:link {
    background-image : url(img/mainmenu_1A_01.png);
    background-position: top right;
    background-repeat: no-repeat;
}
* html #navi li a:visited {
    background-image : url(img/mainmenu_1A_01.png);
    background-position: top right;
    background-repeat: no-repeat;
}
* html #navi li a:hover {
    background-image : url(img/mainmenu_1A_01_on.png);
    background-position: left right;
    background-repeat: repeat-x;
}
* html #navi li a:active {
    background-image : url(img/mainmenu_1A_01_on.png);
    background-position: left right;
    background-repeat: repeat-x;
}

#navi .column1 {position:relative;}
#navi .column1 ul {display:block;}
#navi .column1 * ul {display:none;}
#navi .column2 {position:relative;}
#navi .column2 ul {display:block;}
#navi .column2 * ul {display:none;}
#navi .column3 {position:relative;}
#navi .column3 ul {display:block;}
#navi .column3 * ul {display:none;}


/* フォーマック商品特集　ナビゲーション */
#feature_navi {
    padding-top: 18px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    color: #555;
    width: 180px;
    float: left;
    font-size: 13px;
    letter-spacing: 1px
}
.feature_navi-sub {
    border-top: #444 1px solid;
    border-left: #444 1px solid;
    border-right: #444 1px solid;
    border-bottom: #444 1px solid;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 5px;
    margin: 0px 10px 6px;
    font-weight: bold;
    color: #fff;
    background-color: #693;
    text-align: center
}
#feature_navi ul {
    padding-top   :   0px;
    padding-left  :  40px;
    padding-right :  10px;
    padding-bottom:   0px;
    margin: 0px 4px 16px;
    list-style-type: none
}
#feature_navi li {
    padding-top   : 8px;
    padding-left  : 0px;
    padding-right : 0px;
    padding-bottom: 8px;
    margin-bottom : 2px;
    background-color: #fff
    background-repeat: no-repeat;
    text-align: left
}
#feature_navi a:link {
    color: #040
}
#feature_navi a:visited {
    color: #230
}
#feature_navi a:hover {
    color: #e00
}