@charset "UTF-8";
/* CSS Document */

/* =====================================================================
*    0. Bace Color
*    ---
*         Freecom Blue          #41A7E2
*         Freecom Light Blue    #CFE5F8
*         Freecom Gray          #474D51
*         ---
*         Gold for link color   #735212
*         Gold for hover color  #AB9144
*         Strong Blue           #01ABE6 (use for Product Name)
*         Strong Red            #E50007
*         ---
*         1st Issue             #996699
*         2nd Issue             #CC6600
*    ---
*    1.   Header
*    1.1. Global Menu
*    2.   Contents
*    2.1. Left Area
*    2.2. Center Area
*    2.3. Right Area
*    3.   Footer
*    3.1. Sitemap Area
*    3.2. Footer Area
* =================================================================== */

/* =====================================================================
*
*    1. Content Head
*
* =================================================================== */

.MS-head { background: url(../images/940K_head.gif) 0 0 no-repeat; background-color: #000000;}
.contentHead { padding: 20px; background: url(../images/940K_foot.gif) bottom left no-repeat;}
.contentHead h1 { padding: 51px 0 11px 10px; float: left;}
.contentHead ol { width: 310px; padding-left: 50px; float: left;}
.contentHead li {}
.contentHead li.link_MSi     { width: 294px; height: 40px; padding-top: 20px;}
.contentHead li.link_MSccp   { width: 309px; height: 35px; padding-top: 25px;}
.contentHead li.link_MSi a   { width: 294px; height: 40px; background: url(../images/bg_content01.gif) 0 0 no-repeat; display: block;}
.contentHead li.link_MSccp a { width: 309px; height: 35px; background: url(../images/bg_content02.gif) 0 0 no-repeat; display: block;}

/* =====================================================================
*
*    2. My Style interview
*
* =================================================================== */

.MSi-head                   { border-top: 1px solid #FFFFFF; padding-top: 29px; background: url(../images/940P_head.gif) 0 0 no-repeat; background-color: #CC6600;}
.MSinterview                { background: url(../images/940P_foot.gif) bottom left no-repeat;}
.MSinterview h2             { width: 259px; border-top: 1px solid #FFFFFF; float: left;}
.MSinterview ul             { width: 680px; border-left: 1px solid #FFFFFF; float: left;}
.MSinterview li             { border-top: 1px solid #FFFFFF;}
/*.MSinterview dl { height: 49px;}*/
.MSinterview dl.link        { height: 249px; position: relative;}
.MSinterview dl.sublink        { height: 119px; position: relative;}
.MSinterview dt             { background: url(../images/bg-coverImg.gif) 0 0 no-repeat;}
.MSinterview dd             { top: 20px; left: 20px; position: absolute;}
.MSinterview li dt a:hover img { opacity: 0.8;}
*:first-child+html .MSinterview li dt a:hover img { filter: alpha(opacity=80);}

/* =====================================================================
*
*    3. CUSTOM PAPER PROJECT
*
* =================================================================== */

#cppContainer { width: 680px; }

.MSccp-head { border-top: 1px solid #FFFFFF; padding-top: 29px; background: url(../images/940Y_head.gif) 0 0 no-repeat; background-color: #FFFF00;}
.MSccp-left { width: 259px; border-top: 1px solid #FFFFFF; float: left;}
.MSccp-right { width: 680px; border-left: 1px solid #FFFFFF; float: left; background: #FFFFFF;}

.about-ccp { padding: 20px; padding-right: 19px; background: #FFFFFF;}
.about-ccp h3 { width: 220px; height: 33px; background: url(../images/about-ccp.gif) 0 0 no-repeat;}
.about-ccp p { padding-top: 13px;}
.about-ccp p.cpp-date { font-weight: bold; text-decoration: underline;}
.about-ccp p.cpp-update { padding-top: 0;}

.cpp-update { padding: 0 9px 0 10px; background: url(../images/bg-cpp-update.gif) 0 0 repeat-y;}
.cpp-update-foot { padding-bottom: 30px; background: url(../images/foot-cpp-update.gif) bottom left no-repeat;}
.cpp-update h4 { width: 240px; height: 21px; background: url(../images/ttl-cpp-update.gif) 0 0 no-repeat;}
.cpp-update p { padding: 6px 8px 0 12px;}
.cpp-update p.cpp-date { font-weight: bold; text-decoration: underline;}

.CM-area {}
.CM-area p { width: 259px; height: 40px; background: url(../images/body_euCM.gif) 0 0 no-repeat;}
.CM-area ul { width: 236px; height: 91px; padding: 8px 0 14px 16px;}
.CM-area li { padding-right: 8px; float: left;}
p.bnr_TD-custom { padding-left: 10px;}

.ccpUnitHead { width: 680px; padding: 20px 0 0 0; border-top: 1px solid #FFFFFF; background: url(../images/680K_head.gif) 0 0 no-repeat; background-color: #000000;}
.ccpUnit { width: 640px; padding: 0 20px 20px 20px; background: url(../images/680K_foot.gif) bottom left no-repeat; }
.ccpUnit dl { width: 510px; float: left;}
.ccpUnit dt { width: 140px; padding-right: 15px; float: left;}
.ccpUnit dd { width: 355px; float: left;}
.ccpUnit dd.createrName strong { color: #FFFFFF;}
.ccpUnit dd.createrName a { color: #FFFF00;}
.ccpUnit dd.createrTxt { color: #FFFFFF;}
.ccpUnit ul { width: 125px; float: right; text-align: right;}
.ccpUnit li { width: 125px; height: 20px; padding-bottom: 10px;}
.ccpUnit li a { height: 20px; display: block;}
.ccpUnit li.soon { background: url(../images/icon_soon.gif) top right no-repeat;}

.ccpUnit li.good { height: 20px; overflow: hidden; }
.ccpUnit li.good a { position: relative; top: 0; display: block; padding-right: 64px; background: url(../images/icon_good_active.gif) top right no-repeat; text-align: right; color: #FFFF00; font-style: italic;}
	* html .ccpUnit li.good a { position: static; }
.ccpUnit li.good p.def { position: relative; padding-right: 64px; background: url(../images/icon_good.gif) top right no-repeat; text-align: right; color: #996699; font-style: italic; }

.ccpUnit li.pdf a { background: url(../images/icon_pdf.gif) top right no-repeat;}

.ccpUnit li.btn { background: transparent 40px 2px no-repeat; }
.ccpUnit li.btn a { width: 63px; margin: 0 0 0 auto; background: url(../images/icon_openclose.gif) right -20px; }
.ccpUnit li.btn a.close { background-position: 0 0; }
.ccpUnit li.btn #loading { position: absolute; left: 105px; top: -18px; }

.workArea { display: none; position: relative; width: 680px; overflow: hidden; }
.workArea .wrapper { position: relative; background: #FFFFFF; }
.workContainer { float: left; width: 680px; overflow: hidden; background: transparent; }

.workDigit {
	position: absolute;
	top: 1px;
	width: 33px;
	height: 33px;
	background: url(../images/cpp/digit_base.gif);
	line-height: 33px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}
.workDigit:hover { color: #FFFFFF; text-decoration: underline; }

.activeDigit { cursor: default; color: #FFFF00; }
.activeDigit:hover { color: #FFFF00; text-decoration: none; }

/* =====================================================================
*
*    4. Interview Common
*
* =================================================================== */

#ivw-head      { padding: 30px 0 65px; position: relative;}
#ivw-head h2   { position: absolute;}
#ivw-head dt   { float: left;}
#ivw-head dd   { float: left;}
#ivw-head li   { display: inline;}

/* Right Colum */
.ivw-body-main               { width: 679px; float: right;}
.ivw-body-main h3            { width: 659px; padding-bottom: 30px;}
.ivw-body-main p.ivw-ttl     { margin-top: 19px; padding: 9px 0 9px 8px;}
.ivw-body-main p.ivw-subttl  { padding: 13px 0 12px 19px;}
.ivw-body-main p.ivw-subbody { padding: 30px 0 12px 19px;}
.ivw-body-main p             { padding: 0 20px 0 19px;}

.colum-boxL { width: 399px; margin-bottom: 35px; float: left;}
.colum-boxR { width: 280px; margin-bottom: 35px; float: right;}

/* Left Colum */
.ivw-body-sub             { width: 200px; float: left;}
.ivw-body-sub img.profile { padding: 30px 0 10px;}
.ivw-body-sub blockquote  { padding-left: 2px;}
.ivw-body-sub p.pickup    { padding: 10px 0 40px 2px;}

.relatedInfoHead { padding-bottom: 10px; background: url(../images/mystyle/001/relatedInfo-foot.gif) bottom left no-repeat;}
.relatedInfo     { border-right: 1px solid #A3A6A8; border-left: 1px solid #A3A6A8; padding: 15px 9px;}
.relatedInfo dt  { padding: 15px 0 0 2px; font-weight: bold;}
.relatedInfo dd  { padding: 0 0 5px 2px;}
p.linkArea { background: url(../images/icon_blank.gif) 0 3px no-repeat;}
	*:first-child+html p.linkArea { background-position: 0 5px;}
	*html p.linkArea { background-position: 0 5px;}

blockquote.next-ivw { text-align: right; padding: 36px 0;}
#ivw-foot {}
#ivw-foot p { width: 250px; float: left;}
#ivw-foot dl { width: 690px; float: right;}
#ivw-foot dd { width: 335px; padding: 8px 0 6px 10px; float: left;}

/* ---------------------------------------
*    4.1. Leo Yoshida 01
*       main color #996699
*       color 50%  #CCB2CC
*       color 30%  #E0D1E0
* --------------------------------------- */

.leo-yoshida #ivw-head    { background: url(../images/mystyle/001/ivw-head.gif) 0 0 no-repeat;}
.leo-yoshida #ivw-head h2 { top: 60px; left: 50px;}

/* Right Colum */
.leo-yoshida .ivw-body-main           { border-left: 1px solid #E0D1E0;}
.leo-yoshida .ivw-body-main h3        { height: 64px; background: url(../images/mystyle/001/introduction.gif) 19px 0 no-repeat;}
.leo-yoshida .ivw-body-main p.ivw-ttl { border-top: 1px solid #E0D1E0; border-bottom: 1px solid #E0D1E0;}
.leo-yoshida .colum-boxR blockquote   { width: 186px; border: 1px solid #CCB2CC; padding: 7px 4px 7px 20px; color: #996699; background: url(../images/mystyle/001/img-asterisk.gif) 7px 11px no-repeat;}
	*:first-child+html .leo-yoshida .colum-boxR blockquote   { background-position: 7px 13px;}
	*html .leo-yoshida .colum-boxR blockquote   { background-position: 7px 13px;}
.leo-yoshida .ivw-body-main span      { color: #996699;}
							img.leo01 { margin: 0 -20px 0 19px; padding-top: 40px;}
							img.leo02 { margin-bottom: 15px;}
							img.leo03 { padding: 40px 0 0 19px;}

/* Left Colum */
.leo-yoshida img.pickupBody { padding: 60px 0 20px;}
.leo-yoshida p.linkArea { padding: 0 0 0 10px;}
	*:first-child+html .leo-yoshida p.linkArea { padding: 0 0 0 16px;}
	*html .leo-yoshida p.linkArea { padding: 0 0 0 16px;}

/* ---------------------------------------
*    4.2. Leo Yoshida 02
*       main color #CC6600
*       color 50%  #E6B380
*       color 30%  #F0D1B2
* --------------------------------------- */

.leo-yoshida2 #ivw-head    { background: url(../images/mystyle/002/ivw-head.gif) 0 0 no-repeat;}
.leo-yoshida2 #ivw-head h2 { top: 60px; left: 50px;}

/* Right Colum */
.leo-yoshida2 .ivw-body-main           { border-left: 1px solid #F0D1B2;}
.leo-yoshida2 .ivw-body-main h3        { height: 64px; background: url(../images/mystyle/002/introduction.gif) 19px 0 no-repeat;}
.leo-yoshida2 .ivw-body-main p.ivw-ttl { border-top: 1px solid #F0D1B2; border-bottom: 1px solid #F0D1B2;}
.leo-yoshida2 .colum-boxR blockquote   { width: 186px; border: 1px solid #E6B380; padding: 7px 4px 7px 20px; color: #CC6600; background: url(../images/mystyle/002/img-asterisk.gif) 7px 11px no-repeat;}
	*:first-child+html .leo-yoshida2 .colum-boxR blockquote   { background-position: 7px 13px;}
	*html .leo-yoshida2 .colum-boxR blockquote   { background-position: 7px 13px;}
.leo-yoshida2 .ivw-body-main span      { color: #CC6600;}
							img.leo01 { margin: 0 -20px 0 19px; padding-top: 40px;}
							img.leo02 { margin-bottom: 15px;}
							img.leo03 { padding: 40px 0 0 19px;}

/* Left Colum */
.leo-yoshida2 img.pickupBody { padding: 47px 0 10px;}
.leo-yoshida2 p.linkArea { padding: 0 0 0 10px;}
	*:first-child+html .leo-yoshida2 p.linkArea { padding: 0 0 0 16px;}
	*html .leo-yoshida2 p.linkArea { padding: 0 0 0 16px;}