@charset "UTF-8";

/*
===== CONTENTS ===========================================


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

/*
===== 1: BASE STYLE ====================================
*/


html{overflow:scroll;}

body{background:url(/20221103/header_bg.png) 0 top repeat-x; font:13px  'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif,'Osaka',arial,helvetica,verdana,clean,sans-serif; *font-size:small; *font:x-small; color:#333; line-height:1.7em;  }
	

	
/*-- FONT CHANGE --*/
	
body.fontL #contents{font-size:15px;}
body.fontM #contents{font-size:13px;}
body.fontS #contents{font-size:11px;}
	
.clr{ clear:both;}

table { margin-top:10px;font-size:inherit;font:100%; width:100%; word-break: break-all;}
table tr th,table tr td{ border: solid 1px #CCC; padding:5px; word-break: normal !important;}

.text10 { font-size:77%; }
.text11 { font-size:85%; }
.text12,.fss { font-size:93%;}
.text13 { font-size:100%; }
.text14,.fsm/*-,LI-*/ { font-size:108%; }
/*-.text15 { font-size:116%; }-*/
.text16,h2,.fsl { font-size:123.1%;}
/*-.text17 { font-size:131%; }-*/
.text18,h1 { font-size:138.5%;}
/*-.text19 { font-size:146.5%; }
.text20,h1 { font-size:153.9%; }
.text21 { font-size:161.6%; }
.text22 { font-size:167%; }
.text23 { font-size:174%; }
.text24 { font-size:182%; }
.text25 { font-size:189%; }
.text26 { font-size:197%; }

h1,h2,h3,h4.h5,h6{letter-spacing:0.05em;}
-*/

strong{ font-weight: bold;}

.icon{ vertical-align:middle;}

a{color:#666;text-decoration: none;}
a:link {color:#666;text-decoration: none;}
a:visited {color:#666;}
a:hover {color:#039;text-decoration:underline;}
a:active {text-decoration:none;}

#contents a{color:#258;text-decoration: none;}
#contents a:link {color:#258;text-decoration: none;}
#contents a:visited {color:#258;}
#contents a:hover {color:#039;text-decoration:underline;}
#contents a:active {text-decoration:none;}

/*-- WRAPPER --*/
div#wrapper{ width:980px; margin:0 auto; }
/*-- / WRAPPER --*/


/*
===== 2: HEADER ====================================
*/



div#header{ width:980px; height:95px; margin:0 auto; position:relative; z-index:100;}
div#header div#ci_tdk{ width:120px; float:left; margin:20px 0 20px 20px; display:inline;}
div#header div#countryid{ width:58px; float:left; margin-left:30px; margin-top:35px; display:inline;}
div#header #search_area{ width:260px; height:30px; float:right; background:url(/common/img/search_form_bg.png);}
div#header #ww_btn{ width:130px; height:15px; float:right; margin-top:5px; margin-right:10px; margin-left:20px; display:inline;}
div#header #ww_btn a{ display:block; background: #fff url(/common/img/ww_btn_on.gif) no-repeat;}
div#header #ww_btn a:hover{ background-color: transparent;} /*-- IE6 --*/
div#header #ww_btn a:hover img{ visibility:hidden;}
div#header form input#srchTxt{ width:180px; height:18px; margin-left:10px; margin-top:5px; border: solid 1px #ccc;}
div#header form input#srch_btn{ margin-top:5px;}
div#header form p{ float:left;}

div#header ul#btn_lang{ width:154px; position:absolute; right:10px; bottom:38px;}
div#header ul#btn_lang li{ float:left;}
div#header ul#btn_lang li#ch{ background:url(/common/img/btn_lang_ch_on.gif) 0 0 no-repeat;}
div#header ul#btn_lang li#en{ background:url(/common/img/btn_lang_en_on.gif) 0 0 no-repeat;s}
div#header ul#btn_lang li#ch a{ display:block; width:55px; height:20px;}
div#header ul#btn_lang li#en a{ display:block; width:99px; height:20px;}
div#header ul#btn_lang li a:hover{ background-color: transparent;} /*-- IE6 --*/
div#header ul#btn_lang li a:hover img{ visibility:hidden;}
/*-- GLOBAL NAVIGATION --*/
div#header ul#global_nav li{ width:140px; float:left; }
div#header ul#global_nav li a{ display:block; background: #fff url(/common/img/global_nav_on.png) no-repeat;}
div#header ul#global_nav li#nav1 a{ background-position:0 0;}
div#header ul#global_nav li#nav2 a{ background-position:-140px 0;}
div#header ul#global_nav li#nav3 a{ background-position:-280px 0;}
div#header ul#global_nav li#nav4 a{ background-position:-420px 0;}
div#header ul#global_nav li#nav5 a{ background-position:-560px 0;}
div#header ul#global_nav li#nav6 a{ background-position:-700px 0;}
div#header ul#global_nav li#nav7 a{ background-position:-840px 0;}
div#header ul#global_nav li a:hover{ background-color: transparent;} /*-- IE6 --*/
div#header ul#global_nav li a:hover img{ visibility:hidden;}
ul.menu li ul.sub{ width:198px; position:absolute; border-bottom: solid 3px #eee; display:none; z-index:500 !important;}
ul.menu li ul.sub li{ width:170px; clear:both;}
ul.menu li ul.sub li a{ width:170px; background: #fff none !important; padding: 5px 10px; border-left: solid 4px #27e; border-right: solid 4px #ccc; border-bottom: solid 1px #ccc; line-height:1.5em;}
ul.menu li ul.sub li a:hover{ background:#F0FAFF !important;}
ul.menu{zoom:1;}
ul.menu:after { height:0;visibility:hidden;content:".";display:block;clear:both;}

body#news_press div#header ul#global_nav li#nav2 a img,body#about_tdk div#header ul#global_nav li#nav1 a img{ visibility:hidden;}
/*-- / GLOBAL NAVIGATION --*/

/*-- TOPIC PATH --*/
#utility_area{ height:23px; background:url(/common/img/topicpath_bg.gif) repeat-x; position:relative; }
#utility_area ul#topicpath li{ display:inline; background:url(../img/arrow_01.gif) 0 0.5em no-repeat; padding-left:10px; margin-right:3px; line-height:22px;}
#utility_area ul#topicpath li.home{ background: none; padding-left:0;}
/*-- / TOPIC PATH --*/

/*-- FONT SIZE --*/
#utility_area #function_box{ height:20px; margin-top:3px; float:right; background-color:#FFF; border-left: solid 1px #ccc; padding-left:5px; width:84px; margin-left:5px;}
#utility_area #function_box ul#fsize li{ cursor:pointer; float:left; width:18px; margin-left:1px; display:inline; }
#utility_area #function_box ul#fsize li#small{ background:url(/common/img/font_s_btn_o.gif) 0 top no-repeat;}
#utility_area #function_box ul#fsize li#medium{ background:url(/common/img/font_m_btn_o.gif) 0 top no-repeat;}
#utility_area #function_box ul#fsize li#large{ background:url(/common/img/font_l_btn_o.gif) 0 top no-repeat;}
#utility_area #function_box ul#fsize li:hover img{ visibility:hidden;}
ul#fsize li#medium img{ visibility:hidden;}
body.fontS ul#fsize li#small img , body.fontM ul#fsize li#medium img , body.fontL ul#fsize li#large img{ visibility:hidden !important;}
body.fontS ul#fsize li#medium img , body.fontS ul#fsize li#large img , body.fontM ul#fsize li#small img , body.fontM ul#fsize li#large img , body.fontL ul#fsize li#small img , body.fontL ul#fsize li#medium img { visibility: visible !important;}
/*-- / FONT SIZE --*/

/*-- PRINT BTN --*/
#print_btn{ float:right; margin-top:1px; width:20px; height:17px; background:url(/common/img/print_btn_o.gif) 0 0 no-repeat; margin-left:3px; display: block;}
#print_btn a:hover img{ visibility:hidden; width:20px; height:17px; display:block;}
/*-- / PRINT BTN --*/

/*-- Share Btn --*/
a#share_btn{ display:block; width: 40px; height:18px; margin-top:3px;background:url(/common/img/share_btn_o.gif) 0 0 no-repeat; float:right;}
a#share_btn:hover img { visibility:hidden;}
/*-- / Share Btn --*/

/*-- STAGE HEAD --*/
h1{ width:980px; height:60px; margin: 1px auto 0 auto;}
#stage{ margin:20px 0 40px 0; z-index:-10 !important;background:url(/common/img/bg_main.gif) left top repeat-y;}
/*-- / STAGE HEAD --*/



/*
===== 3: SIDE NAVIGATION ====================================
*/

#left_box{ width:200px; float:left; background: url(../img/sidenav_bg.gif);}
#left_box ul#side_nav{ border-top: solid 1px #DDD; border-bottom: solid 4px #DDD;}
#left_box ul#side_nav li { border-right: solid 1px #DDD; border-bottom: solid 1px #DDD; border-left: solid 1px #DDD;}
#left_box ul#side_nav li a{ display:block; width:186px; background:url(../img/sidenav_bg_of.png) 0 bottom no-repeat; padding: 5px 0 5px 12px; line-height:1.5em;}
#left_box ul#side_nav li a:hover{ background:url(../img/sidenav_bg_on.png) 0 bottom no-repeat; }

#left_box ul#bnr li {margin-top: 20px;}
#left_box ul#bnr li a:hover img{/*モダンブラウザ用*/opacity:0.8; /*IE7以下用*/filter:alpha(opacity=80);/*IE8用*/-ms-filter:"alpha(opacity=80)";}

/*
===== 4: CONTENTS ====================================
*/

#contents{ float:right; width:760px;}
#contents h2{ width:760px; height:40px; margin-bottom:20px;}

#contents #main{ float:left; width:560px;}
/*.link_icon{ vertical-align: sub;}*/
.link_icon{ vertical-align: middle;}/*231028追加*/
/*#stage a span{ font-size:1.2em; line-height:1em;}*/
#stage a span.text10{ font-size:0.9em; }
ul.notes{ padding:5px; background-color: #F8F8F8; margin-top:20px;}
ul.notes li{padding-left: 0.9em;text-indent: -0.9em; color:#666; line-height:1.5;}
ul.note li{ padding:5px 5px; border: dotted 2px #ccc; margin-top:10px; color:#666; font-weight: bold; line-height:1.5em;padding-left: 4em;text-indent: -3.5em; background-color:#f9f9f9;}
table tr th,table tr td{ line-height:1.5em;}

#stage #contents h4{ background:url(/common/img/h4_bg.gif) 0 top repeat-y; border-left: solid 5px #bde; padding:10px 5px; color:#036; font-weight: bold; margin-top:40px; width:745px; }


#unit_plugin_link{ margin-top:20px; padding-top:10px; border-top: solid 1px #ddd; }
#unit_plugin_link img{ vertical-align:middle;}

ul#page_anchor {background: url("/common/img/page_anchor_bg.gif") repeat-y scroll 0 top #F6F6F6;border: 1px solid #EEEEEE;padding: 5px 10px;}
ul#page_anchor li {background: url("/common/img/page_anchor_ico.gif") no-repeat scroll 0 0.7em transparent;padding-left: 13px;}

/*
===== 5: FOOTER ====================================
*/

#pgtop{ width:980px; margin: 0 auto 20px auto; border-bottom: solid 5px #EEE;}
#pgtop a{ width:80px; height:20px; display:block; background:url(../img/pgtop_btn_o.png) 0 0 no-repeat; margin-left:auto;}
#pgtop a:hover img{ visibility:hidden;}

#footer{  height:50px; background: url(../img/footer_bg.gif) 0 top repeat-x; padding-top:15px;}
#footer div#footer_inner{ width:980px; margin:0 auto;}
#footer div#footer_inner p{ float:right; width:400px; text-align:right; color:#999; line-height:1.5em;}
#footer div#footer_inner a{ border-bottom: dotted 1px #ccc;}

#footer_sitemap{ width:980px; margin: 0 auto 20px auto; position:relative;}
#footer_sitemap dl{ width:225px; border-left: solid 10px #EEE; padding-left:10px; float:left; display:inline;}
#footer_sitemap dl dt{ margin-bottom:5px; font-weight: bold;}
#footer_sitemap dl dd ul{ margin-bottom:20px;}
#footer_sitemap a span{ font-size:1.1em; line-height:1.5em;}
#unit_bnr_steam{ display:block; width:200px; height:120px; position:absolute; top:299px; right:25px;}




/*
===== 6: POPUP WIN ====================================
*/


body#popwin{ background: none ;}
body#popwin #header{ position:relative; width:100%; height:60px;background:url(/common/img/header_bg.png) 0 -10px repeat-x;}
body#popwin #header #ci_tdk{ margin-top:15px;}
body#popwin #header a#close{ display:block; width:60px; height:20px; position:absolute; right:0; top:20px; margin-right:20px;}
body#popwin #contents{ float: none; width: auto !important; margin:20px;}
body#popwin #contents h2{ border-bottom: dotted 1px #333; margin-bottom:10px; width:auto; height: auto;}
body#popwin #footer{ text-align:center;}



/*
    ColorBox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(/common/img/controls.png) no-repeat -100px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(/common/img/controls.png) no-repeat -129px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(/common/img/controls.png) no-repeat -100px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(/common/img/controls.png) no-repeat -129px -29px;}
    #cboxMiddleLeft{width:21px; background:url(/common/img/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(/common/img/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(/common/img/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(/common/img/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(/common/img/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious.hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(/common/img/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext.hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(/common/img/loading_background.png) no-repeat center center;}
        #cboxLoadingGraphic{background:url(/common/img/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(/common/img/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose.hover{background-position:-25px -25px;}

/*
  The following fixes a problem where IE7+ replaces a PNG's alpha transparency with a black fill
  when an alpha filter (opacity change) is set on the element or ancestor element.
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
  The following provides PNG transparency support for IE6
*/
.cboxIE6 #cboxTopLeft{background:url(/common/img/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(/common/img/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(/common/img/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(/common/img/borderBottomLeft.png);}
.cboxIE6 #cboxBottomCenter{background:url(/common/img/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(/common/img/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(/common/img/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(/common/img/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}