@charset "UTF-8";
/***********************-
タイトル : 箱サイトNEW
概要：ベーススタイルシート

制作日：2014/08

-***********************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
sup,
sub {
    height: 0;
    line-height: 1;
    vertical-align: baseline;
    _vertical-align: bottom;
    position: relative;
	font-size:80%;
     
}
 
sup {
    bottom: 1ex;
}
 
sub {
    top: .5ex;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

section, nav, article, aside, hgroup,
header, footer, figure, figcaption, summary {
	display: block;
	margin: 0;
	padding: 0;
}
/*右フロート*/
.alignright {
   float: right;
}
/*左フロート*/
.alignleft {
   float: left;
}

/*全てをクリア*/
.clear {
   clear: both;
} 

/*ハック*/
.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   height: 0;
   visibility: hidden;
}
.clearfix { display: inline-block; }
/* exlude MacIE5 \*/
* html .clearfix { height: 1% }
.clearfix {display:block;}
/* end safari */ 

 /*ボディ*/
body {
	margin: 0;
	padding: 0;
	line-height: 1.5;
	text-align: center;
	font-family:'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
	font-size: 90%;
	margin:0 auto;
	background:#fff;
	color:#000;
}

/*リンクカラー*/
link {
	text-decoration: none;
}
a:link {
	color: #000;
	text-decoration: none;
}
a:visited { 
	color: #000;
	text-decoration: none;
}
a:hover {
	color:#C00;
}
a:active {
	color:#F90;
}

a:hover img{
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}


/* ボタン　ロールオーバー　*/

a.rolloverPositionMenu {
 display: block;
 overflow: hidden;
 text-align: center;
 position: relative; 
}
a.rolloverPositionMenu:hover img {
 position: relative;
 opacity: 1;
	/* IE */
	filter: alpha(opacity=100);
}

/*nav*/

#sidenav ul { list-style:none; margin:26px 0 0 16px;  font-size:100%; font-weight:bold; }
#sidenav ul li { list-style:none; margin:0 0 0 0; text-align:left;  }

#sidenav li#sidemitumori a,#sidenav li#sidenagare a,#sidenav li#sidesam a,#sidenav li#sidezu a,#sidenav li#sidefax a,#sidenav li#sideex a{ width:200px; 	display: block;
	text-align: center;
	padding:0; }
#sidenav  li a:hover img {left:-200px; }
#underbtn li#sidefax a,#underbtn li#sidesam a,#underbtn li#sidezu a{ width:210px; 	display: block; height:60px;
	text-align: center;
	padding:0; }
#underbtn li a:hover img {left:-210px; }
#underbtn p{margin:15px 0 30px; font-size:90%; text-align:center;}
#underbtn p strong{color:#C00;}

#underbtn ul { list-style:none; margin:45px auto 0; width:670px; }
#contact2 #underbtn ul { list-style:none; margin:5px auto 0; width:670px; }
#underbtn ul li {display:inline-block; *display: inline; *zoom: 1;margin:0 5px!important; padding:0!important;}

body#about #sidenav li#sidenagare a img,body#ex #sidenav li#sideex a img,body#mitumori #sidenav li#sidemitumori a img,body#mituori #sidenav li#sidemitumori a img,
body#contact #sidenav li#sidezu a img,body#selection #sidenav li#sidesam a img{margin-left:-200px;}
body#about #sidenav li#sidenagare a:hover img,body#ex #sidenav li#sideex a:hover img,body#mitumori #sidenav li#sidemitumori a:hover img,body#mituori #sidenav li#sidemitumori a:hover img,
body#contact #sidenav li#sidezu a:hover img,body#selection #sidenav li#sidesam a:hover img{left:0;}


/* =side
----------------------------------------------- */
#sidenav li#sidemitumori { margin:10px 0 0 0; }
#sidenav li#sidesam { margin:15px 0 0 0; }
#sidenav li#sideex {margin:15px 0 0 0; }


#sidenav ul li#sidehome,#sidenav ul li#sidecase,#sidenav ul li#sidecompany,#sidenav ul li#sidere { margin:0 0 0 8px; text-align:left;  }
#sidenav ul li#sidehome a,#sidenav ul li#sidecase a,#sidenav ul li#sidecompany a,#sidenav ul li#sidere a,#sidenav ul li#sidecontact a,#sidenav ul li#sideguide a ,
#sidenav ul li#sidemail a,#sidenav ul li#sidemail2 a{ text-decoration:underline; }
#sidenav ul li#sidecase,#sidenav ul li#sideguide  { margin:15px 0 15px 8px; }
#sidenav ul li#sideguide span{ display:block; font-size:90%;}

#sidenav ul li#sidecompany{ margin:0px 0 5px 8px; }
#sidenav ul li#sidecontact{ margin:20px 0 5px 8px; }
#sidenav ul li#sidemail,#sidenav ul li#sidemail2{ margin:0px 0 5px 0.8em; font-size:90%; font-weight:normal; padding:0 0 0 1.5em;}
#sidenav ul li#sidemail:before,#sidenav ul li#sidemail2:before{  content:"・"; margin:0 0 0 -1em;}

#sidenav ul li#sidecase ul { margin:5px 0  0 1em; }
#sidenav ul li#sidecase ul li { margin:0 0 5px; line-height:1.3; }
#sidenav ul li#sidecase ul li a:before  { content:"・" }

body#company #sidenav li#sidecompany a,body#case #sidenav li#sidecase a.casetitle,
body#case .material #sidenav li#sidezaisitu a,body#case .join #sidenav li#sidesetugo a,
body#case .method #sidenav li#sidetobira a,body#case .method #sidenav li#sideother a,body#contact2  #sidenav li#sidecontact a,
body.alumi  #sidenav li#sidealum a,body#about #sidenav ul li#sideguide a ,body#mail #sidenav ul li#sidemail a,body#mail #sidenav ul li#sidemail2 a{color:#C00;}




/* =Header
----------------------------------------------- */
#mainheader{ margin:0px auto; width:960px; height:176px;}
#mainheader h1{ text-align:left; color:#FFF; padding:5px 0; font-size:85%; height:15px}
#mainheader img{ margin:0;}


/* =Content
----------------------------------------------- */
#wrapper{ background:#000;}

#main{ background:url(../img/indexnew/back.gif);}
.main2{/* ▼ 透過グラデーション設定 ▼ */
	background: -moz-linear-gradient(50%,rgba(240,240,240,0.0),rgba(80,80,80,0.2)); /* Firefox用 */  
	background: -o-linear-gradient(rgba(240,240,240,0.3),rgba(80,80,80,0.3)); /* Opera */
	background: -webkit-gradient(linear,left top,left bottom,from(rgba(240,240,240,0.2)),to(rgba(80,80,80,0.2))); /* Safari,Google Chrome用 */
	background: linear-gradient(50%,rgba(240,240,240,0.3),rgba(80,80,80,0.2));
}

#main #back{ background:#efefef;margin:0px auto; width:960px;}

#main #contents{float:right; width:696px; margin:0 15px 0 0;text-align:left; }
#main #sidenav{float:left; width:234px;border-right:1px solid #000; text-align:left; }

#main #contents h1{ background:url(../img/common/midashi.gif) no-repeat left bottom;margin:20px 0 15px; font-size:180%; font-weight:bold; padding: 0 0 5px 40px}
#main #contents h2{margin:10px 10px 0; font-size:110%; font-weight:bold;}

#main #contents a {
	text-decoration:underline;
}
#main #contents a:link,#main #contents a:visited {
	color: #036eb8!important;
}
#main #contents a:hover{
	color:#C00!important;
}
#main #contentsv a:active {
	color:#C00!important;
}

#main #contents article{ background:#FFF; border:#231815 1px solid;margin:15px 10px 0;  padding:15px 25px 15px; }
article h3{ color:#036eb8; font-weight:bold; }


/* =home
----------------------------------------------- */
#home #mainheader{ height:558px;}


#home #main #contents{float:left;margin:0 0 0 15px;text-align:left; }
#home #main #contents h2{ margin:10px 0 5px 20px; font-weight:normal;font-size:100%;}
#home #contents ul{ text-align:center;}
#home #contents ul li{ display:inline-block; *display: inline; *zoom: 1; vertical-align:middle;}

#home #contents ul.img li{ margin:0px 14px;}
#home #contents ul.img li:first-child{ margin:0px 14px 0 0;}
#home #contents ul.img li:last-child{ margin:0px 0 0 14px;}


#home #contents #topbtn li {margin:20px 0 0;}
#home #contents #topbtn li:nth-child(2) {margin:23px 0 0;}
#home #contents #topbtn #sam ,#home #contents #topbtn #zu{ border:1px solid #ddd;}
#home #contents #topbtn #sam a,#home #contents #topbtn #zu a{  width:255px; height:121px;  display:block; font-size:80%; text-decoration:none; }
#home #contents #topbtn #sam a{ background:#fff url(../img/indexnew/sample.jpg) no-repeat;}
#home #contents #topbtn #zu a{ background:#fff url(../img/indexnew/zumen.jpg) no-repeat;}
#home #contents #topbtn #sam p{ text-align:left; padding:50px 10px 0 85px;color:#000 ;}
#home #contents #topbtn #zu p{ text-align:left; padding:50px 15px 0 90px;color:#000 ;}
#home #contents .kojyo{ margin:10px auto; text-align:center;}
#home #contents .b{ margin:40px 30px 0 !important; text-align:center; padding:30px 0 10px; border-top: 1px solid #999; font-size:85%;}
#home #contents .b li{ display:inline-block; margin:0 5px; vertical-align:middle;}

#home #contents #topbtn a:hover{
background-position:right top;
color:#C00!important;
}

#home #contents div.ex{ margin:15px 0;background:#FFF;border:1px solid #231815; padding:0 0 10px;}
#home #contents div.ex h3{ background:#231815; padding:5px 15px 3px;margin:0 0 10px; color:#FFF; font-size:120%;}
#home #contents div.ex h3 a{ color:#FFF!important;width:100%!important; display:block; text-decoration:none;}
#home #contents div.ex li{ margin:5px 4px 5px;}

#home #contents .selection{ margin:40px auto; font-size:85%; width:660px; overflow:hidden; text-align:center;}
#home #contents .selection a{width:660px; 	display: block;	padding:0; color: #036eb8!important; text-align:center;}
#home #contents .selection a:hover {color:#C00!important; }
#home #contents .selection a:hover img {left:-660px; }



#home #main #sidenav{border:none;float:right;border-left:1px solid #000; margin: 20px 0 0 0; padding:0 0 30px;}
#home #main #sidenav li#sidemitumori { margin:-25px 0 0 0!important; }
#home #main .b { margin:10px auto; text-align:center; }

div.boxdata{ border-top:1px solid #000; padding:40px 20px 40px ; text-align: center;}
div.boxdata.boxdata2{  padding:40px 20px 0px ; text-align: center;}
img.hako, div.boxdata div { display: inline-block; vertical-align: middle; text-align: left;}
  img.hako  { width:250px !important; height: auto;}
 div.boxdata div {  width:calc( 100% - 250px - 30px ); margin-left: 15px;}
 div.boxdata div h5 { font-size:120%; text-decoration: underline; margin-bottom: 15px;}
div.boxdata.sam {border-bottom:1px solid #000;padding:40px 20px; }
div.boxdata div p {  margin: 1em 0!important}

/* =ex
----------------------------------------------- */
#ex #main dl{margin:0px auto ; width:500px;}
#ex #main dl dt{margin:40px 0 10px!important; font-size:120% !important; font-weight:bold;}
#ex #main dl dt:before { content:"┃ "  }


#ex #main dl dd{ text-align:center; margin:0 0 45px;}
#ex #main dl dd ul{ text-align:left; margin:0 0 10px 20px; padding:0;}
#ex #main dl dd ul li:before { content:"・";}

#ex #main .extop{margin:0px auto ; text-align:center;}
#ex #main .extop li{ display:inline-block;}


/* =about
----------------------------------------------- */
#about article h3{  padding:5px 0 5px 100px;font-size:180%; margin:0 0 8px;}
#about article.n01 h3{ background:url(../img/common/STEP_1.gif) no-repeat;}
#about article.n02 h3{ background:url(../img/common/STEP_2.gif) no-repeat;}
#about article.n03 h3{ background:url(../img/common/STEP_3.gif) no-repeat;}
#about article.n04 h3{ background:url(../img/common/STEP_4.gif) no-repeat;}
#about article.n05 h3{ background:url(../img/common/STEP_5.gif) no-repeat;}

#about article.n01 dl dt,#about article.n01 dl dd{float:left;}
#about article.n01 dl dt {clear:both; background:url(../img/common/ya.gif) 100% 50% no-repeat; width:245px;  margin:15px 0 10px ; font-size:105%;}
#about article.n01 dl dt span{ background:#036eb8; padding:5px 8px; color:#FFF; width:auto;}
#about article.n01 dl dd { width:367px; margin:15px 0 0px 10px; }
#about article.n01 dl dd a {  font-size:105%;font-weight:bold;}

#about article.n01 dl.fax dt {width:80px ;}
#about article.n01 dl.fax dd { width:530px;}

#about article.n01 dl dd div.kome { padding: 0 0 0 1em; }
#about article.n01 dl dd div.kome:before { margin:0 0 0 -1em; content:"※"   }

#about .chui {background:#e5f0f7; padding:15px 10px 10px 15px; margin:10px 0 5px 0; font-size:90%;}
#about .chui p{ padding: 0 0 0 2em; }
#about .chui p:before { content:"注:"; margin:0 0 0 -2em;  }

#about article ul { margin:0 0 0 5px;}
#about article ul li{  background:url(../img/common/maru.gif) no-repeat 0 8px; padding:0 0 0 15px;}
#about article ul.kome{ margin:2em 0 0 5px;}
#about article ul.kome li{ background:none;  padding:0 0 ;}
#about article ul.kome li:before { content:"※ "  }

#about dl.sodan{ margin:20px 0 0 30px;}

#about dl.sodan dt,#about dl.sodan dd{float:left;}
#about dl.sodan dt{ width:120px; clear:both; font-weight:bold; font-size:105%; margin:10px 0;}
#about dl.sodan dd{ width:490px;margin:10px 0; border-left:1px solid #000; padding: 0 0 0 15px; }


#about #guide{margin-top: 50px;}
#about #guide h1 span{ font-size:80%;}
#about #guide article {  margin:40px 10px 0; }
#about  #guide article  dt{  font-size:140%; margin:0 0 8px;color:#036eb8; font-weight:bold; }
#about  #guide article  dd{  margin:0 0 20px 15px;}
#about  #guide article  dd ul.chuijiko{ background:none;margin:10px 0 5px !important;}
#about  #guide article  dd ul.chuijiko li{ background:none; margin:0 0 !important;padding:0 0 ;}
#about  #guide article  dd ul.chuijiko li:before{  content:"※ "; color:#C90A0D; }


/*company
----------------------------------------------- */
#company dl{ margin:30px auto !important; width:600px; border-left:1px solid #333333; border-right:1px solid #333333;border-bottom:1px solid #333333; background:#f5f5f5;  }
#company dl dt,#company dl dd{float:left; padding:8px 6px 8px 10px;}
#company dl dt{ clear:both !important; width:100px;border-top:1px solid #333333; }
#company dl dd{ width:467px;border-top:1px solid #333333;border-left:1px solid #333333; background:#FFF;  }
#company dl dd .chuitel{ background:url(../img/company/icon.gif) 0 3px no-repeat; margin:0.5em 0.5em 0;  padding:0 0 0 20px;}
#company dl dd .chuitel strong{
 border-bottom:#C00 dotted 1px; color:#C00;}

/*case
----------------------------------------------- */
#case #main #contents h1{ margin:20px 0 1px!important;}

#case h2{margin:15px 0 0px 15px!important; font-size:130% !important;}

#case h2.line2{margin:50px 0 0px 15px!important; }
#case ul.btn {margin:5px auto 0px  15px;   font-size:90%; clear:both;}
#case ul.btn li { display:inline-block; *display: inline; *zoom: 1; vertical-align:middle; margin:0 8px;}
#case ul.btn li:before { content:"・"}

#case p.head{  font-size:100%; font-weight:bold;margin:0 0 10px 40px!important; }

#case #main #contents article{padding:15px 15px 15px 25px !important; font-size:95%; }
#case article h3{  font-size:140%; margin:0 !important;}
#case article h4{  font-size:110%; font-weight:bold;margin:20px 0 0 0px!important; }
#case article p{ margin:1em 0 0; }
#case article p img{ float:right; margin:0 0 10px 8px; }

#case article ul { margin:10px 0 0 5px;}
#case article ul li{  background:url(../img/common/maru.gif) no-repeat 0 8px; padding:0 0 0 15px;}
#case  article dl{margin:0px 0 0px 10px ;}
#case  article dl dt,#case  article dl dd{float:left;}
#case  article dl dt {clear:both; background:url(../img/common/ya.gif) 100% 50% no-repeat; width:170px;  margin:5px 0 10px ; }
#case  article dl dt span{ border:2px solid #036eb8; padding:3px 4px; background:#fff;width:140px!important;  display:block; text-align:center;}
#case  article dl dd { width:440px;  margin:8px 0 0px 4px;}
#case  article dl dt.last { background:none;  }
#case sub {position:}


#case article  ul.zaisitugazo  { text-align:center; }
#case article  ul.zaisitugazo li  { display:inline-block; background:none !important;  margin:0 1px ; padding:0;}
#case article  ul.zaisitugazo li p  { margin:0 1px ; padding:0;}



article.method dl  {border-bottom:1px solid #036eb8;margin:0px 0 20px 10px!important ;}

article.method dl dt {background:none!important;margin:5px 0 0!important ; padding:8px 0 5px;border-top:1px solid #036eb8; font-weight:bold; width:150px!important; }
article.method dl dd img { float:right;margin:0 0 5px 5px;  }
#case article.method  h4{ font-weight:bold;margin:20px 0 0 10px!important; }
#case article.method  h4:before{  content:"■ "}

article.method dl dd  {  margin:5px 0 0 !important;padding:8px 0 5px;border-top:1px solid #036eb8; width:465px!important;}


article.alumi h5{margin:15px 0 0 20px;}
article.alumi ol{ margin:0 0 0 60px;}
article.ketgo ul{ list-style:none; margin:0 auto; text-align:center;}
article.ketgo ul li{ background:none!important; display:inline-block; text-align:left; vertical-align: bottom; margin:10px; font-size:90%;}

article.ketgo ol img{margin:0 0;}

.al{ text-align:right;}


/*low
----------------------------------------------- */
#low dl{ margin:30px auto !important; width:600px; border-left:1px solid #333333; border-right:1px solid #333333;border-bottom:1px solid #333333; background:#f5f5f5;  }
#low dl dt,#low dl dd{float:left; padding:8px 6px 8px 10px;}
#low dl dt{ clear:both !important; width:100px;border-top:1px solid #333333; }
#low dl dd{ width:467px;border-top:1px solid #333333;border-left:1px solid #333333; background:#FFF;  }
#low dl dd ul li{  background:url(../img/common/maru.gif) no-repeat 0 8px; padding:0 0 0 15px;}
#low dl dd div{ background:#f0f0f0; margin:0.5em 0.5em 0;  padding:10px; font-size:90%;}
#low dl dd div h3{ border-bottom:#C00 dotted 1px; color:#C00;}
#low dl dd div ul{margin:5px 0 0 15px;}

#low  #main #contents h2{ background:url(../img/common/midashi.gif) no-repeat left bottom;margin:20px 0 15px; font-size:180%!important; font-weight:bold!important; padding: 0 0 5px 40px!important}

#low  #main p{ margin:20px 0 0 40px;}

.red{ color:#C03;}


/*mail
----------------------------------------------- */
#mail #contents article  p{ margin:0 0 1em !important;  }
#mail #contents article h5{ margin:2em 0 1em !important;  font-weight:bold; }
#mail #contents   article ol{ list-style:none;   margin:0 0 1em 2em}
#mail #contents  article ol li{ margin:0 0 10px 1.5em!important;  }
#mail #contents article ul{  margin:0 0 1em  0em!important; list-style:none;  }
#mail #contents article ul li{  background:url(../img/common/maru.gif) no-repeat 0 8px; padding:0 0 0 15px;}
#mail #contents article  ol li:before{background:#D90000; color:#fff; padding:2px 6px; margin:0 0.5em 0 -2em;  }
#mail #contents  article ol li:first-child:before{ content:"1"; }
#mail #contents  article ol li:nth-child(2):before{ content:"2"; }
#mail #contents article  ol li:nth-child(3):before{ content:"3"; }
#mail #contents article  ol li:nth-child(4):before{ content:"4"; }
#mail #contents  article ol li:nth-child(5):before{ content:"5"; }

#mail #contents  #yahoo{margin-top: 50px;}


/*footer
----------------------------------------------- */

.pagetop{ float:right; font-size:90%;width:115px; margin:10px 40px 10px 0;}
#main #contents .pagetop a {
	text-decoration:none;
}
#main #contents .pagetop  a:link,#main #contents .pagetop  a:visited {
	color: #000!important;
}
#main #contents .pagetop  a:hover{
	color:#C00!important;
}

#foot {margin:0 auto!important; padding:0 0 20px; color: #fff; background:#000; }
 p small {font-weight:normal !important; font-size:80%!important; }


/*リンクカラー*/
#footernav link{
	text-decoration: none;
}
#footernav a:link,#footernav a:visited{
	color: #fff!important;
	text-decoration: none;
}
#footernav a:hover{
	color:#D99DB3!important;
}
#footernav a:active {
	color:#8C3561!important;
}
#footernav {margin:0px auto 0!important;padding:20px 0 0!important;width:960px;}

#footernav ul{display:inline-block; *display: inline; *zoom: 1;margin:0px auto 0!important; padding:0!important; vertical-align:top; text-align:left; font-size:90%;}

#footernav ul li{ margin:0 0 5px; }
#footernav ul ul{display:block;margin:5px 0 0 1em!important; padding:0!important; font-size:100%;}
#footernav ul li.re{ margin:1em 0 5px; }

#footernav ul#foot01{ width:90px;}
#footernav ul#foot02{ width:210px;}
#footernav ul#foot03{ width:310px;}
#footernav ul li a:before  { content:"｜" }
#footernav ul li ul li a:before  { content:"├ " }