@charset "utf-8";
/* CSS Document */
body {
    text-align:center;
    background:url(images/bg_main.png) left bottom no-repeat fixed;
}

body.noBg {
    background: none;
}

#mainBody, #header {
    margin-left:auto;
    margin-right:auto;
}

/* p */
p {
    margin : 5px 0;
    padding: 5px;
}

/*
 * header
 */
#header {
    width:100%;
    height:60px;
    background:url(images/bg_head.png) top repeat-x;
    position:fixed;
    top:0;
    left:0;
    z-index:3;
}
#header h1 {
    background:url(images/logo_s.png) top left no-repeat;
    width:300px;
    height:34px;
    margin:0.8em 0 0 0.8em;
    float:left;
}
ul#mainMenu, ul#mainMenu li, ul#mainMenu li a {
    display:block;
}
ul#mainMenu {
    float:right;
}
ul#mainMenu > li {
    float:left;
}
ul#mainMenu > li > ul {
    display:none;
}
ul#mainMenu > li > ul > li {
    background-color:#cccccc;
}
ul#mainMenu li a {
    width:8em;
    height:20px;
    margin-top:18px;
    text-align:center;
    color:#9D4E0D;
}
ul#mainMenu li a:hover {
    color:#cc3300;
}
ul#mainMenu > li > ul > li a {
    margin-top:1px;
}
ul#mainMenu li ul li:last-child a {
    margin-top:0;
}
ul#mainMenu > li > ul li:first-child > a {
    margin-top:1px;
}
#mainBody {
    width:800px;
    position:relative;
    top:60px;
    z-index:1;
    text-align:left;
    padding-bottom:4em;
}
#mainBody #mainImg {
    width:800px;
    height:210px;
    margin-left:auto;
    margin-right:auto;
    padding-top:2em;
    background:url(images/t_shift_banner.png) center top no-repeat;
}
#mainImg p {
    width:260px;
    text-align:right;
    float: right;
    margin: 0 25px 0 0;
    padding: 0;
}
#mainImg > p + p {
    margin-top: 95px;
    font-size: 16px;
    font-weight: bold;
}

#mainImg > p + p > a {
    display: inline-block;
    background: url(images/select_on1.png) top left no-repeat;
    padding-left: 0px;
    width: 165px;
    height: 20px;
    line-height: 20px;
    color:#9D4E0D;
}

#pvLink {
	float: right;
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    background: url(images/select_on1.png) top left no-repeat;
    width: 175px;
    height: 20px;
    line-height: 20px;
    padding-right: 20px;
    color:#9D4E0D;
    text-align: right;
}

#mainImg > p + p > a:hover {
/*    background: url(images/select_on.png) top left no-repeat; */
    color:#cc3300;
}

#mainImg p strong {
    letter-spacing:0.08em;
}
a#ribbon {
    display: inline-block;
    position: relative;
    width: 376px;
    height:140px;
    top:70px;
    left:150px;
    background: url(images/ribbon_trial.png) top left no-repeat;
    float: left;
}

a#ribbon:hover {
    background: url(images/ribbon_trial_on.png) top left no-repeat;
}

h2#detailTitle { width:270px; background:url(../t_shift/images/h2_detail.jpg) left top no-repeat; }
h2#sysTitle { width:100%; background:url(../t_shift/images/h2_sys.jpg) left top no-repeat; }
h2#specTitle { width:100%; background:url(../t_shift/images/h2_spec.jpg) left top no-repeat; }
h2#pvTitle { width:100%; background:url(../t_shift/images/h2_pv.jpg) left top no-repeat; margin-bottom: 1em;}
#content {
    width:800px;
    height:470px;
    text-align:left;
    margin: 0.5em auto 0 auto;
    background:url(images/bg_top_content.jpg) bottom right no-repeat;
}
#areaRight {
    float:right;
    width:35%;
    margin-left:3%;
}
#areaLeft {
    float:left;
    width:60%;
}
#areaLeft h2 + *, #areaRight h2 + * {
    margin-left:60px;
}

#pvcTabs div, #pvcTabs > ul,
.spec h3,
.spec p,
.spec table {
    width:740px;
    margin-left:60px;
}

/* デモページのタブ切り替えはmargin-leftを小さく */
#appDemo > #pvcTabs div, #appDemo > #pvcTabs > ul {
    margin-left: 25px;
}

.spec table {
    width:90%;
    background:url(images/bg_table.jpg) top center repeat-x #B7DBFF;
}
.spec h3 {
    margin-top:0;
    margin-left:3.2em;
    padding-left:1.8em;
    background:url(../images/dtl_navi/h3_ico_min.png) center left no-repeat;
}
h3.clrPV {
    margin-top:0;
    padding-left:1.8em;
    background:url(../images/dtl_navi/h3_ico_min.png) center left no-repeat;
}
.spec p {
    padding:0.5em 0 0.5em 0;
    margin:0 1em 0.5em inherit;
    border-top:1px solid #cccccc;
}

/* specテーブル td */
*+html table.spec td { /* IE7 */
    background-image: none;
    background-color: #fff;
}

#content h3, #content p {
    width:457px;
    margin-left:10px;
}
#content p, #content ul {
    width:390px;
    margin-top:0;
    margin-left:5.5em;
}
#content ul {
    margin-top:14px;
}
#content li {
    float:left;
}
#content li a {
    display:block;
    width:8.5em;
    height:24px;
    margin:0 5em 1em 2em;
    background:url(images/btn_top_list_off.png) center no-repeat;
    text-align:center;
    font-weight:bold;
    line-height:24px;
    color:#666;
}
#content li a:hover {
    color:#C30;
    background:url(images/btn_top_list_on.png) center no-repeat;
}

#footer {
    clear: both;
    position:fixed;
    left:0;
    bottom: 0px;
    width:100%;
    height:2em;
    color:#ffffff;
    background-color:#333333;
    border-top:2px solid #cccccc;
    z-index:2;
}
#footer * {
    margin:0.2em 0.5em 0 0.5em;
}
#footer address {
    float:left;
}
#footer ul#logout {
    float:right;

}
#footer li {
    float:left;
    display:inline;
    margin:0;
}
ul a:link,
ul a:visited {
    color:#ffffff;
    text-decoration:none;
}
ul a:hover {
    color:#FF9;
    text-decoration:underline;
}
#demoTabTitle:hover {
    text-decoration:none;
    background-color: #CCCCCC;
}
.demoTab:hover #demoTabTitle {
    background-color: #CCCCCC;
}
#demoTabTitle {
    color:#9D4E0D;
    width:8em;
    height:20px;
    margin-top:18px;
    text-align:center;
}

/* 特徴エリア */
div.pointArea {
    height: auto;
}

div.point {
    width: 30%;
    float: left;
    margin: 5px 5px;
    padding: 5px 5px;
}

ol#detailList li {
    float:none;
    display:block;
    width:180px;
    height:24px;
    line-height:200%;
    margin-bottom:2px;
}
/* 詳細タブ・マウスアウト時 */
ol#detailList a {
    float:none;
    display:block;
    font-weight:bold;
    width:100%;
    height:24px;
    padding-left:2em;
    margin:0;
    text-align:left;
    color:#036;
    background:url(images/bg_sub_off.jpg) center right no-repeat #FFFFCC;
    border-left:4px solid #cccccc;
    text-decoration:  none;
}

/* 詳細タブ・マウスオーバー時 */
ol#detailList a.act, ol#detailList a:hover {
    border-left:4px solid #3399FF;
    background:url(images/bg_sub_off.jpg) center right no-repeat #FFFFCC;
    text-decoration:underline;
}

ol#promotionalVideoList {
    height: 48px;
    display: block;
}

ol#promotionalVideoList li {
    float:none;
    display:block;
    width:180px;
    height:24px;
    line-height:200%;
    margin-bottom:2px;
}
/* 詳細タブ・マウスアウト時 */
ol#promotionalVideoList a {
    float:none;
    display:block;
    font-weight:bold;
    width:85%;
    height:24px;
    padding-left:2em;
    margin:0;
    text-align:left;
    color:#036;
    background:url(images/bg_sub_off.jpg) center right no-repeat #FFFFCC;
    border-left:4px solid #cccccc;
    text-decoration:  none;
}

/* 詳細タブ・マウスオーバー時 */
ol#promotionalVideoList a.act, ol#promotionalVideoList a:hover {
    border-left:4px solid #3399FF;
    background:url(images/bg_sub_off.jpg) center right no-repeat #FFFFCC;
    text-decoration:underline;
}

/* 内容 初期状態*/
div[id^="dtl"] {
    display: none;
    width:610px;
    text-align:left;
    padding:1em;
    background-color:#ffffff;
}

ol > div {
    list-style: square;
}
ol > div img {
    margin:1em auto 1em auto;
}
div#detailArea {
    height:auto;
    margin-top:0;
    margin-left:60px;
    list-style-position:outside;
    border: 0px solid #DFEAF7;
}
div#promotionalVideoArea {
    height:auto;
    margin-top:2em;
    margin-bottom:2em;
    list-style-position:outside;
    border: 0px solid #DFEAF7;
    clear: both;
}

div#detailArea * {
}
div[id^="dtl"] div {
    float:right;
    width:140px;
    text-align:center;
    line-height:26px;
    height:26px;
    margin:0;
    color:#FFF;
    font-weight:bold;
    background:url(../images/dtl_navi/bg_close_off.jpg) top center no-repeat;
    cursor: pointer;
}
div[id^="dtl"] h3 {
    float:left;
    width:450px;
    text-align:left;
    line-height:26px;
    padding-left:1em;
    overflow:hidden;
    height:26px;
    font-weight:bold;
    background:url(../images/dtl_navi/bg_here.jpg) top left no-repeat;
}
div[id^="dtl"] li {
    margin-left:1em;
    padding-left:1.8em;
    line-height:2em;
    list-style-type:none;
    background: url(../images/dtl_navi/h3_ico_min.png) center left no-repeat;
}
div[id^="dtl"] img {
    width:580px;
    margin:1em auto 1em auto;
}

div div.lbNext {
    padding-right:0.5em;
    background:url(../images/dtl_navi/bg_next_off.jpg) center no-repeat;
}
div div.lbPrev {
    float:left;
    padding-left:0.5em;
    background:url(../images/dtl_navi/bg_prev_off.jpg) center no-repeat;
}
div div.lbClose {
    background:url(../images/dtl_navi/bg_close_off.jpg) top center no-repeat;
}
div div.lbNext:hover { background:url(../images/dtl_navi/bg_next_on.jpg) center no-repeat; }
div div.lbPrev:hover { background:url(../images/dtl_navi/bg_prev_on.jpg) center no-repeat; }
div div.lbClose:hover { background:url(../images/dtl_navi/bg_close_on.jpg) center no-repeat; }

/* トップ画像スライド */
div.fRight {
    width:310px;
    margin-left:20px;
    padding-top:20px;
}
div#imgToggle {
    display:inline-block;
    position:relative;
    width:250px;
    height:156px;
    overflow:hidden;
    vertical-align:middle;
    margin:0;
    padding:0;
    /display: inline;
    /zoom: 1;
}
div#imgToggle ul {
    display:block;
    position:relative;
    left:0;
    width:1000px;
    margin:0;
    padding:0;
}
div#imgToggle ul li {
    float:left;
}
a#tglPrev, a#tglNext {
    display:inline-block;
    width:15px;
    height:60px;
    margin:0;
    padding:0;
    color:#333333;
    text-decoration:none;
    vertical-align:middle;
    /display: inline;
    /zoom: 1;
}
a#tglPrev { background:url(images/btn_tgl_off.jpg) top left no-repeat; }
a#tglNext { background:url(images/btn_tgl_off.jpg) top right no-repeat; }
a#tglPrev:hover { background:url(images/btn_tgl_on.jpg) top left no-repeat; }
a#tglNext:hover { background:url(images/btn_tgl_on.jpg) top right no-repeat; }