@charset "utf-8";

/* 基本レイアウト
-------------------------------------------------- */

body {
font-family:"ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Arial, Helvetica, Verdana, sans-serif;
font-size: 14px;
text-align: center;
background-color: #fff;
}

.wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}

#topimage { width: 960px; height: 300px; }

#contents { clear: both; width: 960px; }
#main { float: left; width: 640px; }
#sidemenu { float: right; width: 300px; }

#subimage {
width: 960px;
height: 300px;
margin-bottom: 20px;
}

#pankuzu { text-align: left; margin-left:15px; margin-bottom: 25px; font-size: 12px; }

#subcontents { width: 930px; margin: 0 auto; text-align: left; }

#left { float: left; width: 240px; }

#right { float: right; width: 670px; }

#footer li { float: left; }

#subpage { float: left; width: 670px; }
#ichiran { float: right; width: 240px; }

/* 共用パーツ
-------------------------------------------------- */

h1 { backggound-color: #ffffff; background-image: url(../img/h1.jpg); background-repeat: no-repeat;
width: 930px; height: 71px; line-height: 56px; font-size: 18px; padding-left: 20px; font-weight: bold; }

h2 { background-color: #ffffff; background-image: url(../img/h2.jpg); background-repeat: no-repeat;
width: 670px; height: 71px; line-height: 56px; font-size: 18px; padding-left: 20px; font-weight: bold; }

h3 { color: #e91224; line-height:25px; height: 25px; font-size: 16px; font-weight: bold; margin-bottom: 10px;}

.doc { clear: both; padding: 0 10px 10px 10px; }
.docbox { clear: both; padding: 0 0 10px 0; }
.doc_gly { clear: both; padding: 20px 0 40px 0; background-color: #f2f2f2; }

p {
	font-size: 13px;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	color: #666;
}

.r {
text-align: right;
}

.l {
text-align: left;
}

.c {
text-align: center;
}

.fl {
float: left;
margin: 0 10px 0 0;
}

.fr {
float: right;
}

.mb5 { margin-bottom: 5px; }
.mb8 { margin-bottom: 8px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mt5 { margin-top: 5px; }
.mt20 { margin-top: 20px; }

.cb { clear: both; }

.ml3 { margin-left: 3px; }
.mr35 { margin-right: 35px; }

.navbutton {margin: 0 40px;}


/* スマートスクロール用記述
-------------------------------------------------- */

#back-top {
 position: fixed;
 bottom: 30px;
 margin-left: 95%;
}
#back-top a {
 width: 50px;
 display: block;
 text-align: center;
 font: 11px/100% Arial, Helvetica, sans-serif;
 text-transform: uppercase;
 text-decoration: none;
 outline: none;
}
#back-top a:hover {color: #000;}
/* arrow icon (span tag) */
#back-top span {
	width: 40px;
	height: 40px;
	display: block;
	margin-bottom: 7px;
no-repeat center center;
	/* rounded corners */
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	background-color: #eae5e3;
	background-image: url(../img/back_arrow.gif);
	background-repeat: no-repeat;
	background-position: center center;
}
#back-top a:hover span {background-color: #eee;}



/* メガメニュー用記述
-------------------------------------------------- */
.mega-menu ul, .mega-menu ul li {list-style: none;}
.mega-menu ul {position: relative; padding: 0; margin: 0;}
.mega-menu ul li ul {display: none;}
.mega-menu .sub {display: none;}
.mega-menu .sub ul {display: block;}

.mnavi{font: normal 14px Arial, sans-serif; line-height: 15px; z-index:9;}
.mnavi ul.mega-menu, .mnavi ul.mega-menu, .mnavi ul.mega-menu li {margin: 30px 0 0 0; padding: 0; border: none;}
.mnavi ul.mega-menu {float: right;  width: 660px; height: 50px; position: relative; border-left: 1px solid #e0e0e0; }
.mnavi ul.mega-menu li {float: left; margin: 0; padding: 0; font-size: 15px; font-weight: bold; border-right: 1px solid #ededed; }
.mnavi ul.mega-menu li a {float: left; display: block; color: #7f7f7f; padding: 18px 36px 22px 42px; text-decoration: none; }
.mnavi ul.mega-menu li a.dc-mega {position: relative;}
.mnavi ul.mega-menu li a .dc-mega-icon {display: block; position: absolute; top: 24px; right: 15px; width: 8px; height: 6px; background: url(../img/arrow.png) no-repeat 0 0;}
.mnavi ul.mega-menu li.mega-hover a, .mnavi ul.mega-menu li a:hover {background-position: 100% -60px; color: #000; text-shadow: none;}
.mnavi ul.mega-menu li.mega-hover a .dc-mega-icon {background-position: 0 100%;}

.mnavi ul.mega-menu li .sub-container {position: absolute; background: url(../img/bg_sub_left.png) no-repeat 0 100%; padding-left: 20px; margin-left: -3px;}
.mnavi ul.mega-menu li .sub {background: url(../img/bg_sub.png) no-repeat 100% 100%; padding: 20px 20px 20px 10px;}
.mnavi ul.mega-menu li .sub-container.mega .sub {padding: 20px 20px 10px 0;}
.mnavi ul.mega-menu li .sub .row {width: 100%; overflow: hidden; clear: both;}
.mnavi ul.mega-menu li .sub li {list-style: none; float: none; width: 170px; font-size: 0.9em; font-weight: normal;}
.mnavi ul.mega-menu li .sub li.mega-hdr {margin: 0 10px 10px 0; float: left;}
.mnavi ul.mega-menu li .sub li.mega-hdr.last {margin-right: 0;}
.mnavi ul.mega-menu li .sub a {background: none; border: none; text-shadow: none; color: #4a4a4a; padding: 7px 10px; display: block; float: none; text-decoration: none; font-size: 0.9em;}
.mnavi ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a {padding: 5px 5px 5px 15px; margin-bottom: 5px; background: #ef3d3d url(../img/bg_mega_hdr.png) no-repeat 0 0; text-transform: uppercase; font-weight: bold; color: #fff;}
.mnavi ul.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {color: #fff; text-shadow: none;}
.mnavi ul.mega-menu .sub li.mega-hdr li a {padding: 4px 5px 4px 20px; background: url(../img/arrow_off.png) no-repeat 5px 8px; font-weight: normal;}
.mnavi ul.mega-menu .sub li.mega-hdr li a:hover {color: #a32403; background: #efefef url(../img/arrow_on.png) no-repeat 5px 8px;}
.mnavi ul.mega-menu .sub ul li {padding-right: 0;}
.mnavi ul.mega-menu li .sub-container.non-mega .sub {padding: 20px 20px 20px 0;}
.mnavi ul.mega-menu li .sub-container.non-mega li {padding: 0; width: 190px; margin: 0;}
.mnavi ul.mega-menu li .sub-container.non-mega li a {padding: 7px 5px 7px 22px; background: url(../img/arrow_off.png) no-repeat 7px 10px;}
.mnavi ul.mega-menu li .sub-container.non-mega li a:hover {color: #a32403; background: #efefef url(../img/arrow_on.png) no-repeat 7px 10px;}




.mega-menu ul, .mega-menu ul li {list-style: none;}
.mega-menu ul {position: relative; padding: 0; margin: 0;}
.mega-menu ul li ul {display: none;}
.mega-menu .sub {display: none;}
.mega-menu .sub ul {display: block;}

#mega-menu-1 {
font: normal 13px Arial, sans-serif; 
list-style: none; 
position: relative; 
padding: 0; 
margin: 0;
}
#mega-menu-1 {
background: #222; 
width: 100px; 
height: 74px;
position: relative;
}
#mega-menu-1 li {
float: right; 
margin: 0; 
padding: 0; 
}
#mega-menu-1 li a {
float: right; 
display: block; 
color: #fff; 
padding: 12px 25px; 
background: #222; 
text-decoration: none;
}
#mega-menu-1 li.mega-hover a,
#mega-menu-1 li.mega-hover a:hover {
background: #CCC; 
color: #000;
}
#mega-menu-1 li a:hover {
background: #999; 
color: #000;
}


#mega-menu-1 .sub ul {
display: block;
}
#mega-menu-1 li .sub-container {
position: absolute;
}
#mega-menu-1 li .sub {
background: #efefef; 
padding: 15px; 
border: 1px solid #ccc;
}
#mega-menu-1 li .sub .row {
width: 100%; 
overflow: hidden;
clear: both;
}
#mega-menu-1 li .sub li {
list-style: none; 
float: none; 
width: 170px; 
font-size: 1em; 
font-weight: normal;
}
#mega-menu-1 li .sub li.mega-hdr {
margin: 0 10px 10px 0; 
float: left;
}
#mega-menu-1 li .sub li.mega-hdr.last {
margin-right: 0;
}
#mega-menu-1 li .sub a {
background: none; 
color: #111; 
padding: 7px 10px; 
display: block; 
float: none; 
font-size: 0.9em;
}
#mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 15px; 
margin-bottom: 5px; 
background: #6B6B6B; 
text-transform: uppercase; 
font-weight: bold; 
color: #fff;
}
#mega-menu-1 li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
}
#mega-menu-1 .sub li.mega-hdr li a {
padding: 4px 5px; 
font-weight: normal;
}
#mega-menu-1 .sub li.mega-hdr li a:hover {
color: #a32403; 
background: #efefef;
}
#mega-menu-1 .sub ul li {
padding-right: 0;
}
#mega-menu-1 li .sub-container.non-mega .sub {
padding: 10px;
}
#mega-menu-1 li .sub-container.non-mega li {
padding: 0; 
width: 190px; 
margin: 0;
}
#mega-menu-1 li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
}
#mega-menu-1 li .sub-container.non-mega li a:hover {
color: #a32403; 
background: #efefef;
}



/* TOPページギャラリー用記述
-------------------------------------------------- */
#slideshowtop {
    position:relative;
    height:300px;
}
#slideshowtop DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 300px;
    background-color: #FFF;
}
#slideshowtop DIV.active {
    z-index:10;
    opacity:1.0;
}
#slideshowtop DIV.last-active {
    z-index:9;
}
#slideshowtop DIV IMG {
    height: 300px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}


/* 中ページギャラリー用記述　表示テストページ用
-------------------------------------------------- */
#slideshow01 {
    position:relative;
    height:400px;
}
#slideshow01 DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 400px;
    background-color: #FFF;
}
#slideshow01 DIV.active {
    z-index:10;
    opacity:1.0;
}
#slideshow01 DIV.last-active {
    z-index:9;
}
#slideshow01 DIV IMG {
    height: 400px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}




/* ============================================================================
	タブ切り替えUIの実装　表示テストページ用
============================================================================ */
.sample ul#tabs {
	width:302px;
	list-style:none;
}

.sample ul#tabs li {
	padding:5px 0;
	border-right:1px #fff solid;
	width:100px;
	float:left;
	background-color:#eee;
	text-align:center;
	cursor:pointer;
}

.sample ul#tabs li#last {
	border-right:0;
}

.sample ul#tabs li.open {
	background-color:#333;
	color:#fff;
}

div.boxtab {
	padding:10px;
	border:1px #333 solid;
	width:280px;
	height:100px;
}

div#box1 {
	background-color:#f9ffff;
}

div#box2 {
	background-color:#fff9ff;
}

div#box3 {
	background-color:#fffff9;
}


/* ============================================================================
	ウイル強みページ用記述
============================================================================ */
div#stbox_01,
div#stbox_02,
div#stbox_03,
div#stbox_04 {
	width: 650px;
	border-bottom:1px #ccc solid;
	margin:0 0 10px 20px;
}
div#stbox_01 {height: 200px;}
div#stbox_02,
div#stbox_03,
div#stbox_04 {height: 180px;}

div#stbox_01 {background-image: url(../strong/img/stron_a01.jpg); background-repeat: no-repeat;}
div#stbox_02 {background-image: url(../strong/img/stron_a02.jpg); background-repeat: no-repeat;}
div#stbox_03 {background-image: url(../strong/img/stron_a03.jpg); background-repeat: no-repeat;}
div#stbox_04 {background-image: url(../strong/img/stron_a04.jpg); background-repeat: no-repeat;}

div#stbox_01 .l_box,
div#stbox_02 .l_box,
div#stbox_03 .l_box,
div#stbox_04 .l_box {
	width: 480px;
	float:left;
	}
div#stbox_01 .l_box {height: 200px;}
div#stbox_02 .l_box,
div#stbox_03 .l_box,
div#stbox_04 .l_box {height: 180px;}

div#stbox_01 .r_box,
div#stbox_02 .r_box,
div#stbox_03 .r_box,
div#stbox_04 .r_box {
	width: 150px;
	height: 160px;
	float:right;
	}
.l_boxtxt {margin:70px 0 0 10px; word-break:break-all;}
.r_boxtxt {text-align: right;}


/* ウイル強み内ギャラリー用記述
-------------------------------------------------- */
#slideshow_st {
    position:relative;
    height:160px;
}
#slideshow_st DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 160px;
    background-color: #FFF;
}
#slideshow_st DIV.active {
    z-index:10;
    opacity:1.0;
}
#slideshow_st DIV.last-active {
    z-index:9;
}
#slideshow_st DIV IMG {
    height: 160px;
    display: block;
    border: 0;
}


/* ============================================================================
	ウイル強み インラインフィニッシングシステム紹介ページ用記述
============================================================================ */


/* ウイル強み内ギャラリー用記述
-------------------------------------------------- */
#slideshow_ifs {
    position:relative;
    height:300px;
}
#slideshow_ifs DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height: 300px;
    background-color: #FFF;
}
#slideshow_ifs DIV.active {
    z-index:10;
    opacity:1.0;
}
#slideshow_ifs DIV.last-active {
    z-index:9;
}
#slideshow_ifs DIV IMG {
    height: 300px;
    display: block;
    border: 0;
}


/* ============================================================================
	タブ切り替えUIの実装　強みページ工場紹介
============================================================================ */
.sample ul#tabs {
	width:664px;
	list-style:none;
}

.sample ul#tabs li {
	padding:20px 0;
	border-right:1px #fff solid;
	width:165px;
	height:20px;
	float:left;
	background-color:#eee;
	text-align:center;
	cursor:pointer;
}

.sample ul#tabs li#last {
	border-right:0;
}

.sample ul#tabs li.open {
	background-color:#ff0000;
	color:#fff;
}

div.boxtab {
	padding:20px 10px 10px 10px;
	margin-bottom:10px;
	border:1px #fff solid;
	width:641px;
	height:800px;
}

div#box1,
div#box2,
div#box3,
div#box4 {background-color:#fff;}

.tab_gry {
	width: 610px;
	margin: 0 auto;
	padding: 20px 10px;
	background-color: #ECECEC;
	border: 1px solid #CCC;
}
.factxtb{color: #5C5C5C; font-size: 12px; font-weight: bold;}
.factxts {font-size: 11px; line-height: 20px; margin-bottom:10px;}